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

56. Creating an 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

So when we hit confirm order and pay of course this is invoking this checkout method We've already seen that we validate this we store the shipping address that the user has entered

00:10

But now of course we want to go ahead and actually create the order So we're gonna test this signed out first of all in the guest state And then we'll go ahead and look at this when we're signed in as well Okay, so at the moment. We've got a huge amount of information that we have to fill out in here

00:24

What I'm just gonna do while we're testing this is Pre-populate this within here just so we don't need to keep typing it out over and over again Let's just check the users that we've got in the database here And we'll get rid of one of these now that violates that because we've got a constraint

00:40

So let's just choose another email address that doesn't exist within here and Let's go ahead and fill in the address here as well, so we'll just say line one

00:52

city and Postcode just so we've got that data in there, and we don't need to fill it out every single time So when I click confirm order and pay that should go ahead and then store that now We've actually got an error here where we've got call to undefined relationship array on model shipping address

01:09

the reason for that is down here what we're doing is And we should have picked up on this earlier. We go down to checkout. We're saying where belongs to or user So let's change this around a little bit and make it a little bit messy But let's go ahead and assign this shipping address to

01:28

shipping address query That's going to give us our query builder back, and then we can check if the user is signed in so auth User and then if that's the case we can then go ahead and use the where belongs to so we can say this

01:46

shipping address equals this shipping address Where belongs to or User like so and then we can continue down with this after here so we can say this

02:01

Shipping address, and then we can just carry this on first or create so first or create pass in this shipping form and Then we can just carry on with what we did before

02:15

By turning that into brackets and going ahead and associating the user on that we've already covered Exactly what this does that should make a little bit more sense, okay? let's just test this out, so let's go over and hit confirm order and pay and Yeah, so we've got this as a public property, so let's change

02:34

this to protected and Let's go over Okay, so that should have stored that address for us Let's just fix that up yet line one city and postcode with no user associated

02:48

Let's go over and just sign in and check this out to make sure we didn't break anything So I'm just going to sign in as my user Come over to our checkout, and let's just store this and that should have created a new one of course because we don't overwrite This address with that user and if we store this again

03:07

It should just do nothing because we've already got it in there so a little bit messy But that should be absolutely fine to get us going Okay, so we're gonna go ahead and log out because we don't want to be signed in for this And let's go ahead and read that because that's cleared our car out so at the moment. This is out of stock

03:23

Let's go over to our stocks and just get rid of this in here and let's add this back in and We can now come over and look at confirming this great

03:36

So what do we want to do here now that we've fixed this issue up with the shipping address? Well, we want to just create an order out We don't want to persist it just yet because we've got lots of things that we need to attach to this So let's go ahead and say order make so we can start to make it out

03:54

With all the details that we need and then finally save it to the database so in here We need the user's email address Regardless of whether they are signed in or signed out and we already have all of that information in the account form So depending on the additional details you do have in the account form

04:12

You could just go ahead and use array merge so we could array merge in This account form which just contains the email at the moment And then we can merge in other details like the subtotal and we know that we've got the subtotal from the cart so let's bring in our car interface into here and

04:31

Then let's come down and say car Subtotal like so there we go. So that should create that out for us Let's just die dump on this order just to make sure that information is in there So the we should get the email Mabel at code course comm and we should have the correct subtotal in there

04:49

Which we do great Next thing to do is attach the user if they're signed in and to do this we can just say order user associate and we can associate

05:00

Currently signed in user if this is null, it would just be ignored now over on our order We don't have a user relationship at the moment. So let's go ahead and add that before we start to associate this so let's go ahead and crowd a user relationship, which is just going to be a belongs to

05:17

relationship and There we go. Okay. So let's again die dump on that order and let's check it out click on there and you should see now this under attributes and User ID is null now if we were signed in and let's go ahead and just sign in again

05:35

Just for clarity here just to make sure we don't break anything and we come over We should see now user ID set to one and we should also see this relations property filled With that user model as well in there. Great. So that's working really nicely Okay, so let's go ahead and log out again go back to our guest car and again, we're just gonna have to

06:00

read this because the session gets completely wiped and We're back to here, okay So the next thing is associating the shipping type and the shipping address So we need two more belongs to relationships over on our order

06:15

Remember we set these up in the database over in orders shipping address ID and shipping type ID We already know what both of these are. So this should be pretty simple to Get added. So let's create out another method in here shipping type and

06:32

That's going to belong to a shipping Type and then we want the shipping address as well so shipping address and Reference the shipping

06:46

Address model great. So now we can associate both of these things much like we've done here So let's let me just copy this down. It's pretty similar and let's say shipping type and Let's associate This shipping

07:04

Type now just before we do this. Let's just die dump on this shipping address, which is what we Create up here and then assign just to make sure we've got this available and Yeah, it looks like we do. So we've got this model in here and

07:25

