Adding Plus/Minus Buttons0:00
Next, let's take a look at adding an increment and decrement button, so the User can increase or decrease the quantity of their items. So I'll probably add a minus and a plus sign before and after the quantity. So if we go back to HeroItems, we'll grab the plus small sign, and let's head over to our card, and let's add two buttons. First, let's make sure that this is a five-spot, and we'll have our first button and our second button. We're going to add the plus sign to the right, and let's grab a minus sign as well. And we'll put that on the left-hand side. Let's take a quick look at how this looks.
And we'll put that on the left-hand side. Let's take a quick look at how this looks. There we go. I think it looks a bit nicer if you make it a bit smaller. So maybe do four, and it looks right. Now let's add a wire:click directive. Let's wrap this in a div, and let's make sure that we align these, so let's do itemCenter. Now let's wire these up. Let's make sure that we pass the itemId. There we go.
Wiring Increment/Decrement Methods1:34
Let's make sure that we pass the itemId. There we go. Now let's switch back to our card, and let's start off by implementing the increment method. We'll find the itemId on our card, and in case it exists, we'll call increment on the quantity column. Okay, let's give this a try. There we go. Now let's copy and paste this method, and let's rename this. Perfect, and now the minus sign should work as well. There we go.
Preventing Negative Quantities2:10
Perfect, and now the minus sign should work as well. There we go. Now you can see we can actually go into a negative range, which is not allowed because we're using an unsigned column, and of course we don't want to allow any negative items. So let's fix it by making sure that we always have a minimum of 1. First, let's assign the item to our $item, and let's say if the $item->quantity is higher than 1, in that case we can decrement. There we go. So now you can see it doesn't matter if you keep clicking the minus sign,
Disabling Decrement at One2:48
There we go. So now you can see it doesn't matter if you keep clicking the minus sign, it won't work because we cannot go below zero. Now if we take a look at our Network quest tab, you can see that we are still firing off quests every time we hit the minus sign, even though we know we can't actually go any lower. So let's fix this. Let's move over to our PowerPlate file. So let's make sure that it is disabled whenever the itemQuantity is one. Now if we take a look again,
So let's make sure that it is disabled whenever the itemQuantity is 1. Now if we take a look again, you can see that we can only press the minus sign when there is a minimum quantity.
