Updating item quantity: Build an E-Commerce Platform

00:01

to update the quantity of the individual items that we have in our cart. Now, we're going to start with our cart item component, because what we're going to need to do

00:12

inside of each of these individual cart item components is keep track of the quantity in this dropdown. So we want some sort of event to fire when this changes. Now, if we have a quantity property in here, like so,

00:27

let's just test this out with LiveWire. So I'm going to set this just to 10. In fact, let's bump this down to 5. Let's hook this up to our dropdown.

00:34

So this shows the actual value in the dropdown when we render this component. So if we come over to our cart item.blade.php file and go all the way down to our quantity here,

00:46

we want to hook this select up to this using a model in LiveWire. So just hook this up to quantity. And that should be enough, because we've

00:55

got the value in here of what we're iterating through. We give that a refresh. We set this to 5. Now, obviously, we don't want to hard code this quantity value.

01:04

We want this to be based on the actual quantity that we actually have. So to do this, we're going to go ahead and create out a mount hook within LiveWire.

01:15

And when this goes ahead and fires, we're going to set the quantity to a specific value. Now, if I set that to 7, that's going to have exactly the same effect.

01:23

And you can see we get 7 shown as our quantity. But of course, again, we don't want to hard code this. So we're going to access the variation that we've passed in. We're going to access the pivot table for that.

01:34

And we're going to access the quantity within the database. So now, when we give that a refresh, we get the actual quantity that we have stored in the database, which at the moment is 2.

01:43

So that's the first step. The second step is when we change this, we want to detect this within this component. Now, to do that, again, we can add another lifecycle hook,

01:54

updated, and then the name of the property, which is just quantity. So when this quantity is updated, we'll just die dump updated.

02:03

So let's go over and change this. And there we go. That's how we hook in to that quantity being updated. Now, what we can do with this is go ahead and grab our cart,

02:14

call a change quantity method, or whatever we're going to call it, passing in the variation and passing in the new quantity. The new quantity will come through in this method.

02:22

Or you can just access it with this quantity. It doesn't really matter. But we'll pass it into here. And let's figure out our cart method,

02:31

what we want this to be called. Now, unfortunately, we can't inject our auto wire, our cart instance, into this method. So we can't do something like cart interface,

02:40

cart within this method, because it will be expecting that additional parameters to be passed in. But we can now use app and cart interface

02:48

like we spoke about earlier when we set this up. So we're going to go ahead and say change quantity. I think that will be fine. And the information that we need about this

02:57

is the variation itself and the quantity. So we have both of them in here. So we can say this variation. And then we can pass the new quantity into here.

03:07

So we now just need to come over to our cart and figure out how to actually change the quantity of a pre-existing variation in our cart. So let's go over here.

03:17

And let's put this in a sensible place, probably here. And let's say change quantity. We're accepting in a variation here. So let's type in that to variation.

03:29

And we're accepting in a quantity as well. So what do we need to do? Let's first of all just die dump on variation and quantity just so we know that this is working.

03:38

So if we come over here and choose 5, we get the variation itself. And we should see down here the idea of 5, or the quantity of 5, sorry.

03:48

OK, so to actually update the quantity, it's very, very simple. We just need to access the cart instance. We need to go ahead and grab out our variations relationship.

04:00

And then we just use update existing, if I can spell this, existing pivot. And we want to pass in the variation ID. So this is just a Laravel way of,

04:13

within a particular relationship, updating a pivot really conveniently so you don't have to access that by default. And then quantity is going to be the quantity that we pass in.

04:24

So basically, inside of our cart, inside of all of the variations that we've added, find variation with this particular ID and set the pivot value quantity to that that we've passed in.

04:38

So if we just come over here and choose 5, and we come over to the database, there we go. It's been updated to 5. Now, we spoke about this earlier when

04:46

we looked at adding an item. Remember, we use min because we don't want to add more than the actual quantity itself. This is very easily editable from here.

04:56

So for example, I could come over here and I could edit 7 to be 70. Now, we know we don't have 70 in stock. But if I now choose 7 and we come over,

05:09

we've got 70 in our database table. So we want to protect against this. So we can do exactly the same thing. We just want to basically paste this in and choose

05:17

the minimum out of these two values, the quantity that we passed in and the variation stock count. We've got all of that information in here. So now, when I try and do this, if we just switch this back

05:27

to 1 and we come over and I choose 10, that's going to go ahead and work. If I were to switch, say, 5 over to 50 and I choose 5, first of all, this breaks the rendering

05:41

because there's no 50 value in here. But last of all, it will set it to 10 because that's the maximum stock count we have. So really important that we include this in here

05:50

when we're updating quantity as well because we don't want someone to add more variation quantity than we have. So there we go.

05:57

We can now go ahead and update our stock count. Now, the one thing that we do want to do when this happens is make sure we refresh this component, this entire component.

06:07

Now, you don't need to. You could technically just refresh the cart summary. But we're just going to go in and refresh this entire cart component.

06:14

So the cart summary does get updated when we get to that. So let's do this first of all now. So we're just going to say this emit and cart updated. And that shouldn't have any effect

06:28

on what we're doing just now because we don't see any cart summary at the moment. But when we do get to that point, that is something that we're going to want to do.

06:37

Now, lastly, we're just going to go ahead and update the updated quantity method to dispatch a browser event to show a notification to say that the quantity has been updated.

06:46

So we've already done this. Dispatch browser event notification. And the body here, we'll just keep this simple for now. We'll just say quantity updated.

06:58

And that's pretty much it. So now when we go ahead and change the quantity, we get a nice notification. And we're good to go.

07:05

What we didn't do earlier, if we just come over to our product here, is when we do add an item to the cart, we said added to cart. Let's change that up so it includes the title

07:17

of the product we're adding. Not necessary, but it's just something that would be a bit nicer. So if we come over to our product selector,

07:26

in here, let's change this like we added a note for before. And let's include here the name of the product. So in here, let's just say this SKU variant and product and title.

07:39

So remember, the variant is going to be a variation. The product is that relationship. And we'll just say added to cart. So that will say Nike Air Force 1 added to cart.

07:48

So let's try that again. And there we go, Nike Air Force 1 added to cart. Great. So now we can do that.

07:54

We can come over to our cart. We can adjust the quantity, which is great. The next thing we want to look at is removing an item from the cart.

Sign up to access "Build an E-Commerce Platform" right now.

Episodes

Transcript

Episode summary

Episode discussion