Build an E-Commerce Platform

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

27. Updating item quantity

Episodes

0%

Your progress

Total: 8h 42m
Played: 0m
Remaining: 8h 42m

Join or sign in to track your progress

01. Introduction and demo

02. Installing Laravel, Breeze and Livewire

03. Creating categories

04. Recursively displaying categories

05. Product model and migration

06. Showing a product

07. Product variation setup

08. Creating the product selector

09. Loading child variation dropdowns

10. Faking adding the final variation

11. Setting up product stock

12. Calculating variation stock levels

13. Adding product images with MediaLibrary

14. Creating the product gallery

15. Providing a fallback image

16. Adding media to product variations

17. Creating the cart model

18. Registering the cart service

19. Creating a cart session

20. Showing the cart in the navigation

21. Caching the cart instance

22. Adding items to the cart

23. Creating the notification component

24. Showing the user's cart

25. Outputting cart items

26. Showing variation specifics

27. Updating item quantity

28. Removing an item from the cart

29. Calculating the cart summary

30. Showing the category products page

31. Indexing products in Meilisearch

32. Hooking up products to categories

33. Building the product browser

34. Showing child categories

35. Indexing product variations for filtering

36. Outputting variations for filtering

37. Hooking up product filters with Livewire

38. Filtering products

39. Filtering by price

40. Adding global navigation search

41. Handling products that are not live

42. Price range category fix

43. Scaffolding the checkout page

44. Listing shipping options

45. Calculating the cart totals

46. Validating the account form

47. Validating the shipping form

48. Saving the shipping address

49. Selecting a saved shipping address

50. Fix shipping address error for non authenticated users

51. Redirecting if the cart is empty

52. Checking for quantity changes

53. Syncing if quantities have changed

54. Flashing a message when quantities have changed

55. Setting up for orders

56. Creating an order

57. Attaching variations to order

58. Reducing stock after ordering

59. Meilisearch filter query fix

60. Showing the order confirmation page

61. Attaching orders for registering guest users

62. Scaffolding the orders page

63. Filling in order variation details

64. Returning the order status

65. Detecting order status changes

66. Sending the order status change email

67. Sending an order confirmation email

68. Handling deleted cart records

69. Transferring the guest cart

70. Creating a presenter for the order status

71. Setting up Stripe

72. Creating and updating a PaymentIntent

73. The Stripe card form

74. Validating before payment

75. Submitting a payment

76. Checking for a successful payment

77. Handling Stripe client errors

78. Entangling Stripe customer data

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•2 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!

Comments

No comments, yet. Be the first to leave a comment.