Our product list UI is in a pretty good place. Let's now tackle the shopping cart. So the first obvious thing about the shopping cart is it has two states. This is the empty state when there are no items in the cart. And then once a user has added a few items in the cart, this is what it looks like. Obviously to build this part of the UI, it would be nice to actually have some data in the database, just like we built products with a product list in the database, I want to have an actual shopping cart mechanism in the backend so we can do

just like we built products with a product list in the database, I want to have an actual shopping cart mechanism in the backend so we can do the UI. So what we're going to do is implement the empty cart state first, and then we're going to implement the shopping cart functionality in the backend in Laravel, and then come back to the front end to build the UI with real line items in our cart, which means I'm going to change a lot of shirts, but let's start with some styling

which means I'm going to change a lot of shirts, but let's start with some styling of the empty shopping cart. So we had that placeholder shopping cart area in the side, which is a good start. And let's go and implement that in our welcome that blade that PHP template. We have the main section with the product and then the aside here to make it a bit easier to navigate and read. I want to have some components. So in our views and components directory,

navigate and read. I want to have some components. So in our views and components directory, let's add a new cart folder and inside there will have a few different components. Let's start with, I guess, the index that blade that PHP. And here I'll paste my aside for now. And now let's see if in the welcome template, we can reach that X cart. All right, so let's jump into the cart index, and we will remove the placeholder height. We need to add some rounded,

into the cart index, and we will remove the placeholder height. We need to add some rounded, let's go XL. And then inside the cart, we'll have an H2. Remember, there's an H 1 on the page title. And here we will go your cart. And in brackets, zero to indicate that there aren't any items, but that number will become dynamic later from memory. This text is red text red. It's bold. And the size, let's go text three XL. All right, this might be a little bit too big.

It's bold. And the size, let's go text three XL. All right, this might be a little bit too big. I might go one lower to XL. Yeah, I think that works. All right. Next, we're going to have that placeholder cake image and a paragraph that says your added items will appear here. I will copy that text. And it looks like it's the rose 500 and maybe medium font weight. So I will add here a paragraph tag with that text. And let's go class font medium text rose 500. Okay. And it just

paragraph tag with that text. And let's go class font medium text rose 500. Okay. And it just occurred to me that it's text centered as well. So text center. Obviously, we need to add the image in between before it looks any good. And I can see that the background is spending all the way to the bottom here. So we need to fix that as well. The image, I believe, will be available in the challenge files, images, illustration empty cards, there it is, we can use it as an

in the challenge files, images, illustration empty cards, there it is, we can use it as an inline SVG rather than an image tag. So I will copy the SVG code for it. And in our card component, I will have a new component called empty card illustration that blade that PHP. And we'll paste that here. So now between the H two and the paragraph, we can have this X card that empty, help me out copilot. No, cards, I keep seeing it, but it keeps disappearing, illustration component.

help me out copilot. No, cards, I keep seeing it, but it keeps disappearing, illustration component. All right. So that's a start. We need to figure out the spacing, of course. And so I think I'll assume that this is the heading for the card, regardless of whether it's full or empty. And then this UI here is going to be the empty cards. And we're going to have another UI for the not empty cards. In other words, in the code, eventually, we will have if something like has items, we don't,

empty cards. In other words, in the code, eventually, we will have if something like has items, we don't, I don't know. And then we will have this bit of code, and then else, and then some more code, and then and if so let's backpedal on this. But this is what we're going to implement. And so I think that all of this really can be moved into yet another component. And this is going to be the empty that blade that PHP. So I'll paste that here. And so now inside the index file, I can have

empty that blade that PHP. So I'll paste that here. And so now inside the index file, I can have the X card that empty. And of course, we'll have some logic to either display this or the non empty, the populated card. Okay, so speaking of the empty card, I just remember I wanted this heading to be shared by both. So I will move it to the index. And in the empty card, I think that I'm going to have a flex parent. So that flex and flex call to make it vertically stack. And that's going to

have a flex parent. So that flex and flex call to make it vertically stack. And that's going to allow me to set the gap. Let's go gap four between the elements. And because flex call here, if I want to center align the image and the text, I can go items center. And so the gap is only going to be applied between the two elements. I think it's a bit too big. And I need some margin top to push it down from the heading. So let's go gap to an empty four. All right, that looks pretty good.

it down from the heading. So let's go gap to an empty four. All right, that looks pretty good. And the last thing that I need to handle is the background occupying the whole column. The reason it's happening is because of our current grid. If I turned it on, our first column is spreading all the way down here. And so the second column is also so the easiest way to solve that out is to have an extra wrapping div here. So I'll turn this into a div. And then I'll have the aside

have an extra wrapping div here. So I'll turn this into a div. And then I'll have the aside and wrap it. So the aside will take the full height. And then inside of it, the card element will just occupy the space that it needs. As you can see here, so let's quickly compare with the design. So the design is here on the left. This is the image. So the font size, I don't really care. But the spacing here is way too small. And the other thing is we need more spacing here as well to

the spacing here is way too small. And the other thing is we need more spacing here as well to make it look a bit closer. So I will double the margin top empty eight. And I 'll also add some padding bottom to yeah, I can do it inside here. Although let me check the populated design. And yeah, the spacing is not there. So it's really an empty card spacing. I don't even know if it's intentional, but let's recreate it. So inside the empty card is a good place. I 'll go PB dash two.

intentional, but let's recreate it. So inside the empty card is a good place. I 'll go PB dash two. And honestly, I think I can crank up the margin top even more and also increase the gap to really make this placeholder a bit bigger. So I don't want to fiddle forever, but I'll go empty 12. And let's go back to gap four between the two items. All right, this feels a lot better. And if I zoom this down a bit, you can see that this is looking pretty good. I think I'm gonna stop right there.

this down a bit, you can see that this is looking pretty good. I think I'm gonna stop right there. Like I said, I don't want to build the populated card UI before we actually have a card mechanism on the back end. So I don't even know where my shirt is. This is not that one. This is that one. We are going back to Laravel for the next lesson. And we're going to build the shopping cart and the cart items models. See you there.

the shopping cart and the cart items models. See you there.