Let's allow our users to increase or decrease the quantity of a given product inside the cart. As of now, visitors can add items to the cart, and it's working, but you can see that the UI is still saying "Add to Cart" and yes, you can add multiple products, but the UX is not great. Also, we are meant to follow a specific design, and you can see that whenever an item is inside the cart already, it has this decrement increment UI and it shows the amount of items in the cart . To be able to determine what we should show in the UI for a specific product,

. To be able to determine what we should show in the UI for a specific product, we should be able to query the cart and figure out how many quantity if any there is of that product inside the cart. Right now, in our cart model, we're able to see the items in the cart, we have a convenience that gives us the total items count, but there isn't a direct way, as of now, to ask the cart if there are any quantity for a given product. Something nice to have would have something like public function, quantity of a given product,

Something nice to have would have something like public function, quantity of a given product, and we can type this as a product, and what we want to return here is, well, let's check the items, and then try to get the first where, and we're going to match a condition, and indeed we're going to try to get the quantity for this product, or fall back to zero if there isn't one, which means we don't have that product in the cart. And the condition is exactly like suggested. Each cart item has a product ID field,

And the condition is exactly like suggested. Each cart item has a product ID field, and we want that to match the product ID, product being the one that is passed to the quantity of function when we call it. So I will accept this. And so this should give us, maybe I can type it as an integer, this should give us a number between zero and whatever the quantity is. All right, let's head over to our product component, and the product component itself is now going to have to need to be aware of the cart. So we're going to pass the cart as a second prop, and let's make sure that in

itself is now going to have to need to be aware of the cart. So we're going to pass the cart as a second prop, and let's make sure that in the welcome blade that PHP, we also pass the cart here, like so. And now as a debugging approach, let's go in, cart, cart, and then quantity of product. But remember, the cart might be null, so we need to check, do we have a cart? If yes, get the quantity of, otherwise, return zero. I feel like this should give us the correct amount of items for each product. And it looks like it does. Zero, one, three, and you can see that it's matching .

And it looks like it does. Zero, one, three, and you can see that it's matching . If I'm adding a waffle, it's going to go up to one, two, three, four, it's working very nicely. Okay, great. So this allows us to determine if we show add to cart or the increment decrement. So now we can focus on the UI. And then once we have the UI in place, we will implement the decrement in the functionality in the back end. Remember, we can add to cart, but we cannot remove one from cart. So we will tackle that after the UI is done.

Remember, we can add to cart, but we cannot remove one from cart. So we will tackle that after the UI is done. Okay, I have a funny feeling we are going to use this quantity more than once. So why don't we have here a @php block, we will store a quantity variable that stores the result of this. And so we're going to remove this placeholder, but that would allow us to just use the quantity like so. Let's get rid of that. And let's find our add to cart button, which is actually this entire form. I forgot to remove the to do comment from before, but now we're going to have a

this entire form. I forgot to remove the to do comment from before, but now we're going to have a condition, which is @if. Quantity, we could go greater than zero, but just quantity means that it's true if it's more than zero and falsey if it's zero. So if quantity, then we are going to have our increment decrement at else. We are going to have our existing button and then at and if. Okay, so the first three are in the cards. So they show the increment decrement and all the others are not yet. But if I was to add this one, you can see that the UI switch, so that's working

and all the others are not yet. But if I was to add this one, you can see that the UI switch, so that's working . And so we can now focus on building that UI at a very high level. This is a flex container with three items inside of it, they're vertically aligned and centered. And I think this middle one will have flex grow to take as much space as it can . Okay, so div, let's have just a form with a button that says minus. In the middle, we can have a span with the quantity and copilot is going to

Okay, so div, let's have just a form with a button that says minus. In the middle, we can have a span with the quantity and copilot is going to figure out the third one. This is a very high level markup. As you can see, it's not looking great at all just yet, but just you wait. A few classes on the parent will really make it shine. So flex items center, BG red, py3, rounded, full, fixed, white. Let's start with that. Okay, this is a start and remember, we're going to have to have the transform just like we did for this one.

Okay, this is a start and remember, we're going to have to have the transform just like we did for this one. So it's halfway across. I want to set a max width, I guess. Let's eyeball it, W40. And you know what, it's not bad. It might be a bit too small. But if I center it with MX auto and I bring it back up by half with translate Y one half, but we want minus. Look at this.

one half, but we want minus. Look at this. This is pretty good. Next, I can set the items to justify center. Justify center, even if they won't touch, we definitely want to gap just in case. And like I was saying, I want the middle one to use all the space it can. And I think we can go on the span here, go class, flex one or flex grow. But as copilot had noticed, it also needs to be text center, text center. All right, how we doing this is definitely a start.

But as copilot had noticed, it also needs to be text center, text center. All right, how we doing this is definitely a start. Now, honestly, we could keep the plus and minus character and add a rounded border. I imagine that in the challenge files, again, there's going to be yes, decre ment and increment. These shapes are so easy that the SVG code is probably very small. You know what, I'm going to inline it completely, this one, just to show you a various way to go about this. So inside the plus button here, I will inline the SVG.

various way to go about this. So inside the plus button here, I will inline the SVG. Again, I'll remove the height and width and the field is going to be current color. And here I can add a class of size 2.5 text white. And then on the button itself, let's add a border, border white, padding one and rounded pull. Sorry, I'm going a bit fast, but we want to get moving. How does that look? Hey, not too bad.

How does that look? Hey, not too bad. I feel like the border here is two pixels. It's a bit more chunky. And obviously, it's not touching the edge. So let's go border two. And then I think on the flex container itself here, I will add some internal padding, like PX, I think four, and I think PX three was the go. Let's try that.

like PX, I think four, and I think PX three was the go. Let's try that. Yes, very nice. So let's create the exact same process for the other one. I will go even faster this time. Let me find the decrement, which is going to be even smaller. I will copy this and inside the minus button, I will paste that SVG, remove the width and height. So class W 2.5 text white, and we need to current color the child path.

height. So class W 2.5 text white, and we need to current color the child path. And then again, on the button, we're going to have the same classes of, let's accept this and trust that couple that knows what it's doing. Yes, because of the shape of the SVG, the border obviously doesn't follow. Maybe we can say this size to 2.5. All right, that works. Okay, so that is a starting point for the UI. And I like that it translates properly.

Okay, so that is a starting point for the UI. And I like that it translates properly. I just remembered that a bunch of lessons earlier, I told you there was an overly complicated way to do the vertical centering. And this is what I've done just here with one class. And that one class is minus translate one half. So look at this, I'm going to copy this class here and get rid of the entire fancy CSS variable approach with all of these.

fancy CSS variable approach with all of these. And I will just replace it with minus translate Y one half, which means that I don't really have to set a fixed height to the button, but instead let the padding take care of it. It might look narrower now, and yep, it does, but let's add the py3, like this py3. And we're back in business. My apologies for forgetting to get back to these points, but as you can see,

And we're back in business. My apologies for forgetting to get back to these points, but as you can see, the approach with translate Y half is much, much easier than the fancy calculation with CSS variables. But still that was a pretty cool trick. All right, let's implement our increment.