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
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
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
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
78 episodes8 hrs 42 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.