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

quicker to grab this from MeliSearch directly. And by that, I mean grabbing the facet distribution. Now, let's take this step by step. And first of all, go ahead and grab the postman collection for MeliSearch so we can start to send requests to the API. So if you don't have postman, it's just a REST client, which we can go ahead and make requests with. Just go over to this site

here, grab the postman collection and import it into postman. And you should end up with something like this. And you can see here I've called this MeliSearch e-commerce. Once you've got that into postman, you can go over to the variable section and set up your variables here. So the really important one, the URL should be set by default is the index. You want to set the index here

to product. Now, to test this out, just to know that you've got this working, you can head over to the document section or even the search section and go ahead and search in an index. So that will fill in the index UID, which is product. And if you hit send on that, you should get a list of results back. Now, at the moment, the query is set here by default. If we get rid

of that query and send a request, you can see that we've got our two products being pulled in. This is just a way to access this rather than doing this through the dashboard because we're going to need to send some requests through to update some things within postman. So first step, getting that into postman and then we can move on. OK, so let's talk about the facet distribution.

Before we do anything, though, let's go ahead and grab the raw collection back for products. Now, by that, what it's going to do is grab the underlying result that Laravel Scout will have been given by the Mellis search API. And let's just die dump on this just so we can see what we get. So let's die dump on products, come over to our site, give this a refresh. And there we go.

So this is what Laravel Scout will get back from Mellis search. And then it will go ahead and look these up by their ID and give you back the collection that we've already seen. This is essentially what we want to end up with because we want to be able to pluck out the facet distribution and the facet distribution is going to be the distribution of color, size or any of the other

properties that you have. And it will tell you how many products have black, how many products have white, how many products have this particular size. And it will give you all of that information. So as you saw from the introduction, when we do get over to showing them categories, you can show how many products exist within each of them categories as well. That's something that's going

to be really tricky to do directly within our app, at least without adding way too much code. So let's go ahead and say to Mellis search the facet distribution that we want. Now this isn't going to be perfect at the moment because if we just go ahead and say facets distribution, what we want to do is set that to size and color. Now we're hard coding this in at the moment,

which isn't ideal. So we need to refactor this later to pull the available options a little bit later on. That's fine. Now, if we just go over and give this a refresh, we're going to get an error. So we've got invalid facet distribution. The fields size and color are not set as filterable. That is where Postman comes in. So if we come down to settings here

under sub routes and we come down to update, I think it's actually just in here. So yeah, update settings. What we can do here is we can set the filterable attributes. So once again, we're going to go ahead and set this to size and color. Let's get rid of the others because these aren't useful at the moment. And let's hit send on that and send that through. So now when

we come back to our app and we give this a refresh, yeah, we've got category IDs is not filterable either. So let's go ahead and add that in there. Category IDs send. And there we go. So now what we've got is this facets distribution with color and size in here. And once again, we've had to hard code this into Mellis search. There are ways around that, for example,

sending a periodic request to Mellis search to add the filterable attributes, which again, we can look at a little bit later. But we want to get this working. First of all, before we think about the maintenance, you might even have a store where these different things don't change that much. So you might only have colors and sizes, in which case you just go ahead and manually

update your index. So if we open up color, you can see that we've got black, rainbow and white. And the number that you can see here are the number of products that each have this specific property. Same with size. We've got one size 12, one product that has size eight and one product that has size nine. Now, I'm aware that we only have one product of each that has these sizes

at the moment. We can go ahead and tweak this in the database just so we have some different data to work with. So why don't we go ahead over to variations and also add rainbow in here to that other product. So let's add it to Nike Air Force One as well. And let's go and just leave it at that for now. In fact, we'll add a size under this.

So let's have a size 12 under that as well, just so we've got something to play with. So that's going to be product one and size 12. We're going to have, say, DEF. Have we already got that? Yeah. Let's say LMN. And the parent ID for that is going to be nine because that size 12 is going to come under rainbow here and we can leave the order as it is.

