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

12. Calculating variation stock levels

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 already had a look at summing up the stock count for our variations, but the goal now is, for example, for the color black, find out the actual total amount of stock based on all of these children. So for example, if size 8 has 1 in stock and size 9 has 1 in stock,

00:19

black are a stock level of 2. Now we're not necessarily going to show that to the user, but this is important because if 8 and 9 are both out of stock, we might not want black to be selectable.

00:32

Now you can chop and change this if you did want black to be selectable and just want to show 8 and 9 out of stock, but that kind of leaves a user hanging around saying, well, why did I click on black in the first place?

00:44

So let's go and calculate out the actual stock count with a method inside of our variation model, but make this a little bit more accurate to take children into account. So for this, what we're going to do is access the descendants and self.

01:03

So that's going to go ahead and get the model's descendants and itself because we could have stock attached to the end SKU variant. So we don't just want to grab descendants. We want to grab the descendants and self,

01:17

and then we want to go ahead and sum up the stock from here. The only problem is we can't say stocks dot and then value. So what we're going to have to do is pass in a closure into here, taking each of the variations and then from that variations,

01:33

we're going to say variation stocks and sum amount. So that is just going to calculate the amount of stock for the variation that we've passed in and sum it up for each of the descendants that we have inside of here.

01:50

Let's try this out by using this stock count over in the product drop down and see the difference that this makes. So let's go ahead and say variation and stock count. And let's see, I'm actually going to put this in brackets

02:03

just to make it a little bit clearer. And there we go. So black has eight in total. We know that because eight has eight in total.

02:14

If we were to add some to nine. So let's go and actually just get rid of this minus two. And let's add 10 to the size nine. You can see here that we now get 20 in stock because we've got 10 of each.

02:29

Now, if none of them were in stock and we don't need to get rid of them because we know that white is completely out of stock, we can disable white here because none of these have stock. So we're not going to be able to choose them.

02:41

So we'll make a slight modification to this option here to disable it if the stock count is zero. So what we're going to do over in variation is implement a few helper methods just to make our life a little bit easier.

02:55

And we're going to say in stock. Now, how do we work out if something is in stock? Well, we go ahead and grab the stock count, which is the method that we've just created here.

03:06

And we check if that's greater than zero, e.g. one or higher. And from this, what we can do is create another method called out of stock. And we can basically just say, well, if this is not in stock, and that's it. So we now have an in stock method, an out of stock method,

03:27

and an overall stock count method if we need to grab that. So let's take this out of stock method, go over to our product drop down, and let's show a message here if this is out of stock. So let's do this as a ternary just inside of here.

03:41

So we're going to say variation out of stock. And if it is out of stock, we'll show brackets with out of stock. Otherwise, we'll just show an empty string. So let's go over.

03:55

And there we go. We know that white is out of stock. We know that eight and nine is out of stock. But with black, we know that eight and nine are both in stock.

04:03

If nine wasn't in stock, it would show that message. So it works for every single option here. Now, what we can also do is disable this. So with an HTML, we can just set a disabled attribute on an option.

04:14

That's going to disable them. Of course, all of them because we don't have any conditioning here. But we can add this in based on whether it's out of stock. So let's say variation out of stock.

04:25

Well, in that case, let's just say disabled. Otherwise, an empty string. So now black is in stock. We can choose both.

04:34

White, we can't click on it. So we can't choose it. So let's go and just remove the stock for 10. Or we could have done minus 10.

04:44

And there we go. So eight is in stock. We can click on that. We can check out with it.

04:49

Nine, we cannot. So while we're here, let's add some sort of niceties. And maybe we can create a low in stock option. So let's go ahead and create a low stock option.

05:04

And let's check what we need to do. Low stock shouldn't apply if we're out of stock. So we're going to say, first of all, if this is not out of stock. Because we don't want to include that in the check.

05:15

