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

53. Syncing if quantities have changed

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

Once we detect that there is quantity no longer available for any product, we're going to go ahead and trigger a sync on our cart which is going to map up the maximum

00:08

available quantity for all of the products if it's out of stock or if the stock has been reduced. So what we're going to do here is go over to our cart model and we're going to create our new method to do this. We're going to take this really slowly because we're going to be doing a lot of mapping through collections to build up an array that we can pass through to

00:28

the sync method on the variations relationship. So let's go ahead and just call this sync available quantities. Once again we're going to make this fairly verbose just so we can kind of see what we're doing and you might come up with some magic to reduce this. So first of all let's look at the syntax that we'll need to actually update this in the database. Now at the moment

00:52

if we come over we've got we come over to our cart variation we've got one product in here with 10. I'm actually going to get rid of all of these others just so we can focus on this one here and this being updated and let's also go ahead and add another product to our cart. So let's go and find that other product and let's go ahead and add. So yeah there's no stock on that so let's

01:17

add some stock first of all. So to keep things sort of simple we'll add 10 stock on rainbow 12. If we look at the parent id there that's that one. There we go. So let's go ahead and add this in. There we go and then let's reduce the stock for that one as well. So we should see both of these change over. So let's choose this one and let's reduce that by two. So we should end up with

01:46

five and eight for these respectively over in our cart. So this one in fact let's just update the quantity over here in our cart and that's not going to work because we are dying and dumping. We'll get there. So we can actually do this manually in the database. Let's update this one to 10 as well. So basically by the end of syncing this because this one's been reduced by

02:10

two in stock and this one's been reduced by five this one should show five and this one should show eight. Hopefully that makes sense. Okay so what we want to do is eventually get to the point where we can grab our cart instance, grab our variations relationship out here and we can call sync. Now to sync something you need to pass an id in and then the pivot information. So let's say

02:34

we had a product variation one and we wanted to update the quantity to say 10. What we're going to have to do is pass another array in here. So we're going to have to array it like this. One is going to be the key that's the variation id and then in here is going to be the pivot information. So let's just say for the variation that we have in there we're reducing that to

02:56

eight for the rainbow size 12 and for the other one we're reducing this to five. This is the kind of array that we want to add a build up. So this is what we need to bear in mind. I'm going to cut this out. I'm going to paste this down here just comment it out so we can reference the structure of this when we build this up here. So let's call this array synced quantities that we can use to

03:20

pass directly into here and the way that we want to do this is again iterate through the variations much like we did here or map through the variations to build this array up based on the available quantity that we have. So what we're going to do is just say this instance variations the collection this time. We're going to map through it with the keys because remember we

03:44

need them keys intact and let's go ahead and create out our closure in here. Of course we're going to get our variation through in here. So now what we need to do is figure out the quantity that we want to return in this array here. We know the variation id so we can return that at the bottom of here but we need to figure out the quantity that needs to be synced too. So let's create a

04:07

variable for this just to make this a little bit clearer. We're going to go ahead and say variation pivot quantity and we're going to check if that's greater than the variation stocks count sum which is what we did in this check here. So effectively we're saying has this stock been reduced and has it been reduced based on this quantity here. Now if that's the case so we'll

04:36

use a ternary here what we want to do is go down to the maximum stock count that we have for that product. Really important. Otherwise what we want to do is go and just go for the quantity that the user has chosen. So let's just return an array from here and just test this out. So let's go ahead and say variation id so we're starting to build up this array here. This is the variation id so

05:05

remember we're mapping with keys and then in here we want an array with the pivot information which is going to be the quantity that we have just calculated based on this here. So there are of course shorter ways to do this but we want to be a little bit more verbose in this just so we can kind of read the code a bit better. Okay so what we're going to do here is

05:24

die dump on the sync quantities so we can see it before we test this out. So over in cart index controller let's go over to here and say cart sync available quantities and let's see what we get. Let's give that a refresh. We get a collection here with three and eight which of course are the variation ids. This one's been reduced to five and this one has been reduced to eight which is great.

05:49

Now we also need to bear in mind that if a particular product has been reduced by so much quantity that it has to come out of our cart that it has to come out of our cart because the quantity has been reduced to zero. We want to kind of get rid of that from this array. So let's just test this out in the database and we'll go over to our stocks. Let's reduce this one by 10. So let's say

06:15

someone buys 10. We've got 10 in our cart. What does that leave us with? Well of course it leaves us with nothing in our cart and zero is not a valid quantity for an item in our cart. So we need to kind of reject this from this list and we can sure enough do that with the reject method on a Laravel collection. So this will just kind of filter this out or reject this from here. So let's go ahead

06:40

and reject this based on this condition and let's go ahead and say synced quantity and we're going to access that synced quantity and we're going to check if the quantity is equal to zero. So this is the condition for rejecting that item from this collection. Give it a refresh. We only end up with this one in here. Now we're not going to do this for now. We're going to test this out by reducing