So now when we re-index this, let's go back over and re-index our product. And we now come over and have a look. We see that the size 12, that size 12 belongs to two products and the color rainbow belongs to two products as well because we've applied it to Nike Air Force One and Nike Air Force Two. So we can play around with this. But the most important thing is we've got the

facets distribution, which really, if you think about the structure of this array, we can just iterate through this inside of our product browser and show color as the header and then black, rainbow, white as the sub things, the options, and then the number next to it. So really, we just want to kind of pluck that data out now and then show it. And again,

this here we would have to hard code for now, but that's absolutely fine. Now, the only problem we've got now is that because we're grabbing this raw data and we need to grab the facet distribution from this raw data, what we are now ending up with is not an iterable list of products. If we come over here and give this a refresh, we're trying to call

count on an array because we're getting back the raw array from MeliSearch. So what we're actually going to have to do now is go ahead and get rid of this filter, but relook these products up within the category that we've chosen by the IDs. Now, if that sounds complicated, let's just take this very slowly. So we're going to go ahead and create a products variable here. And we're going to go

ahead and say this category products. And we're going to find in that category a list of the products and get back a collection. So essentially, what we want to do is inside of search, if we just die dump and call this search on here, we want to from these hits, which are each of the results that we get back, pluck out this ID, pass them into find, and then that will relook them up in

the database much like Scout does by default. So what we'll do is we'll go ahead and collect up search hits. And then from that collection, we'll then pluck out the ID, pass that into find. And what we should end up with if we just die dump on products and get rid of this is much like what we had before. So it's just an extra step just because we're requesting the raw

data back from here. We unfortunately have to do this. So we could technically get rid of that just to save the extra filter. So you can see that we've got two. If we come over to Nike new in, we've only got one. So we'll go ahead and remove that just to make it make a little bit more sense. Now, if we get rid of that die dump and we come back here, we end up with exactly the same thing

over in Nike. We've still got two products. So we're back to how we are. But now what we can do is we can pass down the filters to this live wire component, which we want to output. And we know that is from search and facets distribution like so. So let's go over to the product browser. And let's go to where we're going to actually output these filters,

which is here or down here. So inside of here, we'll do a for each on filters as and we want the key, which is effectively the title. So if we just think back to what we had. So if we come over to product browser and just die dump on search and facets distribution, we've got the title of the filter and then each of the options underneath that

filter. So that's kind of what we're aiming for. We'll leave that in there so we can refer back to it. So we've got the title of the filter just here. So let's call that title just so it makes a little bit more sense. And then the filter itself underneath that. So let's go ahead and end that for each there. And we can actually fill in the title here now. So let's go ahead and say

title. And we should start to see something coming together that looks a little bit like what we want. So we've got color and size in there. Now, the only option with this, the only problem with this title is that it's always going to be lowercase. So what we're going to do is we're just going to use Laravel string helper to title case this just so it looks a little bit more

presentable. We could always map that to something we have in config if we wanted. We'll see what we can do with that later on. Now we've got that, we can iterate through each of these. So we can do a for each here. And we can say for each filter as option and then count. So let's just refer back to what we have. So we can see. And let's just, yeah, we'll keep that where it is. Let's just go

ahead and pull this back. This is going to be the option itself. And this is going to be the count of how many we have in there. So now what we can do is fill in the variation type. So let's go ahead and get rid of this and say option. And then here we will say count. And there we go. So we now have our filters in there. And when we click on them, we'll of course send the request through to

actually filter these by the color and the size. So there's a little bit of a spacing issue here. So let's bring this space y1 into this for each here. That makes a little bit more sense. And just make sure all of that is pulled in and pull these two in as well or this whole block in. And there we go. So we're spacing it out correctly now with our CSS. So they are our filter options

a really long way of going around this. But we now know that the filter options that we get out are always going to be the filter options that are within that facet distribution inside of Mellasearch. So next time we go ahead and add another color option and we index that, which will happen automatically with Laravel Scout, that color will always be available inside of here.

Okay. So now that we've got the filters out of here, of course, the last thing to do is actually be able to click on them and filter by the available colors and sizes and whichever other variation types that you have. And also we're going to look at filtering by price. We'll look at them two things in the next two episodes.