If it's out of stock, it doesn't make sense. Because we're already showing if something is out of stock. And then we can say if the stock count is less than or equal to five. And of course, you can change this.

05:26

You could put it in config, whatever you wanted to do. But now we've got a method which will check if we have got five or less show low in stock. So from the product dropdown, we can pretty much just grab this. And we'll pop that beforehand and say low stock.

05:44

And say low stock. So now if we come over, I don't think any of these are going to be low in stock. But let's go and change eight to four. And what we should now see is black is low stock.

05:57

Because overall, we have less than four. And there we go. So if, for example, let's see how flexible this is. We had two for size eight and two for size nine.

06:14

That, of course, adds up to four. So this is still low in stock. If, for example, though we had 10 of size nine, that's now not low in stock overall. But size eight is just low in stock.

06:29

So again, you can change this around if you want it to display something different. If you think it would make more sense to customers to show this just down here. I'll leave that up to you. So we've implemented all of this.

06:43

But let's take a look at our query count. So if we just pull this up here, you can see that we've got quite a few additional queries that are being repeated here. Especially when we go ahead and start to filter down and choose some more.

06:59

These don't look too bad, but we've still got... Yeah, I think that should be okay. But I think it's the overall hit on this where we've got way too many queries inside of here, especially when our variation list grows.

07:11

So we need to do a little bit of eager loading to get rid of this. And to do that, we're going to come over to the product show controller. So we're already loading in the children of variations. But remember that variations have stocks.

07:24

So we're going to go ahead and say variations.stocks. But then children also have stocks as well. So if we eager load stocks as part of children, children will still be eager loaded, but stocks will also be eager loaded as part of that as well.

07:40

Now, if we just come over and give that a refresh, you can see that we're actually ended up with more queries. And if we come over, the reason for that is over in our variation, we are using descendants and self.

07:52

So we're going to need to eager load on that as well. So let's say variations, descendants and self and self.stocks. Let's come over, give that a refresh. We're down to seven.

08:02

And it looks like we have a couple of additional queries in here. I think we can actually get rid of these stocks for children. Yeah, there we go. So could probably get rid of it for that as well.

08:14

Let's just see. There we go. We're down to five queries. Perfect.

08:19

So let's just check this when we select here. And we've got a little bit few. Well, we've got a few too many queries in here, but I think these are all necessary. And we've got two duplicates.

08:33

I think that's fine for now. The overall page load on this is five. When we run five queries for grabbing all of them stocks, I think that's absolutely fine. And we can always come back and reduce the query count later.

08:47

But really important to review that now that we're grabbing these stocks, which is a relationship from them descendants that we come in and we egoload them. So there we go. Our stock management for display purposes is sorted.

Episode summary

In this episode, we focus on improving how we calculate and display stock levels for product variations—think things like colors and sizes. Up to now, we've just been adding up stock counts for individual variations, but what we really want is a way to know (for example) the total stock for a color, summed up across all sizes, so we can give users a more accurate selection in the UI.

We start by creating a method that calculates the total stock for a variation, including all its child variations. That way, 'Black' might show 2 in stock if its 'Size 8' and 'Size 9' children each have 1 available. It’s especially useful for disabling options that are totally out of stock.

After getting the stock counts sorted, we implement helper methods to easily check if a variation is in stock, out of stock, or has low stock (for example, 5 or fewer left). We then use these helpers in our product dropdown to show indicators like 'Out of stock' or 'Low in stock,' and also to disable selections that can't be selected.

Once our logic is working, we check for performance issues. Calculating stock for a bunch of variations can add a lot of database queries, so we refactor the data loading to use eager loading—this way, all the stock info is loaded in fewer, more efficient queries. After some tweaking, we've reduced our query count significantly, making the UI snappy and efficient given more products and variations.

By the end of this episode, our stock management feels a lot smoother, both for customers and under the hood!

Episode discussion

No comments, yet. Be the first!