Okay, let's switch back to do some UI work but throughout the next few lessons we're going to weave in some Laravel as well as telling CSS. Okay, so remember we have worked on the empty cart UI, but if I add an item to the cart and another one, you can see that we have this debugging information here, but our cart is still empty. To refresh your memory, we've created a cart component folder. And we have this aside, which currently just has an empty component. And I guess

component folder. And we have this aside, which currently just has an empty component. And I guess what we want to do is create another component x cart that active sounds pretty good. And in here we'll have the UI of the shopping cart when it's not empty, obviously. So let's create a new file called active that blade dot PHP. And this is going to be our active cart. And you can see it here because we currently displaying both the empty and active cards, but obviously we'll ever

it here because we currently displaying both the empty and active cards, but obviously we'll ever only show one of the two components empty or active at a given time. So the front end can already tell if there is a cart in the database. Remember, we have this if exists function that will return either a cart or not. But that's still not enough because we can have a cart that has no items because the items have been removed, in which case we should display the empty cart.

no items because the items have been removed, in which case we should display the empty cart. The real difference between empty and active for a cart should be is there any product in the cart at the moment? So we should have an item count property somewhere, probably on the cart model. If it's zero, we show the empty cart. If they are at least one item, we show the active cart. If I look at the UI, it looks like we are going to be concerned with how many items are in the

If I look at the UI, it looks like we are going to be concerned with how many items are in the cart. Anyway, you can see in this image of the design, there are seven items because there is one, four and two. So to me, that sounds like a total quantity method on the cart model would be pretty useful. So what are we at that? I'll go after the items here and go public function, total items count here, I'll go with quantity. And here we will accept co-pilot . We are going

total items count here, I'll go with quantity. And here we will accept co-pilot . We are going to drill into the items and then sum their quantity field. And because this is an integer, we can have the total sum of these. And just like that, from the cart model passed to the front end, we should be able to query the total quantity. All right, so to display the quantity here in the cart title, we need to pass the cart to this cart component. So in the welcome templates,

the cart title, we need to pass the cart to this cart component. So in the welcome templates, and by the way, let's get rid of our placeholder debugging UI here. Remember how we passed the product to the product component? Well, we need to pass the cart to the cart component. So cart equals cart. So here, I can define the cart props at props, cart, which means that now in here, I should be able to dynamically pass the cart, total quantity. Let's go look at the front end.

I should be able to dynamically pass the cart, total quantity. Let's go look at the front end. And very cool. It's working. We have two items. And if I was to add a third one , we now have three. This is great, because now we can use the same total quantity logic to determine if we show the empty cart or the active cart at if cart. And yeah, is empty would be a nice convenience for sure. And we could add this to our model. But we can also check for the total quantity. And then and if, and instead of accepting copilot

model. But we can also check for the total quantity. And then and if, and instead of accepting copilot 's suggestion, all I need to do is flip over the order of the components. If we have a quantity that is not faulty, we have the active card, otherwise the empty cart. So right now we have three items in the cart. So we should see the active card only. And indeed, we do. But if I go in the database and delete all three cart items. Now when I refresh the page, we are going to see

in the database and delete all three cart items. Now when I refresh the page, we are going to see the empty cart. So it's working. All right, that's our cart logic in place. We can now finally start doing some I'm styling for the active cuts.