Let's go ahead and look at our code real quick, and this what we did in the last video game okay, we really structured a lot of the SCSS and we built out a couple components in our shop cart component and laid them out. Okay so really clean, nice setup we've got going here. Let's go ahead and start developing the cart content component so let me head over to that design, just to remind you what's going in there okay.

We're going to need all of this okay, so basically the entire cart component minus this X button.

Let's start by putting in three separate components okay. We need a title, we'll just use a div we won't make it a component. And then same with this items section in the middle, we won't make it a component because we can easily just map over it, but we're going to need a component within there so that's the thing. We're going to be building the cart product component okay, so that and then we need the footer component which contains a button and a couple other things.

Okay, so let's go into our application code and let's start off by putting in the title by bringing a div in here and in className cart-content_title, we'll put another div in here and say className is cart-contentproducts, and then we need one more div with the className is equal to cart-content_footer.

Now in the title it's just a title obviously so we need to take in an amount. Okay, we have cart and then it has parentheses and then basically the amount of items in our cart, so we'll say basically we're going to be passing in all the products okay. So we can get the count and the products by going up here and taking in a prop called products and saying let count equal products.length okay and then we'll just put that in here.

Now let's go provide these products array into our cart content by saying products is equal to an array okay, an object with an array in it. Okay now the array is going to be taken from our props but we haven't really mapped things over yet, so let's go ahead and lets for now just put in 4 so it matches our design, okay, and then let's go see what this looks like in the browser.

Okay so all we've done in this video is what's in function CartContent and then I passed in products as an array, we've got to make sure this is an array. So basically this will count as 1 so we just need to put like a number of items in here right. This will be 3 right because there are three items in here so it's going to say products.length is 3, and then it will say 3 in our title.

Okay, let's go to our application and see what it looks like. All right it says cart 3, you see how small that is?

Okay, so that's how that works. Let's go ahead and put the styles in for it now. So let's go to the design, let's get these. So it's going to be pretty simple just a font-weight of 600, a font size of 30, titillium and E6E6E6. Okay so let's go to our application shop-cart.js and let's say on the content that we have, we're going to have to go down here and say cart content at the very bottom and we'll say &__title and we'll say font-weight is 600, font size is 30 pixels.

Then we've got a font family of Titillium Web and then we have a color of white okay. So let's go check the design one more time. Okay, the color is E6E6E6 which is basically white but let's go with the designs color because it's going to be more accurate with the design.

Okay, there we go, that's how we do that. Let's just add in the other selectors here, so we've got &title, &products, &__footer. We know the product is going to be a grid of some sort, so let's just say display grid, and then for the footer it's also going to be a grid so let's just say display grid.

Okay cool, that set's us up for that.

shop-cart.scss

.cart-content {
    &__title {
        font-weight: 600;
        font-size: 30px;
        font-family: 'Titillium Web';
        color: #E6E6E6;
    }
    &__products {
        display: grid;
    }
    &__footer {
        display: grid;
    }
}

Let's go and look at the browser right, and we have this title.

So now let's go ahead and let's start developing.... let's go with the footer for now. Then once we get our data we'll do the card content. Okay, so in the next video what we're going to do is we're going to handle the footer component. So let's go to our code, and hit command + j and let's say git diff just to see what we changed in this video. Okay, we can hit return a lot, and it'll show you what you added basically.

So we only added this much code, not too much, it just looks like a lot but it's really not. We just added in a little bit. So let's commit our code.

Terminal

git status
git add .
git commit -m "structured cart content products component and styled title"

Okay, I'll see you in the next video.

Resources

Source code