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

26. Showing variation specifics

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

So we've left it until this episode to speak about the variation ancestors

00:04

just because as we start to introduce this, our query count for this page is going to creep up. And we're actually going to end up with an n plus 1 problem. And we already actually have that

00:14

because we are already accessing a relationship on this variation. So let's fill this in. We'll check out our PHP debug bar

00:22

just to see how many queries we're running. And we'll go ahead and add in some eager loading to our cart to make sure that all of the information we need for all of our variations is included by default.

00:33

Okay, so for our variation ancestors, what we want to do is iterate over each of the ancestors of our variation. Now for that, if we just head over to our variation model,

00:46

we don't have a relationship for this, but we do have our has recursive relationships trait from the adjacency list package. And from this, we can grab all of the ancestors.

00:56

So what came before this for each of the variations? So let's say for each variation, ancestors and self, because remember what we want to do is show the variation we've added by its title,

01:09

which we know is A. But then before that, we want to show that it's white. And then you might have say 10 different variations leading up to that.

01:17

So we want to show each of these out. So we're just going to call that ancestor. And let's just output the ancestor. Okay, that's really annoying.

01:28

Title, just to see what happens here. Okay, so yeah, we've done an end for, so let's say end for each. And there we go.

01:38

So we've got eight and white, great. So this is working really, really nicely. Now for this, we want to style this up a little bit. So we're going to say ancestor title,

01:49

and then we're going to add an if statement in here. Now within a for each loop, within blade, we have access to this special loop object, which will tell us if something is the first item,

01:59

the last item, and there's loads of other different properties on this. So if this is not the last item, then we want to show some sort of slash in here

02:07

to separate each of the variations out. Let's go ahead and end that if statement just there. Let's just check this out first of all. There we go, so we've got a slash in between here.

02:16

This could be done with CSS, it doesn't really matter. But essentially, we don't want to show a slash at the end of the last variation. If we didn't include that,

02:24

we would end up with the following. So we'd have to sort of get rid of that somehow. But this is a nice, convenient way to display things only when it's not the last item.

02:34

So in this case, let's just go ahead and style this up. So let's wrap this with a span, and we'll just say text gray 400, and we'll set a margin on the X axis to one,

02:46

just to space that out a little bit. So now we've got all of the information about this particular variation. Now, you might want to go ahead

02:54

and change this up a little bit. So you might want to say reverse, for example, and that will reverse the order of these. It's entirely up to you.

03:01

I'm just going to leave this as it is at the moment, but feel free to change that around. It's just a Laravel collection this, so you can just do anything you want with it

03:10

to display this out. Okay, so we've got our variations being shown, we've got the product title being shown, we've got all of the information that we need.

03:17

Let's check out our query count. So we've got 12 queries on this page, which to me seems a little bit too high. So if we just come down,

03:24

we've got a couple of duplications or a few duplications in here. Most of all, this common table expression, which comes from the ancestors that we're accessing.

03:33

So we need to eager load in all of this data from our cart in some place. That is going to be over on our overall cart object. So let's just think about what we're doing here

03:44

in the contents method, which we're using to output all of these variations. We're grabbing the instance, which is cached, so that's fine.

03:52

We're not creating in too many queries here, but we're accessing the variations on that instance. So down in our instance here, we are just looking this up by the UUID

04:01

and grabbing the first cart. So it's at this point that we want to start to eager load stuff in. So this is going to get quite long.

04:08

So what I'm going to do is I'm actually going to use the query method on our cart model, just so I can neatly pull that down

04:17

and neatly pull this down. Now what we can do is use with to eager load in the data for the variations that we need to do. So bear in mind,

04:25

we've only got two items in our cart at the moment. So the N plus one problem that we've got isn't too bad, but for this, we want to load in the product for each of the variations,

04:34

because remember over in cart item, we're first of all accessing the product for that variation. So that's the first thing that we want to eager load in. Let's go over and give that a refresh.

04:44

Sure enough, you can see the queries that have bumped down to 11. Now that doesn't seem a lot, but the more items we add to the cart,

04:50

the more these queries are going to bump up. So this will keep that now a fixed query for all of the products that we want to access. Now we also want to load in our ancestors and self.

05:02

So let's go ahead and say variations, ancestors and self. And let's go over and have a look at this. That's bumped that down again.

05:13

So once again, we're not going to be accessing too many relationships on that. Now we're also accessing media for each of these, which is performing a lookup in the media table.

05:24

So the next sensible thing would be to eager load in the media for each of them variations. Let's give that a refresh and we are down to nine queries. For these common table expressions,

05:33

I don't know if we're going to be able to get around this just yet. Let's leave this as it is. I'm going to go ahead and remove one of these items

05:39

just to see where our query count is. The most important thing is that we don't have an N plus one problem. Because if we have 10 items in the cart,

05:47

we're just going to be executing way too many queries. So let's get rid of the cart variation here and come over and give that a refresh. And yeah, we're down to seven.

05:55

So it looks like the, if we just come down here, yeah, it looks like these are being duplicated a little bit more. The stocks are also being duplicated as well.

06:04

So yeah, we really need to sort this out. Let's go over and just re-add that item back into the cart. So same cart, different variation. And let's figure out what we can do here.

06:16

So for the stock specifically, we've got two items back in our cart. If we just head over to the variation model and under stock count, we're using descendants and self.

06:26

So that is where that issue is coming into. So let's go ahead and say variations, descendants and self. And I'm just going to start to pull these down a little bit. Can always pass an array in here,

06:37

but I think it makes sense to go ahead and pull these down. There are cleaner ways of doing this, but we can always refactor it later. So we've got descendants and self in here.

06:45

Let's just see how that's improved. And again, we're down to eight queries. So if I go ahead and get rid of this one and we're down to one item in our cart,

06:54

we're down to seven queries. We should be good. So let's just add in another item into our cart variation. And let's add eight in there.

07:08

And we're bumped back up to eight. So let's have a look. So yeah, the stocks in there still look like we have an additional query.

07:17

So let's head back over to variation. And yeah, so we're going to need descendants and self stocks. So let's say stocks on there. Let's come over and there we go.

07:28

So I think we should be good now. We're eager loading in the stocks. We have a couple of these common table expression queries being run, but I don't think that's going to be

07:36

an N plus one problem. If we just get rid of one of these, come over. Yeah, we're still at seven queries. So I think that will be enough optimization for now.

07:44

We can always come back to this as we add more if things get a little bit out of control, but really important to do this at this stage or the more items you're going to add to the cart,

07:52

the slower things are going to get. Okay, great. So we have now got variations in here being output in whichever way you want.

07:59

And we have fixed up some of the N plus one problems that we have. And we can now move on to updating the quantity of the items we have in our 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.