07:05

this by five first of all so we can see that over in our cart variation this does reduce and then we'll check that this is completely rejected from our cart. So now that we've got our synced quantities with dying and dumping on them we need these to be cast to an array. So let's cast these to an array because of course we need this kind of an array to pass through to this sync method

07:28

and let's go ahead and now pass this in. So synced quantities. Now we will need to do something down here. We'll look at that in just a second but let's just make sure that giving this a refresh updates this for us. So let's give that a refresh and there we go five and eight. So both of them have been updated. Now what you'll notice is on this page now that we've refreshed that the

07:48

exception was thrown we sync to the product. What we really need to do is clear the cache instance or the instance cache from our class so this can be re-plucked out and we can see the correct quantities. So what we're going to do is do something like this clear instance cache which does slow things down a little bit but not by that much. So let's go and implement this method maybe

08:15

just down here let's make this protected and to clear this cache down here let's find it this one we just need to set the instance to null so it can be re-read. So let's say clear instance cache and let's set this instance to null. Now let's move that down because it doesn't really make sense there let's just put this just above the instance method. Okay so let's try this

08:49

again let's manually set the quantity in our cart to 10 and 10 save this out come over here give it a refresh and you can see there we go. So in between that syncing our database we've cleared the instance cache for looking up our cart and the quantities are now showing properly on here otherwise the user would have to refresh the page to see these quantities which isn't great.

09:12

Okay so let's finish off by looking at what happens when we have a quantity of zero in here. Now let's go over and again switch these to 10 and 10 just to start with something really simple and if we come over to our stocks here and reduce this one by 10 like we demonstrated before that should reject that from that array. So let's go over to our sync method

09:37

and let's once again just die dump on synced quantities. So we end up with an array with just the quantity for this variation in here because that's not being reduced to zero we didn't reject it from this array using this reject method. Now what's going to happen is when we pass this through and the variation is missing because we're using the sync method

10:00

and we're not using sync without detaching it's going to go ahead and remove this from the cart effectively meaning that if it's a zero quantity it gets rid of it. So what we've done is reduce the quantity down to zero rejected it and then we're just syncing it and Laravel will take care of the rest or Eloquent will take care of the rest. So let's go over give

10:22

this a refresh and there we go so we've got our Nike Air Force 2 in there but if we head over of course because we reduced that variation and we rejected that it's only gone ahead and included this one which has a positive quantity. Now you could make this a little bit more robust by saying less than or equal to one or zero sorry but let's go ahead and just compare this to zero

10:45

because it's not that likely that this is going to go to minus one or minus two and that's pretty much it checking and syncing the products in our cart. Now we want to include this check over here on other pages as well so let's go ahead and take this and add it to our checkout index controller as well there's probably a bit of a nicer way to do this we could abstract this

11:10

into a method on its own in our cart but let's just leave this like it is for now as long as it's in there that's the main thing and then when we go through and actually process a payment we'll include this within our Livewire component. Okay let's just double check this by clicking on checkout and yeah undefined variable cart let's go and say cart interface and cart and there we go so

11:36

that's going to remove that from there as well we can even test it here we head over to variations or cart variations and bump that to 10 and come over there we go we practically just bumped it down to 8 we didn't see anything happen here but that is now working on our checkout index as well really important because of course we see this before we check out.

Episode summary

In this episode, we dive into how to keep your shopping cart's product quantities in sync with the actual product stock available. The goal is to make sure that if another user or purchase causes quantities to change (for example, by buying the last item), our cart reflects those changes smoothly for our users.

We're building a method in our cart model called syncAvailableQuantities. The idea is to loop through the items in the cart, compare their quantities to the current stock in the database, and update (or reduce) them if needed. If a product's stock drops to zero (or goes below the requested quantity), we'll adjust or even remove it from the cart. We pay close attention to the array structure needed for Laravel's sync() method on relationships, mapping variation IDs to the correct quantities, and making sure this mapping is clean and verbose so it's easy to follow.

There's also a practical walkthrough of testing this in the database--updating stocks, checking how that's reflected in the cart after syncing, and making sure our cart's data stays accurate. When a product's quantity in the cart goes to zero, we use Laravel collection methods to reject it from our cart array. Then, by using the sync() method, Eloquent handles removing or updating the cart items as needed.

To make the UX seamless, we also clear the cart's instance cache so users instantly see up-to-date quantities without any weird refresh issues. Finally, we ensure this logic is plugged into both the cart and checkout controllers, so cart changes show up no matter where the user is.

So basically, if product stock changes out from under your user, the cart gets automatically updated to reflect the new max they can buy—right before they check out. Handy, right?

Episode discussion

No comments, yet. Be the first!