Build an E-Commerce Platform
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
38. Filtering products

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 filling up our query filters now, now we need to go ahead and pass them through to our search closure just here so they can be sent to MeliSearch and of course we can
00:11
see our products being filtered. And when we click on these to update them, so for example when we come over and click on one of these, LiveWire will send a request through to update query filters and this render method will be called again, so it will just constantly keep up and perform another search
00:27
for us. So, the first thing we really want to do is just figure out what our filters look like, so to do this we're going to go ahead and just do this outside of here first of all and we're going to go ahead and die dump on them filters every time we change them, it's
00:42
not going to be ideal but we can kind of see what's going on then and then we can go ahead and pass them through to our search. So the first thing that we want to do is use the collect helper function in Laravel to collect up the query filters so we can map through these properly and actually build
00:57
up something that MeliSearch is going to understand. Now let's just take a look at what MeliSearch can understand first of all. Now earlier we looked at the category IDs which we removed because we changed this around to pluck these out of products when we use the raw function here to get the raw result
01:13
back but that looks something like this. Now what we can also do is we can chain on AND so we can chain on multiple filters so for example we could say category IDs equals 5 and color equals black and if we just do that in caps size equals 12 so we can pass as many of these as we want to MeliSearch
01:32
and that will go ahead and give us back the relevant search results. Now to do this we need to kind of go and map through the query filters and build up this string. Now I'm going to do this in a kind of really verbose way just to make things a little bit
01:44
easier but then you can go ahead and tweak this and filter around it and do whatever you want. So we're going to go ahead and use the filter function on the Laravel collection which this array will now be and let's go ahead and pass through a closure just in here shorthand
02:00
closure and we're going to go ahead and only get the ones that are not empty so at the moment we know that we could have color and size but color might be empty and size we might have chosen just all size 12 shoes so we want to kind of get rid of that before we start to format this to send through to MeliSearch.
02:22
Now this filter function on the Laravel collection will just filter out anything within a particular condition so we'll get the filter through to here and then we can just say something like not empty filter so that's going to go ahead and get rid of that. Let's cast this to an array just to see what we've got and let's go over and we get an
02:40
empty array at the moment so let's get rid of this die dump we're just going to kind of do this in a really hacky way and I'm going to choose black and rainbow and then I'm going to go ahead and bring this die dump back so the next time we click on one we get what we need so we've got black rainbow and white all selected here and of course you'll notice
02:57
in here we don't have the size array because that's been filtered out if we were to get rid of that and go ahead and choose black and 12 and then bring this back and maybe choose 8 you can see that we get both color and size so we're filtering out basically the filters that aren't relevant to what the user has clicked that's the first step.
03:15
The second step is to map through this so we're just going to use map now because we're not going to need to do this with keys create a closure in here and then basically return a string in here like size equals something and and then the next time this is mapped around for each of the filters we're going to just chain that on so for example it will
03:35
look like that then finally we'll get rid of the last and so that should be there if that's too confusing we'll get rid of the last and and then we'll have a string that we can send through to mellis search so into this map function we get the value and we get the key here the reason that we don't use map with keys is because we don't need
03:53
to retain the keys when we actually build this string up we just want to map through and return a completely new string so let's just do this and I'm just going to put X in here just to demonstrate this out let's go ahead and just die dump the filters that we've got here and let's go over and just try this out so of course we'll get rid of that for
04:10
now and let's click black and then bring that die dump back and then click 12 and we should end up with color X and size X great so let's go over here and just flatten this because we don't need the keys in here so we can flatten this array and again just get rid of that die dump there's easier ways to do this but let's just go ahead and roll with
04:32
that let's get rid of that and put die dump back and there we go so we end up with this and there so we don't need them keys just in there okay so now that we've done that instead of of course returning X we need to return something really useful so we're going to go on the value here because remember the value could contain two items so it could
04:51
contain two different sizes or two different colors and we're going to map through that value so let's again use a shorthand closure just to keep this a little bit tidier and we'll just call that value and then we're going to go ahead and return the key in here so let's add the key we'll concatenate on equals and then we'll concatenate on the value
05:11
and then we'll concatenate on and so we end up with what we need to output now this value needs to be wrapped in double quotes so let's just make sure we add this in here and we should be good let's just see what we end up with when we start to click so again we'll bring back our die dump just so we can see what we're doing and we'll get rid of that
05:31
while we select a couple of filters so let's select black okay so we get map on array so what we need to do is just figure out what this value is really quickly and let's go over and give that a refresh and click on one of these yeah so we get black and then we get rainbow so what it looks like is happening is we're only getting one of these values back
05:53
every time we click on it so let's just take a step back a minute and get rid of this and just see what we end up with when we select a few items so i'm going to get rid of that and let's go through and just click on a couple of these bring back our die dump and have a look yeah so we've got black rainbow and 12 when actually what we want to do is recursively go
06:16
through this and do this for each of these before we end up with this state so let's go over to our app service provider let's add a recursive macro to our collection so let's go and say collection and we'll see why this is in a minute we'll make sure we dump this out and let's say collection macro and let's say recursive and spell that properly and we've got a closure just in here
06:43
so basically we want to recursively go through each of these items that are in this array we could flatten it first but let's go ahead and roll with this so let's pull in illuminate support collection we basically want to go and map through and grab the values out for each of these and make sure we return this and then we're going to go ahead and say if it's an array
07:09
is array so if the item that we're going through is an array or it's an object so we'll pass that value in there we're going to go ahead and return and we're going to collect up that same value and then we're going to recall the recursive macro that we're creating of course the name implies this from uh that is recursive and then
07:32
we're going to return the value otherwise so let's just take a look at this and see what this actually does now that we have done this so let's go and say recursive and let's just go through a map now like we just did and we'll go ahead and get rid of that die dump and let's click on one of these one of these and then finally we'll finish up by clicking on a
07:57
size and dying and dumping that there we go so the way that that recursive macro has worked is if we just examine what we get when we don't do this we'll just get rid of all of that for now come over to our product browser and we will bring back this printer so what we're now doing is when i click on black rainbow and 12 the recursive macro has allowed us to go into color
08:23
go into black and then go into rainbow and do that for each of these items like i said we could flatten this and then go ahead and do it but i think a recursive macro is really useful anyway so that's just allowed to apply that to each of the items and then we end up with a string that we expected earlier so we've got rid of our die dump let's just choose a few of these like that
08:45
and there we go so we've got color equals black and color equals rainbow and now what we could actually do is we could get rid of the and here and then we could join this with and so we could just use a php join or we could even do that on a collection so i'm actually going to get rid of the and at the end here and then let's go ahead and flatten this and then join it with and like so
09:05
let's just see what we get when we try that so again let's get rid of the die dump here let's go and yes we've got to array on string of course let's get rid of that to array we can't do that and let's say black rainbow and then we'll finish up clicking on 12 and there we go so this is a kind of filter that we want to start to pass through to melissa it's color black and color
09:27
rainbow and color or and size equals 12 so although we're using an and here it's a little bit confusing this will bring back things that have a black color or a rainbow color or a size of 12 so these are just all sort of inclusive they'll just pull back everything that we need so we've now kind of got our filters that we can pass through so we're going to go ahead and do pretty much what we did
09:50
earlier when we looked at our category ids and we're going to say options filters and we're going to assign that to the filters that we have created and of course we need to pull that into here we could leave it outside of here actually uh it doesn't really matter too much because it won't be called more than once let's put that inside of search just for now pull this in and
10:15
we should be good so let's just die dump on our filters or our options and filters just to make sure that we've got everything right before we go any further so let's go and and yeah we get an error that should be filter and it looks like that's actually erring i think the reason that this is erring is because we just are passing an empty string through so why don't we just
10:39
add a condition to this and just say if filters and we could even do the length of that but let's just leave it for now and that should work great so that's working now and it's only hopefully going to die dump if we have filters so let's click on black and there we go color equals black so let's get rid of this die dump choose a few more filters and we should be good
11:03
to go so you can see this is actually already working but let's just kind of try it out anyway by dying and dumping on filter and there we go so yeah that's the filter that we're now passing through and as you just saw it's actually working now because we brought this line back here to actually perform the search so the variations that we've got we know that two of these have
11:22
rainbow so when i click on it effectively has no effect because both of these have rainbow colors if i was to select black we know that only this one has black so we only see this one same with white if we choose white and black that will bring back shoes that have white and black which is just this one and of course as you add more products with lots of different variations
11:41
this will be a little bit more exciting but again if i choose eight here that's only bringing back one and you can see that the facet distribution is also updating when we click on this as well so if i choose eight here that's going to go ahead and for the results that we've got update the facet distribution so we can then select them further down so i think that's working nicely
12:02
for now this is obviously quite complicated if you're just getting started but hopefully that makes sense we might come back a little bit later to refactor this and make it a little bit simpler without having to recurse through each of the items but i think for now that will just about do okay there we go our filters are working let's move on to filtering by price

Episode summary

In this episode, we really get into making our product filtering system work smoothly with MeliSearch. We start by making sure our filter setup (things like color and size) is correctly captured from the UI using Livewire. Each time you click a filter, a request is fired, and our filters are updated and applied to the product query.

Next, we dive into how we map and format these filters into a string that MeliSearch understands. This involves filtering out any empty selections, handling multiple selected values (like multiple colors), and then building the final filter string. We even add a custom recursive collection macro in Laravel to help tackle nested arrays and make our code more versatile.

There’s a bit of trial and error (complete with lots of dd() die-dump debugging), as we refine the formatting and filtering logic. By the end, we've set things up so that when a user selects different product filters, only the relevant products are shown—just like you'd expect from any solid e-commerce shop. The facet distribution (those little counts by each filter) also updates as you filter more and more.

It’s a little complex, but you can now filter products in real-time—laying the groundwork for adding even fancier features (like filtering by price next).

Episode discussion

No comments, yet. Be the first!