Wiring Increment Action0:00
So the next step is to wire up the plus and minus actions, actually we already have the backend logic for the action of the increment, remember it's the add one method . And so we absolutely in our increment button here, want to add one as well. So all I have to do is paste the action and method on that form element. Let's make sure a button has a type of submit. And I believe that the increment functionality should now work. So let's try to add a creme brulee, aha, it doesn't work. I'm sure you know why it's not working.
Fixing CSRF Token0:35
So let's try to add a creme brulee, aha, it doesn't work. I'm sure you know why it's not working. Yep, CSRF token, we forgot to add this. So inside our form, let's go add CSRF indeed. And we will give this another shot, creme brulee quantity one. Let's add one, and we have two, three, four, five, it's working properly. All right, the next logical thing to do is to implement the decrement, the other part of this UI, we need to take care of one thing, it's going to decrement by one. But if there's only one item left in the cart, it should actually delete the
Implementing Decrement Logic1:03
of this UI, we need to take care of one thing, it's going to decrement by one. But if there's only one item left in the cart, it should actually delete the cart item from the cart. All right, let's start in our cart controller. And I'm going to duplicate the add one, and we're going to rename this one, remove one. This seems like a sensible name. And indeed, we're going to call a model method that doesn't exist yet that we will call decrement
And indeed, we're going to call a model method that doesn't exist yet that we will call decrement item. Now I have some comments about this and share exists. When it comes to removing an item from the cart, I don't think that we should use and share exists because this is going to create a cart. So if there wasn't a cart, we don't want to create a cart to try remove an item that wasn't in there, that makes no sense.
that wasn't in there, that makes no sense. So here instead of using and share exists, I think we can use if exists. If there's a cart and the item is in there, take it off, otherwise, do nothing. So I think we can rewrite this as cart, if exists, and then question mark, and then if yes, decrements the product, like so. So if the cart exists, we call the decrement function, otherwise we do nothing and just go back because there's nothing to remove.
and just go back because there's nothing to remove. All right. So now let's go in the cart model to implement this decrement item. So cart model, and I'm going to find the increment item, there it is. And below that, we are going to have public function decrement item. We definitely need a product and here to grab our relevant cart item, I can borrow something that we've used just before, which is that bit, this item's first way product product
that we've used just before, which is that bit, this item's first way product product ID. So let's reach for the item, which is that. And then if we don't find this item for any specific reason, we can just abort and have an early return, short circuits, the whole function, but if we have an item and the item quantity is greater than one, remember, we only want to decrease or decrement by one
quantity is greater than one, remember, we only want to decrease or decrement by one if the quantity is more than one, if it was one and it goes to zero, we want to delete the item completely. So I can accept that suggestion by copilot. And let's recap, we call the function with the product, we get the item from this product. If we don't find it, we abandon ship. If we find it and the quantity is bigger than one, we decrement by one, just
If we don't find it, we abandon ship. If we find it and the quantity is bigger than one, we decrement by one, just like we did increment here by one. And if it was not greater than one, it means that we need to delete the item from the card. All right. So we've got a model method. We've got the controller action.
Adding Route and Form3:37
So we've got a model method. We've got the controller action. We just need now to create the route in web that PHP that's going to hit that controller. And then we can point our form to decrement to point to that route. In web that PHP, we have our post route where we hit the card product for add one. And here we could use the same route segment. It's a bit tricky because it's not a delete method. So we could have a patch method on the same segment.
It's a bit tricky because it's not a delete method. So we could have a patch method on the same segment. And we will call the remove one controller method that already exists. And we can rename the route card, remove one. So in our front end, we can call this card that remove one and pass the patch method in the form. Let's try that. We will go in our product template and I will copy the form all the way to the CSRF token
We will go in our product template and I will copy the form all the way to the CSRF token and scroll up to the other form, which is this one, the decrement. And I will paste that. But instead we want to go cut, remove one. And as you can see, copilot is smart enough to figure out we need to keep the method post here. But tell Laravel, we want to use a patch request instead. And so I believe that it should work.
Testing Decrement and Deletion4:49
But tell Laravel, we want to use a patch request instead. And so I believe that it should work. Then we submit the form by clicking this button. We are going to hit the cart, remove one web route, which is this one. It's going to hit the remove one method in the controller. And it's going to call the decrement item on our model. Whew, that was a lot, but I'm pretty confident it's actually going to work. Let's go give it a try. We are going to remove a creme brulee because five is quite a lot. I'm going to click on decrement and we got four, three, two, one.
We are going to remove a creme brulee because five is quite a lot. I'm going to click on decrement and we got four, three, two, one. And moment of truth, is it going to delete the creme brulee, delete? And yep, it's been removed from the cart. Everything seems to be working beautifully. We are making fantastic progress. We can add a product to the cart. We can increment the quantity of that product in the cart. We can decrement or reduce the quantity of that product. And if we remove enough of this product, eventually it will disappear from the
We can decrement or reduce the quantity of that product. And if we remove enough of this product, eventually it will disappear from the cart, get deleted from the cart and we once again have the add to cart button showing up. Really cool.
