So, let's continue and add the feature that we can delete a product from our cart. Now, before we continue, I discovered that in some cases a bug would occur, and this had to do with a mistake that I made when I defined the s1-through relationship. So, let's fix this first. Switch to our editor, let's open up our CartItem model, and here I made a little mistake. The first key has to be id, the second key has to be id, the local key has to be product_variant_id, and the final key has to be product_id. So, this should work, and now if we refresh, it still works, and you can see that it was actually associating the wrong product to the item id, and this is now resolved.

So, this should work, and now if we refresh, it still works, and you can see that it was actually associating the wrong product to the item id, and this is now resolved. Okay, let's move on. Let's make sure that we have a little trash icon here that we can click to delete something from our cart. Let's open our cart.blade.php file, let's add a new column that has a button, whenever we click this button, we want to call the delete method on our component, and let's pass the item id. Now, let's head over to heroicons to get a nice trash icon, let's add this here, let's make it a little bit smaller, let's set the width and height to 4, and let's switch back.

Now, let's head over to hero icons to get a nice trash icon, let's add this here, let's make it a little bit smaller, let's set the width and height to 4, and let's switch back. Okay, there we go. Now, let's implement this method, so let's go to our CartLibraryComponent, let's add a new public method, delete, this method accepts the itemId, now we'll get the cart again using our factory, we'll get our items, and we'll say where, and we'll say where our itemId, and call the delete method. So now, whenever someone clicks the delete button, it will delete the item from our cart items, so if we switch back and click the icon, you can see that our product was deleted, but you can also see that our number here wasn't updated.

items, so if we switch back and click the icon, you can see that our product was deleted, but you can also see that our number here wasn't updated. So if we go back to our NavigationCart component, you recall that we added a listener, whenever a product got added to our cart, that will refresh the component. Now we want to do the same whenever a product is removed from our cart, so let's duplicate this line, and let's say change this to productRemovedFromCart. Next, head back to our Cart component again, and whenever we delete something, we'll say this, emit, and we'll emit the productRemovedFromCart again. So let's give this a try, let's add another product here to test with, so now we have three, and now let's delete something, and there you go, our number just got updated.

So let's give this a try, let's add another Product here to test with, so now we have three, and now let's delete something, and there you go, our number just got updated to two. Perfect. Okay, next, something we want to look into is, as you can see, we currently have a cap right here, size XL, color green, and if we add a couple, you can see that we actually get the same item multiple times. But whenever a User adds an item two times, we want the quantity to be updated instead of having duplicate items. So let's switch back to our editor, and let's visit our ProductComponent, so here we have

of having duplicate items. So let's switch back to our editor, and let's visit our ProductComponent, so here we have our action, and if we head over to our action, then you can see that we're always creating a new item based on our variantID. So, let's change it, so instead of calling the create method, I'm going to say, firstOrCreate, now we want Eloquent to look for our variantID and check whether there is already an item in our cart that matches this variantID, so this is going to be the first array, and the second array contains any data that we want to set as well, so what we can do is, we're going to say, simply set our quantity to zero, and next, we're simply going to increment our quantity.

do is, we're going to say, simply set our quantity to zero, and next, we're simply going to increment our quantity. So let's check if this works, let's add another gap in this case, let's add a few, switch to our cart, and now you can see that our quantity has increased. Of course, we still have this remaining item from our test, so let's remove this. Now we can see that whenever we add a new product, let's do this one, let's add a few, you can see that now the quantity is updated instead of adding a new individual cart item.