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
62. Scaffolding the orders 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
Now that we are associating orders properly both for guests when they register and authenticated users, we're going to start to scaffold out the orders page. So first things first, let's go ahead and create our controller for this. So let's just call this order index controller and let's head over to our web routes. We already have an orders route for this,
00:21
but we created this as a closure. So let's say order index controller. Really importantly, with this controller, we need to be signed in. So let's do that first. This middleware. And let's go ahead and say auth. And then for invoking this, let's just return a view orders index. And we should be good. Okay, let's create this out. So down here in our views
00:53
under orders, let's just find this real quick. There we go. Let's create index.blade.php. And once again, we're just going to paste in some pre-made markup because there's a huge amount in here. But we'll be going through and fitting this in. Of course, this is available in the course downloads. So let's add a little drop down to here just so we can go ahead and
01:15
click on this. So if we come over to our navigation.blade.php file, let's find that log out link. So just here. And let's add in another item in here. So this is going to be a drop down link like log out. So we can steal this. And we can put this just up here. Let's pull that in. We can, of course, get rid of this on click event, which is used to submit that log
01:37
out form for cross site request forgery. And the href to this, we can put through to route and orders. And of course, just put text in there like so. OK, if we come over, there we go. And we go through to that orders page. Now, of course, at the moment, this doesn't look great. We've got all of the variation information to fill in the image of the product, all that good stuff. But
01:59
let's start really simply and just go through and iterate through each of the orders. I've left a little comment here to make it a little bit easier and then just output some really basic details about each of our orders. So we don't have our orders being passed down just yet. So let's go over to our order index controller. We're really quickly going to grab all of the orders for the
02:18
user. We're not going to add in our eager loading just yet, just so we can see this on the page. And then we'll go back and we'll grab all of that information. So let's put our request in just so we can grab the currently authenticated user. So request user. And we're just going to go ahead and say orders. And let's say latest and get the latest order at the top. And we're just going to
02:42
pass them orders down to that view, like so. So we definitely want to come back and eager load this because we're going to have a huge amount of information. So let's use a for else here. So let's say orders as order. And then down here, we'll say empty and end for else. And let's just say no orders. That's of course if the user doesn't have any orders. And otherwise, we'll go
03:07
through and iterate all of these. Now we're signed in as Mabel at the moment, who has two orders attached to them. At the moment, we don't have an orders relationship on the user though. So let's go ahead and fill that in first of all. So this is really simple. It's just a has many. So let's go ahead and say orders. This has many. And of course, passing our order class. There we go. We've got two
03:30
orders. Brilliant. So we can just go ahead and fill this information. And then we'll go through and add some more detail. So once again, for the order ID, we're just going to keep this really, really simple. Just output the ID. The formatted subtotal. Let's just head over to our order model because we stored the subtotal here. But we don't have a formatted subtotal method.
03:52
Now that's going to be exactly the same. Once again, as something like the product has, if we just come down to our formatted price, it's going to be pretty much the same thing. So we can just grab this, put it in here, and say formatted subtotal. And then just go ahead and pass in the subtotal here using our money helper. So we can grab this and replace this out
04:18
with the formatted subtotal. Let's go over and check it out. And there we go, $90. Now for the shipping type, let's once again go over to our order. We know that we have this relationship set up because we set it up earlier when we were attaching the shipping type. So what we can do from here is just say order, shipping type, and let's just remind ourselves
04:38
that's title. So we can just say title. And this is why we're going to have to start egoloading because we're accessing lots of different relationships here. So we've got one with UPS free and one with UPS standard. For the created date, we'll keep this really simple. And we'll just use the created at date, although you could use the place that date,
04:57
which is the same. And we're just going to say to date time string. And of course, you can format that however you like. Now we've got the order status here, which is a little bit more complex. So we're going to be focusing on that later because we're going to be automatically detecting when an order status changes
05:14
and sending an email. And this needs to be set up so we always return the latest order status. So we'll leave that to another episode. OK, so iterating through our orders, let's take the next episode just to go through the variations that are attached to that order. And then we can get on with our order status.
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!

Episode discussion

No comments, yet. Be the first!