- Read Tutorial
- Watch Guide Video
It will consist of the underlying component and then just two div's, super simple, so let's go into our code and let's do this.Let's close out of shipping and let's go to the bottom here in our payment.scss and let's just say .small-text font size is 14 pixels. We can even put this all on one line, it could be a little helper.
payment.scss
.small-text { font-size: 14px; }
What we're going to do is we're going to get out a payment.scss and we are going to introduce, well we still need it, so keep it open. But we're going to introduce a couple of things in here, we're going to say div we'll say className is payment-form and we'll just say shipping info and then what we'll do is we'll say div and then we'll put another class in here and we'll say shipping-info.
Instead of using a div, we'll use an underlined title. We'll say UnderlinedTitle className is equal to shipping-info__title and then the title in here is going to be... what's it called, it's going to be Ship to or something, let's go check the design, Shipping To.
So it's going to be Shipping To, so get this in here. Just these three lines are new, these are the only new lines in here, other than the 14 pixel small text thing we added.
<div className='payment-form__shipping-info shipping-info'> <UnderlinedTitle className='shipping-info__title' title='Shipping To'/> </div>
Next thing we're going to do is put another div, and we're gonna say className is equal to shipping-info__name and then we're going to say small-text, and then, for now, we're going to put Jordan Hudgens. Next thing we're going to do is we are going to copy this pasted it here, and then let's put the address and we'll say an address goes here. Okay so get this in here, we've got these five lines of code we got payment form shipping info and then it's got shipping-info__title, shipping-info__name, shipping-info__address all with small text applied to these two divs.
paymentForm.js
<div className='payment-form__shipping-info shipping-info'> <UnderlinedTitle className='shipping-info__title' title='Shipping To'/> <div className='shipping-info__name small-text'>Jordan Hudgens</div> <div className='shipping-info__address small-text'>1234 address goes here</div> </div>
Let's head into payment.scss and let's say .shipping-info, we'll say &__title, we'll say &__name, &__address and in all likelihood, we're not going to use these. Let's now say that the display is grid and the grid template columns is 1fr and then we'll say and & > * grid column is 1/-1, they're all going to exist on the same column.
payment.scss
.shipping-info {
display: grid;
grid-template-columns: 1fr;
& > * {
grid-column: 1/-1;
}
&__title {
}
&__ name {
}
&__address {
}
}
Let's see what this looks like so far and then adjusted it if we need to. All right it's over here, we need to put it under Order Summary.
So let's go to vs code and let's give it a width and height. I'm going to check order-summary wherever we put that. So it looks like it's in shipping.scss and payment.scss I guess. But we need to get these so it's in InfoHelp.scss do you see how we have a width and height of 150 and 240 right.
We want to get that and put it inside of our .shipping-info in our payment.scss. We need to give the shipping info a width of 240 pixels and a height of 150 pixels. So this is our code that we put in the css file so far in this video, this all the css and this is all the JSX we've added in this video. So these five lines and these lines in here are these 20 or so lines.
paymentForm.js
<div className='payment-form__shipping-info shipping-info'> <UnderlinedTitle className='shipping-info__title' title='Shipping To'/> <div className='shipping-info__name small-text'>Jordan Hudgens</div> <div className='shipping-info__address small-text'>1234 address goes here</div> </div>
payment.scss
.shipping-info {
width: 240px;
height: 150px;
display: grid;
grid-template-columns: 1fr;
& > * {
grid-column: 1/-1;
}
&__title {
}
&__ name {
}
&__address {
}
}
Okay, let's check it out, and you'll see it's kind of looking good although we need to change a couple things.
But first let's get it over here once and for all. The way we're going to do that is by going up here and saying and shipping info sense we included that tag and we're going to take the same stuff as order summary and put it there. Next thing we're going to do is we're going to apply transform on the y axis, we're going to say transform translate y, and we're going to put it down 200 pixels, we'll change it as needed.
Okay let's see what this looks like. All right, a little too far down but it's looking good.
Let's go back to vs code and let's put it down to 120 pixels and see what it looks like, it's a little too close so let's say 130 pixels and let's go back to Chrome and it's looking pretty good when you put down a tiny bit more, let's say 135 I guess I don't know.
Then what we need to do is apply it to shipping info, so let's say display is grid, and then we need to apply some rows. Let's say grid template rows and let's say 24 pixels, 24 pixels, 24 pixels. Basically it's the same thing as in the other file.
So get this all down including the translate y 135 pixels and then I'm going to navigate back to shipping.scss and what I'm going to do is go to InfoHelp.scss and we're going to take this grid row gap and the grid template rows because we want it to be very similar to our order summary rows.
There we get our case we have template rows 30 pixels 24 pixels 24 pixels 46 pixels grid row gap of 5 pixels. All right we can get rid of the 46 save that Chrome and see what looks like.
payment.scss
&__shipping-info {
grid-row: name-s;
grid-column: pay-complete-s/-1;
justify-self: end;
transform: translateY(135px);
}
}
.small-text { font-size: 14px; }
.shipping-info {
width: 240px;
height: 150px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 30px 24px 24px;
grid-row-gap: 5px;
& > * {
grid-column: 1/-1;
}
&__title {
}
&__ name {
}
&__address {
}
}
Right, it looks really good. We just need to push it down a bit more because it's a little too high.
So let's go in here and let's translate it down 140 pixels, let's try 145 pixels, I thought we had it at 140 and it was too far down but whatever. Okay, that looks really good, but we might as we'll do 150 pixels on a translation. Let's go back to Chrome and see what looks like. All right, it looks really good, it almost feels like it isn't moving but it is.
Okay so everything's good in here and we have shipping to Jordan Hudgens 1234 address goes here. The last thing we need to do is pull this data from our actual store. If you go to redux dev tools to the left, and we pull this window to the right a bit.
User has some information, it has a name and a shipping address in purchase detail right, but we need to put this straight in user. So let's go into user real quick by going into our store so lets go to user.js and basically we need to implement a sign in ability so we'll do that in the next video just so we can keep things more sectional I just keep on thinking we'll get this video done with everything needed but will try and cut this up a bit.
So let's commit our code.
Terminal
git status git add . git commit -m "built shipping to component"
Okay, I'll see you in the next video.