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

63. Filling in order variation details

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

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•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.