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
63. Filling in order variation details
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
OK. So let's finish up our order page by iterating through each of the products that we've ordered, or more importantly, the variations that we've ordered,
00:08
and show all of the details about these. Most of this we've already covered anyway. And then at the end of the video, we're going to check out our query count just
00:16
to make sure we're eager loading everything in so we're not creating any duplicate queries. So this little component down here is just where we want to iterate through
00:27
over each of the variations for our order. Now, if we check this out, we've already got this variations relationship with the quantity on here. So we've got all of the information that we need.
00:36
Let's go ahead and just start to iterate through these. So order variations as variation. And if we come down here and end this for each, we should see that output, however many variations
00:50
we've ordered. Now, at the moment, we've only got one per item. So why don't we just go ahead and create another order with both of these products just so we've
01:01
got a little bit more data to play around with. So I'm going to go ahead and create another order with both of these products in. So let's go ahead and choose both of these,
01:12
add it to the cart, and let's go ahead and just check out. Of course, we're already signed in. We don't have a pre-saved address. We should really get rid of this so we can deal with that later.
01:21
Let's go ahead and do this. And there we go. We've got two products ordered in this latest order. OK, let's go through and start to output all of the details.
01:32
So for the product image, again, we've done this already. We just want to go ahead and from the variation, grab the first media URL. And we want this to be that thumbnail that we generated
01:47
under the default collection. So that's just thumb 200 by 200. Let's check it out. There we go.
01:54
Great. Of course, this one doesn't exist. And let's go ahead and grab the formatted price for the variation.
02:02
Again, we've already seen this. So variation, formatted price, and the product title, which involves going back to the base product. So variation, product, and title.
02:17
There we go. Perfect. OK, so for the quantity, we just need to access that through the pivot.
02:22
So let's go ahead and say variation, pivot, and quantity. Remember, that's the quantity attached to that particular order. Of course, all of these are one.
02:33
But we could manually change that if we wanted to test it. We won't bother. And now we want to go through the ancestor details, which we've already done before.
02:42
So let's go ahead and for each loop over the variation ancestors and self to grab the self as well. And we'll call that ancestor. And let's end that for each just here.
02:56
And for this, we just want to go ahead and say ancestor and title, like so. And there we go. So eight in black, 12 rainbow, and eight in black
03:07
for both of them as well. Now, once again, we could either use CSS or we could use that loop object. So let's say if not loop last and end that if there.
03:22
And we're done. Great. So we've got all of the information about the order and each of the variations that we've ordered.
03:29
What we now want to do is head over to our query count and see that we've got way too many queries and way too many duplicates. We've got 11 duplicate queries here.
03:38
And then the more orders and particularly the more variations that we have within each order, this is just going to keep increasing. So let's go over to our order index controller
03:50
and figure out what we need to egoload. So first of all, just before get, let's go ahead and say with. And into this, let's think about what we need to load in.
04:00
Now, we know that for each of the variations we're accessing the product title. So the first thing to do would be to load in the product for each of the variations.
04:08
So that's going to bump our query count down a little bit. The second thing is the media. So variations and media. Of course, we're grabbing the media from that media table.
04:17
So that's going to bump that down even further. And we've got them ancestors and self as well. So variations, ancestors, and self. And again, if we come over, that's
04:30
bump that right down as well. So we've got four duplicate queries left that we need to figure out. So let's go ahead and add in the shipping type.
04:39
And if we come over, we're bumped down to 10. So we've still got two duplicate queries. Let's have a look here. And I think this might just be the way that we're
04:47
plucking the orders out. So let's go ahead and create one more order just to test this out. So let's head over to one of these products.
04:54
Go ahead and choose this size. Head over to our cart. Hit Checkout. Go ahead and choose this pre-saved address.
05:04
Confirm the order. And yeah, we've still got 10. So we don't have an n plus 1 problem. That is the most important thing.
05:11
We've got a huge amount of data here, all eager loaded. And we now have our orders page complete. However, we still need to figure out this order status. So let's take the next few episodes to figure this out.
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!