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
33. Building the product browser

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 we're moving on to the big one, the product browser. We're going to take this part just to grab the markup that we're going to need for this, talk about each section, and then we're going to at least hit our Mellis search server and grab back a list of the products that are within the particular category.
00:18
So remember, that's why we added those category IDs, because when we land on this category, we want to hit that search engine and go ahead and pull back all of the products where the category ID is within these two or more integers. So let's go over and just go and create our product browser component.
00:36
This is going to be a Livewire component, because we want this nice and dynamic. So let's go ahead and call this product browser. And let's create that out. And we'll come straight over to product browser.
00:47
And I'm just going to go ahead and paste in the markup that we're going to use for this. Now, there is a huge amount here. Of course, you can go ahead and grab this from the course downloads. And we're just going to run through and talk about this.
00:59
And I'll just fix up some of these formatting issues while we are here. And we're good to go. So let's save that out. And let's come over to the category show page.
01:12
And let's come down and pop that product browser in here and just take a look. So product browser. And we're done. So let's head over and give this a refresh.
01:23
And there we go. So it doesn't look great at the moment. But let's just talk about each of these things and what they're going to do. So we'll start here as well as the category ancestors.
01:33
We're also going to show the category children. So for example, if we start on brands, the category children will be Nike. And then when we click on that, we'll go over to Nike. And the category children for Nike will be new in.
01:46
So just it's going to allow the user to navigate through each of the categories that you've got set up. Now, the max price shouldn't really need any explanation. We already saw that from the introduction.
01:57
We're just going to be able to slide this to filter the products here by their price. And by default, this will be set to the max price of the highest price product in this list. So then when we go down, we've got a nice sort of start and end range. The filter titles will be any of the variations we've currently added.
02:15
So if we head over to our database over to variations and we look at these types, these are what we're going to pluck out. So we're going to be able to filter by color, which in our case, if we were just running this now, would be black and white.
02:29
So under here, this would be color. This would be black. And then there'd be another one showing white. And the same for size as well.
02:36
We would have two, 8 and 9. We wouldn't have 8, 9, 8, 9. We would just have the two unique ones for that. And obviously, this is pretty self-explanatory.
02:46
It's just going to show us how many products match the filters that we've chosen over here and within the overall category. And then, of course, each of these is going to have a product image, a product title, and a formatted price.
02:57
And that will click through to the product page that we have already built. So the user can start adding it to their cart. So now that we've got in here, let's go ahead and ignore the filters for now. We're just going to focus on this section and showing the products
03:11
and plus showing how many products matched our filters. So all of this searching is going to happen over in the product browser component within Livewire. So let's get started on this. Now, the first thing that we need in here is the actual category itself
03:28
because we need to know what products we are browsing in or which category we're browsing in. So let's go ahead and accept in a category into here. We'll head back over to the category show page.
03:39
And we will pass the category directly into this product browser. That's pretty much the only information we're going to need inside of here. And then when we render this, this is when we want to perform the search and then pass down the list of products that we want to iterate through.
03:56
So what we're going to do for now is just go ahead and pass down a list of products directly from the database. And then we'll switch this over to hit MeliSearch, pull back the IDs for the products that match,
04:07
and then go ahead and show them instead. So what I'm going to do just for now is just say product get just to keep things really, really simple so we can get the output working. And then up here, we'll perform our search using MeliSearch.
04:20
So the only issue we've got at the moment is there's only one product in the database. Now, it doesn't matter if we don't have any variations here. We can just create more than one product. We're going to be focusing on this because that's what we have the variations for.
04:33
But let's just create another shoe. I'm just going to call this Nike Air Force 2 just so we don't have to think of anything cool. And let's save the changes out for that.
04:41
So technically, we've got two products in the database. So now within our product browser, we've got this access to products. So let's head over to the product browser template. And let's go down to where our products are, which is just down here.
04:55
And we'll start to iterate through. So this is the anchor that we want to iterate over. So let's go ahead and say for each product as product, pretty much exactly what we're used to doing.
05:05
So product, and we'll go ahead and end that just down here. And we'll just indent this. We may as well link through to it while we're here because we already know that that works.
05:15
So product and slug. And if we just head over here and give that refresh, of course, we have two products. So now we can just fill in the details about each of the product.
05:25
We'll start with the product title because that's pretty straightforward. Product title. And we already know that we've got that formatted price method. So product and formatted price.
05:36
And that should give us quite a bit of information. Nike Air Force 1, Nike Air Force 2. So in terms of the product image, we've already output this before. That is just going to be the first media URL.
05:47
And we don't need to pass the thumb because we want the larger image. And of course, you could add more transformations to this if you want to get a slightly smaller image with the media library package. You can also do responsive images.
06:01
So you can update this a little bit later. But for now, let's just grab the first image. So this is looking good. We've got the image that we added here.
06:08
We've got our standard placeholder, which we implemented earlier. So now that we've got these two products, we're going to switch this over to MeliSearch because, of course, we don't just want to pluck these out of the database.
06:20
So the first thing that we'll do is head over and actually index this. So let's just go ahead and say index product. And if we head over to MeliSearch, we should see now we've got two products in here. So we've got Nike Air Force 2, Nike Air Force 1.
06:33
Unfortunately, this doesn't exist in any categories at the moment. So let's change that. So if we come over to our category product, let's just put what category are we in at the moment?
06:45
We're in Nike itself. So let's just add this to Nike and product ID of 2, it should be. No, it's 3. There we go.
06:56
So if we just go ahead and re-index this and come over, there we go. So that's in category 3 and this is in category 3 and 6. So that should be enough just to play around with for now. So let's go ahead and make a search request over in our product browser
07:13
here to actually get the products that we need back. So the easiest way to do this would be to go ahead and say search. We're going to use the product model. And now that we have over in our product the searchable trait just here,
07:27
we get access if we go back to our product browser to a search method. So we can just search on an empty string because technically, what we're not doing here is actually searching for any keywords. We're going to be doing that within our navigation.
07:40
And once we do that, we can go ahead and get back the raw result. We can go ahead and get back the collection. So if we just die dump on search here and we come over to our browser, let's have a look at what that gives us.
07:54
So yeah, it gives us a collection back with two products in because they're the only two that we've got in our index. So let's go ahead and just get rid of this. Switch this over to products.
08:05
And then instead of just grabbing all products from the database, let's go ahead and pass the products down like this. So now what we're doing is hitting MeliSearch, getting back a list of the IDs and Scout is mapping them up for us.
08:16
So we pretty much get exactly the same result. But now, for example, if we said Nike Air Force 2, I'm pretty sure. Yeah, so this is the more relevant result. So that's the one that's come back first.
08:30
That's just an example. We're not actually going to be passing a keyword into there just yet. Now, the only issue with this at the moment is this is going to pull all results out of our MeliSearch index.
08:41
So if we come over to brands, for example, that's pulling out both of these, even though neither of these products exist within the brands category. So what we need to do is we need to add a filter to this to only pull back the products where the category IDs match.
08:56
So to do this, we can actually pass a closure through to the second argument of search. And then we can start to use this to send very specific requests through to MeliSearch. So the first thing that we're going to get into here is the MeliSearch instance. We're going to get the string, which is going to be the query that we've passed
09:16
and an array of options which we can modify. So to go ahead and filter this by the category IDs, we're going to go ahead and override the options. Now, within MeliSearch, when we make an API request to MeliSearch,
09:28
we have a filter option. And the filter option is going to look something like this, category IDs equals, and then we're just going to pass in the category ID. And because that's an array within MeliSearch,
09:42
that's going to go ahead and plug that out by whatever exists within that array. So let's go ahead and just try this out. So we're going to say filter, and we're going to set that to category IDs equals. And then we're going to append on this category ID.
10:00
So let's just try this out and see what happens. So let's come over and give this a refresh. So the reason that we're not seeing any products is when we override this with this closure just here,
10:10
we actually need to then perform the search. And that's that MeliSearch instance that we have here. So we're going to go ahead and say return MeliSearch, and then we're going to actually perform a search on this,
10:20
passing the query in, which we know is just always an empty string, and then passing in the options. So that will take the filter that we've added, pass it through to MeliSearch specifically,
10:31
return it, and then Scout will process this for us. So if we now come over and give this a refresh, sure enough, this now works. Now, if we head over to brand, notice that we don't have anything
10:41
because, of course, that filter cannot find that category inside of the category IDs or any of them. So if we just go back to our homepage, we should really change dashboard to home.
10:52
Let's just go back to our categories list. In fact, was it home? Yeah, there we go. So if we just go over to summer, there's nothing in there.
11:03
If we go to Nike, there are then both two products in there. But if we go to new in, there's just the Nike Air Force 1 because that's how we have it set up in the database, and that's how it was indexed.
11:14
So let's get back over to Nike because that's got both of our products in that we can work with. Hopefully that makes sense though. And now we've just made a very simple change to this
11:21
to go ahead and explicitly pass a filter in. And we're going to be doing lots more in here specifically to grab out the price range. So we're going to be looking at the price that we indexed
11:32
and also the query filters that we're going to have on the left-hand side to filter by the variation. But at least now what we've got is within each category, the relevant products that exist within that category.
11:45
Let's finish off by just updating this here to tell us how many products have been found. That's pretty straightforward. If we just come over to our product browser and come up to here,
11:55
all we really need to do for this is just go ahead and output the products count because we know that we've got a collection of products. So we're going to say products and count.
12:04
And let's pluralize this. So let's go ahead and say string plural and product. And then we'll pass in the products count in there again. And let's just take a look.
12:18
There we go. Found two products. If we just head back over to the homepage and looking you in, found one product. Great.
12:27
Let's just finish up by changing this dashboard link and the home link to the base category page. I think that would make sense. So if we head over to navigation.blade.php
12:37
and we look for dashboard, there's one here. Can change that to categories. And let's switch this href to forward slash. And we'll say active request root is.
12:50
Now we've got a root name for that. So why don't we go ahead and give this a name really quickly? We could chop and change that around. But let's go and give this a name.
13:01
We'll just say home for now. And we'll switch that to home. And let's search for dashboard again for that in the homepage. So that's going to go forward to forward slash.
13:13
And I think there's another one for the mobile navigation. So let's say categories. And again, we'll change the href to a forward slash and set that to home. OK, let's go over.
13:24
And there we go. Category. So we're on the category page. We can click back to categories or home to go back to categories as well.
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!