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
60. Showing the order confirmation page

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 over the next couple of episodes, we're going to focus on what happens after we check out.
00:05
At the moment, when we add products to our cart and then we go ahead and fill in all of these details over in our checkout page, nothing really happens because we're not redirecting anywhere. Now, we need to think about this really carefully because we have a guest checkout, but of course, you can also be signed in to checkout as well. So what's going to happen is
00:27
if we are signed in, we're going to be redirected over to the orders page. Of course, you can change that if you want to. And if we are not signed in, in this state here, we're just going to redirect the user to a generic order page. We're going to give them their order number, which we're just going to use as the ID for now, but we can always change
00:45
that up later. And then we are going to allow them to register. They can register at any point, but we're going to give them a link to register. So once we've done the redirecting here, in the next episode, we're going to look at what happens when a user does register and we're going to find any orders that they have created with their email address
01:03
and automatically associate any past orders that they've created with their account. We'll demo that out in the next episode, but let's get this whole flow working first of all. So first of all, I'm just going to clear the database up just so it's a little bit easier to see what we're doing. So we're going to go ahead and, well, we can just truncate
01:23
this orders table here and we may as well restart the identity of this. And let's go ahead and discard that. Okay, so we've got no orders in here. We have got some shipping addresses hanging around, but let's just kind of leave them for now. Okay, so let's go over to our checkout component. Now, at the moment, we're just removing all products and not doing
01:44
much here at all. Now, before we go ahead and redirect, let's build out the order confirmation page. So we're going to go ahead and say make controller and we're going to say order confirmation index controller. And let's head over to that order confirmation index controller and implement our invoke magic method. Now into this, of course, we're going to get an order
02:08
because we're going to be showing them their order number. So we're going to be passing that through to the URL. The way that we're going to be passing this through will be through the UUID because we don't just want anyone to go over to any kind of random order. That doesn't make sense. And let's go into an orders folder and confirmation that should do. Okay, so let's
02:27
go down to our views and let's create out an orders folder in here and then inside of here, confirmation.blade.php. Once again, I'm just going to paste into markup. This is very simple. It's pretty much just the structure that we've already seen with thanks for your order at the top and your order hash order number has been placed and then a link to create an account
02:50
to manage orders if the user wants to. They, of course, don't have to because we have all of the information already to ship it to them. So let's go over to our routes, hook this up and see what we can do. So let's just do this down at the bottom here and let's say get slash orders and then we want the order in here but we want this by the UUID
03:14
and slash confirmation. Okay, let's hook that up to the order confirmation index controller and we should be just about done. So let's go over to that now after we've created an order and then we'll look at redirecting. So I'm going to go ahead and choose the user that hasn't registered. Let's just double check our database just to make sure. Yep, we can even get rid of
03:35
this user because we don't need that in there anymore although there are records associated with that so let's just leave it. Okay, so codecourse.com and let's just fill this in ABC. We don't have much validation on there. We can choose any of these, it doesn't really matter and let's go ahead and click confirm order and pay. So that's created it now over in the database
03:55
so we can actually grab this UUID. Let's go over to orders slash that and then confirmation and we have this page in here. Great, so we're just going to, like I said, use the order ID for the order number at the moment. We will be changing that up a little bit later but let's just go ahead and say order ID. Now we haven't passed that down yet so let's just go ahead and
04:19
really quickly pass that order down to here. Of course, we don't need to be signed in to access this page and there we go. So your order number one has been placed. Create an account to manage your orders. Now we already know the location of the register page so we can just really quickly fill this in and there we go. So that's the kind of generic order page for a user who has not got an
04:42
account or who has not authenticated. They can then go ahead and create an account and as soon as they fill in that email address, what we're going to do is we're going to find any orders with that email and automatically associate it to that user. Now let's just look at the redirection flow and then in the next part we'll cover that. So let's go and search for a product
05:01
up here. Let's go ahead and add this to our stock or add this to our cart and let's go and check out. Now this is a user who is not registered so let's go over to our checkout component which we have just here and let's add an if statement just at the bottom and say that if the user is not signed in we could use check there or user, it doesn't really matter. Then we want to return and redirect
05:25
the user over to that specific page. Now we haven't got a name for this, it would be a little bit easier if we'd given this a name. So let's just pull that down and we'll call this orders.confirmation. The reason that's a little bit easier is because we can then say redirect root orders.confirmation and we already have assigned the order just up here. So we can just pass that
05:51
order in and that will be attached to that route as it's generated. Now otherwise we can just redirect the user over to the orders page which we don't have at the moment. So let's go ahead and just kind of mock this out slash orders or we could say just orders and then maybe over in our routes let's just create a little placeholder for this by creating our route with a closure
06:18
and then we'll switch that up to a controller later. So let's go ahead and give this a name of orders and that should work great and of course the user shouldn't see anything in there. Okay so if the user is not signed in redirect them to the page that we've just built otherwise redirect them over to their orders page. So we should now just be able to fill this in
06:39
as we have before again we'll just put any kind of dummy data in here and we should be able to click confirm order and there we go we're redirected over to that confirmation page once that order has been created. Let's just quickly go ahead and log in with my account just to make sure that that other redirection is working properly and then we'll go ahead and look at this order association.
06:59
Okay so this is out of stock at the moment because of course every time we check out this is being reduced so I'm just going to bump this one up to 20 or in reality what you would do is create a new record once you have more stock in so we'll just do that. Okay so let's go ahead and add black 8 to our cart and let's go ahead and check out of course with a pre-saved
07:21
address that we've already got nice and easy and there we go we're re-erected to orders which of course doesn't exist at the moment but we'll be building that very shortly. Okay so now that we've done that let's look at the process of not being logged in but going ahead and hooking up previous orders to a user when they register an account.
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.