This episode is for members only
Sign up to access "Build an E-Commerce Platform" right now.
Get started
Already a member? Sign in to continue
Playing
27. Updating item quantity
Episodes
01. Introduction and demo
9m 42s
0%
02. Installing Laravel, Breeze and Livewire
4m 47s
0%
03. Creating categories
9m 4s
0%
04. Recursively displaying categories
8m 21s
0%
05. Product model and migration
2m 50s
0%
06. Showing a product
7m 50s
0%
07. Product variation setup
10m 26s
0%
08. Creating the product selector
10m 34s
0%
09. Loading child variation dropdowns
4m 28s
0%
10. Faking adding the final variation
9m 33s
0%
11. Setting up product stock
4m 34s
0%
12. Calculating variation stock levels
9m 1s
0%
13. Adding product images with MediaLibrary
8m 50s
0%
14. Creating the product gallery
7m 28s
0%
15. Providing a fallback image
2m 56s
0%
16. Adding media to product variations
3m 37s
0%
17. Creating the cart model
3m 37s
0%
18. Registering the cart service
6m 34s
0%
19. Creating a cart session
11m 4s
0%
20. Showing the cart in the navigation
9m 19s
0%
21. Caching the cart instance
3m 2s
0%
22. Adding items to the cart
14m 1s
0%
23. Creating the notification component
8m 5s
0%
24. Showing the user's cart
6m 50s
0%
25. Outputting cart items
4m 50s
0%
26. Showing variation specifics
8m 8s
0%
27. Updating item quantity
8m 2s
0%
28. Removing an item from the cart
6m 1s
0%
29. Calculating the cart summary
8m 7s
0%
30. Showing the category products page
5m 1s
0%
31. Indexing products in Meilisearch
8m 32s
0%
32. Hooking up products to categories
4m 15s
0%
33. Building the product browser
13m 32s
0%
34. Showing child categories
1m 51s
0%
35. Indexing product variations for filtering
8m
0%
36. Outputting variations for filtering
12m 52s
0%
37. Hooking up product filters with Livewire
7m 48s
0%
38. Filtering products
12m 24s
0%
39. Filtering by price
9m 50s
0%
40. Adding global navigation search
7m 50s
0%
41. Handling products that are not live
3m 22s
0%
42. Price range category fix
1m 18s
0%
43. Scaffolding the checkout page
8m 6s
0%
44. Listing shipping options
9m 3s
0%
45. Calculating the cart totals
2m 52s
0%
46. Validating the account form
9m 10s
0%
47. Validating the shipping form
5m 47s
0%
48. Saving the shipping address
8m 4s
0%
49. Selecting a saved shipping address
6m 39s
0%
50. Fix shipping address error for non authenticated users
1m 7s
0%
51. Redirecting if the cart is empty
2m 42s
0%
52. Checking for quantity changes
7m 11s
0%
53. Syncing if quantities have changed
11m 59s
0%
54. Flashing a message when quantities have changed
5m 48s
0%
55. Setting up for orders
5m 17s
0%
56. Creating an order
13m 24s
0%
57. Attaching variations to order
6m 13s
0%
58. Reducing stock after ordering
2m 56s
0%
59. Meilisearch filter query fix
1m 33s
0%
60. Showing the order confirmation page
7m 39s
0%
61. Attaching orders for registering guest users
5m 17s
0%
62. Scaffolding the orders page
5m 30s
0%
63. Filling in order variation details
5m 24s
0%
64. Returning the order status
4m 39s
0%
65. Detecting order status changes
10m 49s
0%
66. Sending the order status change email
5m 12s
0%
67. Sending an order confirmation email
2m 47s
0%
68. Handling deleted cart records
4m 44s
0%
69. Transferring the guest cart
2m 44s
0%
70. Creating a presenter for the order status
4m 31s
0%
71. Setting up Stripe
3m 43s
0%
72. Creating and updating a PaymentIntent
16m 21s
0%
73. The Stripe card form
3m 35s
0%
74. Validating before payment
5m 34s
0%
75. Submitting a payment
6m 40s
0%
76. Checking for a successful payment
5m 47s
0%
77. Handling Stripe client errors
3m 11s
0%
78. Entangling Stripe customer data
2m 18s
0%
Transcript
00:00
We're now going to figure out how
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.
78 episodes•8 hrs 42 mins•3 years ago
Overview
Build a robust e-commerce platform with a Laravel and Livewire. Features products with unlimited and flexible variations, a product browser with filters and price range slider, global product search, guest checkout, shipping and payment implementation, order status tracking and more.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!