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

57. Attaching variations to order

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 finished up in the last episode creating the order, but of course we don't know which products have been attached to this order. We've got a subtotal, but that's pretty much it. Now, we are going to replicate what we did with the cart and the cart variation with the orders,

00:15

and we're going to have an order variation pivot table, which gives us the products that have been ordered and the quantities. That means that over on our orders page, we can show the order details like the subtotal, remember which is static in case the variation prices change,

00:30

but we can then show each of the variations that are attached to that order as well. We're going to be doing this down here directly after we've saved the order. Now, things are getting a little bit long here. We're doing lots of different things here.

00:41

We're going to be tidying this up a little bit later with events and listeners, but for now, let's just put it all in here just so it's easy to see what we're doing. Okay, before we do anything, let's go ahead and create out this pivot table to sync our order with our variation. So let's go ahead and make a migration, and we'll create our order variation table,

01:06

and let's head over to that order variation table, and this is pretty straightforward. We just need two foreign IDs. So we need the order ID, and we'll constrain that,

01:22

and we need the variation ID, and we'll constrain that, and we also, of course, want to make sure we show how many we've ordered. So let's go ahead and add in some quantity. Okay, let's go ahead and run phpArt and migrate, and we're good.

01:39

So let's head over to our order model first of all, and let's create this relationship out. So we're going to go ahead and say variations, kind of makes sense. We'll keep it the same name, and of course, because this is a pivot,

01:53

we want to say belongs to many, variation, and we've got that pivot in there. So let's say with pivot, and we'll put quantity in there, and we'll also say with timestamps, so we get them timestamps filled when we insert this. Okay, that's pretty much it.

02:12

Now we need to figure out how to attach those variations. Now normally what we would do is something like order, variations, and attach. So we've already saved this, so we're just attaching these now, and we would say cart and contents.

02:30

Remember, that gives us back a collection of variations. The only problem with this is this will attach them, but not with the quantities. So if we just head over to order variation, it won't fill in the quantities. So what we want to do is map through this and build up an array with the quantities in there,

02:50

kind of like what we did over on our cart model when we synced our available quantities. Remember, we mapped through with keys and returned this array structure, so we had the ID of the variation and the quantity. So we want to do something very similar to this directly within here.

03:09

So we'll go ahead and grab the contents from the cart, but then we'll go ahead and map through these with keys, so we get them keys output for each of the variations, and let's go ahead and just create a standard closure in here just to keep this simple,

03:23

and let's grab the variation for each of them loops, and then we're going to go ahead and return from here the variation ID and then the pivot information, which is the quantity. So we know that that is variation, pivot, and quantity.

03:42

Okay, so we'll tidy this up with a short closure in just a minute, a short function in PHP. Let's just see if this works first of all. So if we come over to the database under orders, let's get rid of this order and let's come over and reorder something in here.

03:57

So we'll just choose any address and let's just click confirm order and pay. Okay, so it looks like we've got a variation ID being inserted here of zero, which of course because we have that constraint set up isn't working. Let's just figure out what we're doing here.

04:12

The first thing we do want to do is make sure this is an array, and second of all, that is what we want to do. We're not assigning this, we're using an arrow in here, so that should fix that up. Now that order will have been created, so let's get rid of that.

04:28

Come back over and let's try and create this again. Great, so that looks like it's worked. So we've got the order created with an ID of seven, and over in order variation, sure enough, that variation there,

04:40

size eight in that one that we chose with a quantity of one, has been attached. Now let's just delete this in here and delete this order, and let's go and in fact just clear up all of these empty carts. So why don't we just truncate this and we'll do a restart entity in Cascade.

05:01

Let's go over, give this a refresh, that'll probably break because of course the cart can't be found anymore, and we'll fix this up later, but let's get rid of our session, and let's just start from scratch.

05:12

So we'll go over to Nike Air Force One. Let's add one of these, and let's search for Nike again, and we'll add one of these. There we go.

05:25

So when we order both of these, if we change the quantities up as well, so let's do two and five. So when we order both of these, this should work nicely. I'm going to go ahead and log in just for the sake of not having to fill out all of this information again,

05:41

and let's just choose an address and confirm this. Okay, so let's head over to the orders table that has of course been created, and then over in order variation, we've got two products now attached to that order, both of them different variations, which we know,

05:59

and then of course the correct quantities have also been attached here as well. So of course when we see that order, we know exactly how many to dispatch, and that's pretty much it. We are now attaching the variations to an order.

Episode summary

In this episode, we're finally getting to the part where we actually attach the variations (like size, color, etc.) of a product to an order in our system. Previously, when we created an order, we just had a subtotal and not much detail about which specific variations or quantities were attached. That's not very useful if we want to know what the customer actually bought!

So, similar to how we handled variations in the cart, we're now introducing an order_variation pivot table. This table will store which variation of each product is attached to an order, and how many were ordered. We go through creating the migration for this, setting up the relationships in our models, and making sure to include the quantity—something that can't be handled with just a simple attach method.

You'll see how we grab the contents from the cart, map over them to create an array that links each variation to its quantity, and then sync that to the order using the pivot table. We run into a small hiccup with how we structure the array for attaching, but we debug it together and get everything working. To wrap up, we test by creating an order with a couple of items, changing quantities, and confirming that everything shows up as expected in the database.

By the end of the video, you'll have a solid setup for attaching detailed order items (with all their specific variations and counts) to your orders, so you always know exactly what to ship!

Episode discussion

No comments, yet. Be the first!