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
30. Showing the category products 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
Over the next handful of parts, we're going to be looking at the product browser, which means we can filter by different variation types, all of that good stuff that we saw from the introduction.
00:10
The first thing to do, though, is create out the category page, meaning when we click on one of these, we want to go through and actually view this category. We're also going to, in this part, add in the category ancestors as well, so we can sort of trickle up and look at a sort of wider category if we want to.
00:28
Okay, so the first thing to do is just go ahead and create a controller for this. We're going to keep this super simple and create a category show controller, and let's head over to that category show controller, and we'll just add in an invoke magic method in here.
00:45
And of course, we're going to expect in a category, so let's make sure we pull that in now and go ahead and pull the namespace in. Okay, so we won't do anything here just for yet. What we want to make sure we do first of all is register that route.
00:59
So let's go and just grab any of these. It doesn't really matter too much. And let's go ahead and say categories slash, and then we want the category in there. But really importantly, we want this by the slug.
01:12
So if we just come over to our categories here, we've got our slug in there. So we want to make sure that we pull that in by the slug. And of course, use the category show controller. Great.
01:23
Okay, so if we just come over to one of these now, click on it, we go through to an empty page. So of course, what we want to do is return a view. So let's go ahead and say categories and show.
01:34
And let's create that just over here under our resources, views, and categories. And we'll create show.blade.php. And once again, what I'm going to do is just pull over some pre-made markup. Very, very similar structure to the rest of this.
01:52
The only difference is we are showing the ancestors just here with the category title. So the ancestors will come before the category title. So we can click back into them. And then we've got the product browser just here.
02:04
So effectively, what's going to happen is if we click on new in, we're going to show that this comes from Nike, which then comes from brands. So I think that's helpful in terms of going through that. So actually, let's click on new in under Nike.
02:19
So we can show the ancestors just up here. And then the entire product browser that we saw from earlier is going to be just down here. OK. So the category title is pretty straightforward.
02:28
We're not actually passing this category through yet. So let's do that now. Category and category. We'll need to think about some eager loading here as well,
02:37
particularly when we work with the ancestors. But for the category title, that's pretty straightforward. It's just plucking the title out. And there we go.
02:45
We've got new in. OK. Let's focus on these ancestors then. So because we have already looked at this, this should be very familiar.
02:53
We're just going to go ahead and iterate over category ancestors. Let's fix that up. And we're just going to call that ancestor. And go ahead and end that for each there.
03:04
And then inside of here, we're just going to have an anchor because we want to be able to click through to each of them ancestors. And we're just going to go ahead and extract out the title. Remember, these are all effectively categories, even though they're ancestors.
03:16
So they all have a title. So if we just give this a refresh, there we go. We've got Nike and we've got brands. Now, once again, this might make a little bit more sense to be reversed
03:26
because brands should technically be the last thing. So we can very easily do that in here by just saying reverse because that just gives us back a Laravel collection. So we can reverse that just so it makes a little bit more sense.
03:39
So we've got brands and Nike. Let's go ahead and just add a little bit of styling to this. So let's say text Indigo 500 maybe. And then down here, let's go ahead and create out a span to separate these.
03:51
So I'm just going to have a slash in there. And we'll just say font bold text gray. Let's say 300. And we'll say last hidden.
03:59
So we'll use CSS here. But again, like we did earlier, when we were iterating through the product details for each variation, you could use that loop variable that we have, which detects if it's the last.
04:12
But we'll just use CSS here. I think that makes a bit more sense. So let's just give that a refresh. And there we go.
04:17
So we've got Nike and brands. Only thing we need to do now is just link through to this. So we'll just say categories slash and then the category or the ancestor slug. And if we come over, we can now go over to Nike, which of course is under brands.
04:33
We go back to brands if there are any products under that. It's entirely up to you what you want to do. So there we go. We've got a category show page, which we can start to build out our product browser in,
04:45
which is going to be really important. But before we start to output anything within our product browser, all of this relies on indexing our products into MeliSearch, which is a open source search engine. So let's go ahead and do that in the next episode.
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!