It looks like that information isn't actually filled so let's go and just make sure we assign this so this Shipping address and assign that to that saved shipping address really important and let's try that again We get true, of course because we're just saving that so let's assign that in here

07:51

I'll probably make more sense. And there we go. Great So we get the shipping address back that we actually want to associate in that property which we can then attach just here So we've got the shipping type Let's do the same with a shipping address

08:07

And we should be good so shipping address and Let's see what we get. So let's die dump on our order and let's come over Confirm order and again, we should get the shipping type ID in there Which we know is one because we have chosen the free package

08:28

The shipping address here is six Which should be that shipping address just here because we're not authenticated remember and that looks good So now finally that we've attached all of these things We can go ahead and save this now persist it to the database

08:44

So create the order remember behind the scenes this attaches that you you ID add the subtotal add The user if they are authenticated and attach the shipping a type and the shipping address and any other information You need to so finally, let's just get rid of this dummy data that we've got in here fill it out and see this order Created for the first time. So let's get rid of all of this information

09:09

And let's head over. Okay, so let's go and say Mabel Code course comm and we'll say one two, three code road code city To make silly things up and just put one two, three, four five and let's choose UPS standard and

09:29

Let's hit confirm order. Okay, so great looks like we have forgotten to add a default time Or a date and time for our packaged at and our other column. So let's fix that up really quickly Over in our create orders table there's a couple of ways that we could do this we could do this at the migration level or we could do it at our

09:50

Model level when we create it like this Let's look at both options, but let's probably go for the model level What we can actually use here is the use current method and what that's going to do is just fill that with a current timestamp When we create a record so it's entirely up to you

10:09

I would always lean for doing this in the model just makes a little bit more sense And we could technically do that for a place that as well. So let's just have a look at this so if you did want to go down this route just roll this back and Remigrate it and if you come over here now and create another order that should work. I'm not gonna do that

10:27

I'm actually gonna go ahead and do this at the model level So let's go ahead and roll this back and re-migrate and let's go over and we could technically just say order shipped at and order packaged at and just assign these all in the same order or All in the same row you can do them on multiple lines if you want, okay

10:49

Let's go over and just refill out this information a little bit annoying That's fine. One, two, three code road and code City and one two, three

11:02

Four five, let's choose the other shipping option hit confirm order. And there we go Now nothing happens at the moment, of course because we're not redirecting anywhere But if we come over to our orders table, there we go So we've got a uuid generated for us the emails been added in here

11:19

So we at least know who has that order regardless of whether they're signed in or not The shipping address looks like it's added that new shipping address. Perfect Shipping is UPS standard Subtotal has been added

11:32

Placed at package that and shipped at have been filled now They don't need to be filled do they so what we have done here is Actually got a bit confused. So place that needs to be filled. But of course these

11:50

Need to be nullable. That's the point because of course They're not going to be packaged and shipped at when we create the order. So place that will be let's make this nullable as well just in case it kind of has a reverted state and Let's go ahead and roll this back and re-migrate. Okay, so we're gonna create this order one more time

12:09

Then we're gonna sign in try it again, and we will finish So let's just put X in here just to save time Create that and there we go. So these are null now, which makes a bit more sense and

12:24

We've got all that other information in there. Great. Okay, so I'm going to delete this order I'm gonna come over to the browser. I'm gonna sign in And I'm now going to check out as an authenticated user to see the difference now, of course, we've got our

12:42

Pre-saved addresses in here, which we created before. So let's just choose this one here and Let's change the delivery click confirm order and pay that's again created that order It has filled the email which is unnecessary because we've got the user attached But it's not really worth adding any kind of logic around here to get rid of this email

13:02

We've got the shipping address in there that we've chosen perfect shipping type Everything that we need for our order. So there we go. We have created an order We've attached everything that we need to that order. Let's go over to the next episode and look at attaching Variations to orders because at the moment we've got this order, but we have no idea what has been ordered

Episode summary

In this episode, we're diving into the process of actually creating an order in our checkout flow. We start by testing the checkout both as a guest and a signed-in user, making it easier on ourselves by pre-filling some of the required data instead of typing it every time. Along the way, we spot and fix a couple of minor issues—like a mistake with model relationships and making sure our shipping address is correctly attached.

Once that's sorted, we focus on building the order itself, starting with creating an order object and gradually attaching all necessary information, like the user's email (whether they're logged in or not), the subtotal from the shopping cart, and associating the order with a user if authenticated. We add the required relationships to the Order model for the user, shipping type, and shipping address so that everything is properly linked together.

After ensuring all the associations work, we take care of a quick bug where some timestamps weren't set or nullable as they should be, and we fix this both at the migration and model level. Then, it's just testing things out by creating orders as both a guest and an authenticated user, and verifying that all the right info is stored in the database: shipping type, shipping address, subtotal, and (when available) the user.

By the end of the episode, your app is now successfully creating complete orders with all the right data associated—ready for us to attach the actual basket contents in the next episode.

Episode discussion

No comments, yet. Be the first!