Sign up to access "Build an E-Commerce Platform" right now.

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

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

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

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

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

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

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

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.

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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