Indexing product variations for filtering: Build an E-Commerce Platform

00:06

Now, what this is going to allow us to do is within our index, which at the moment is pretty simple, have lots of different properties of these different products.

00:15

So for example, Nike Air Force One, the two properties of this which we can filter on are the color and the size. And of course, that's going to vary from product to product.

00:26

You might have lots of different filtering options or lots of different variations. So what we're going to do is for our filters, we're going to pluck these directly

00:35

from the types that we have in our database. You can change this up to make it a bit more custom if you want to, but I found it just makes a lot more sense to filter

00:44

by what you already have in your database. So in our case, we're going to end up with two filters, color and size. And what we want to do is we want to index the fact

00:54

that the Nike Air Force One has black and white properties and also has these two different size properties as well. So in this episode, we're just going to focus on getting this data into MeliSearch to start with.

01:08

So if we just head over to our product model, let's go down to where we created this searchable array. So we've already got our category IDs and we've seen how we can use these.

01:18

But now what we want to do is grab the variations of this product, all of the variations, group them by their type, go through them and then output these in MeliSearch.

01:30

So let's just go and look at how we're going to do this. So to do this, we're going to merge in another array because we're going to need to pluck out and let's just actually demo this up here really quickly.

01:42

So what we're going to need to do is something like the following. This variations, we're going to need to pluck, sorry, group by the type, which is going to group

01:51

by the value that we have in our database. So color and size, which will give us two properties here, color and type. And each of these will have black and white and type

02:05

or in this case size, sorry, not type, will have eight and nine, for example. So what we want to do is group it by the type, map through it and then output this data to MeliSearch.

02:17

So because we're going to be doing this, the best thing to do would be to merge in another array, which will be the result of that query that we're making and then go ahead and cast it to an array.

02:29

So let's go ahead and get started on this. So let's say this variations and group by type. And let's pull this down so it makes a little bit more sense.

02:41

And now what we're going to do is map through with keys. So let's create out a callback in here. That's going to give us each of the variations and the key.

02:55

And then from that, we're going to return an array and we are going to include a key here, which is going to be size or color, for example. And then we're going to end up with an array here

03:09

of the different colors that we have. So effectively what we're going to do is for each product, we're going to have this color and size in here with all of the different options

03:20

for that particular product. So we group by type to get this out by this key, either color or size. And then we want to iterate through each

03:29

of the properties of that and then output them. So from this array, then what we want to do is output the key here. So we're building up pretty much a new array

03:40

and that's why we map with the keys because we want to include these keys in here. And we're going to say variation. And of course we want something like

03:48

for if this key in this iteration was size, we want eight and nine, but we don't want to iterate through them. So once again, we can make use of pluck,

03:58

which will pluck out then properties of that collection and we can pluck that by title. So let's go ahead and index this and just see what we end up with.

04:07

So we're going to go ahead and let's flush it first and then re-import it. And yeah, so we've got a error here and it looks like map with keys doesn't exist.

04:20

And yeah, that's map with keys, not map with key. That would make sense. So let's go ahead and import them and yeah, we get another error here.

04:27

So let's just check this out and argument two must be type of type array. Ah, of course, yeah. So we mapped through this fine,

04:35

but what we're trying to do is merge in a collection. So the last thing that we want to do on this is just cast it to an array so we can merge it in properly.

04:43

So we should be there. Let's go ahead and import this and there we go. Okay, let's come over to MeliSearch

04:48

and see what we've got here. So you can see now that we've got a color here, black, white, and we've got a size 8998. Now ignore the fact that that's duplicated for now.

04:59

We can fix that up later and it's not going to affect our faceting whatsoever because each of these is unique so it doesn't matter too much.

05:08

But you can see what I mean. Now we know the properties or the available properties of each of these products. Two colors that we can have for this

05:16

and the two sizes in this case four, but we can ignore the fact there are duplicates of this as well. Now this one doesn't have any

05:23

because we haven't added them to the database. So it'd probably be a good idea at this point to just add a few more variations in here just so we can start to see them

05:33

other filters come through. So what we want to ideally do is create something wildly different to the product that we've already got.

05:41

So let's duplicate down black and let's associate this with the second product that we've got and let's do something completely weird

05:49

like rainbow for example. And that's again going to be color. So that's the color property of that. And then let's just add one size under rainbow.

05:58

So let's just duplicate a size down make sure that's associated with the second product but really importantly for the parent ID make sure that that reference is rainbow

06:07

which is an ID of seven and we'll just set the order to one here. So we've got one, we'll set that to two actually cause that would make sense

06:15

and we'll just say X, Y, Z for the SKU it doesn't really matter. And again, this is still the size. So for the actual size itself

06:24

let's set this to something like 12 just so it's different to the ones that we've already got. So let's save that out. We can test this out actually now

06:32

if we just come over to our Nike Air Force 2 you can see we've got rainbow which is currently out of stock. Let's just add some stock in there

06:40

just so we can play around with this. So let's add to remember the last variation, which is 12. So add 10 in there for that and let's go over and give that a refresh.

06:50

So we can select rainbow and we can select size 12 and technically add that to our car and eventually check out with it. But that's not the point.

06:59

We now want to go ahead and re-index this data. And if we come over to MeliSearch we now know that the properties or the available properties for this particular shoe

07:10

are rainbow and 12. So that is what we have done. We have indexed all of the available colors and the available sizes

07:19

for each of the products we've got. Now what we can do is we can pluck out all of the different colors, add them as options over in our filters

07:29

and then of course add in all the sizes under them as well and kind of merge them together. So when we click on them, we can then filter through when we search

07:39

to only pull back products that have the color or the size or any other variation type you've got inside of our MeliSearch index. So now that we've got that in there,

07:50

the first step is to pluck all of this data out and actually show the filters before we start to filter on them. So let's tackle that in the next episode.

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

Episodes

Transcript

Episode summary

Episode discussion