Hooking up product filters with Livewire: Build an E-Commerce Platform

00:02

So when we click on them, we filter the product. Before we do that, we're going to hook this up to an array over in our product browser so we can actually eventually pass this

00:12

to Melissa in the next episode. The reason we want to focus on this now is because we're going to need to set up this array in a very specific way.

00:21

And we'll dump some stuff out along the way just to see what we mean. So I'm going to head over to the product browser here. And just at the top, we are going

00:30

to create out a public property, which is going to store these query filters. And you can call that whatever you like if it makes a little bit more sense.

00:39

Now, we're going to come down to our template. And we're just going to go ahead and output those query filters just out in here so we can at least see what we're working with on the page.

00:49

Now, at the moment, that doesn't quite work. So let's just dump this. Or let's go ahead and say print all. That would be enough just so we get out a very, very

00:58

small bit of text representing that array. Now, the first thing that we want to do with these query filters over in our product browser is build this array up with all of the filters

01:09

we already have. And that's just because we need these in place before we start to add, say, size 2, 3, 4 to these. Otherwise, things aren't quite going to work out.

01:20

So let's go ahead and build this up when we mount this component. We don't have a mount method yet. So we can go ahead and create that out in here really easily.

01:28

And then we're going to go ahead and assign query filters to grab all of the variations and build that structure up. So we need to extract these from the products that exist within the category that we've

01:41

passed in to this component. So we're going to go into the category here. We're going to grab the products from that category. We already know that we have that relationship set up.

01:51

And we're going to pluck out the variations because, of course, those different things exist over on our variations here, color, size, and any other variations that you have.

02:02

Now we're going to go ahead and flatten that array. And let's just leave it at that for now just to see what we have. And you can see that we've got a collection here.

02:09

And if we just cast this to an array just so we can see this a little bit better, there we go. So we've got all of the variations in there. Now what we want to do is go ahead and group them

02:20

by the type. So let's group these by type. And then we want to go ahead and grab the keys. So let's go ahead and grab the keys out of here.

02:28

And again, we'll just cast this to an array just so we can see what we're dealing with. And sure enough, we've got color and size. So we can start to assign what we've chosen.

02:37

Because remember, these are multiple select. We're not just clicking on one. That would be a lot easier. But we have multiple ones of these

02:43

that need to get added to color and multiple that need to get added to size. So now that we've got them keys, we want to map through them to construct a new array that

02:53

looks like this. So color and then output an array here with everything that we need, with perhaps a key in here like 12.

03:01

And we need to know if that's been selected, so on and so forth. But we'll figure this out as we go. OK, so let's go down here.

03:09

And let's go ahead and map with keys. Remember, we used this earlier. So we actually get them keys in here. Choose a shorthand function here.

03:16

And let's grab the key in each of them. And then we'll basically just return a new array with a key as the key, which makes sense, and an empty array.

03:26

So effectively, what we're going to end up with is the following. If we, again, just cast this to an array, we end up with the following.

03:36

So we've got an array within color. Well, we've got an array with color in there as the key. And then an array of options. So effectively, what we're going to do is map color up to these.

03:46

We're going to have an array here filled with black and rainbow, for example. And then we can pass them through to Metasearch. There are, of course, different ways of doing this.

03:55

But just setting this up to start with really helps us out. So hopefully, that makes sense. If not, go through each of these steps

04:02

and just see what these do. And then you'll figure it out. And I'm just going to pull this down a little bit more, just so we can read this a bit better.

04:09

So now to actually hook this up, which happens over in our template. So we'll keep that printr on there, just so we can see what's happening.

04:16

And of course, this checkbox here now needs to represent each of the things that we're hooking up. And we've also got this label here as well. Let's just pull that down and see

04:24

if that messes with the template. And that looks fine. So this label, we also need to be able to click on as well. So let's give each of these inputs a unique ID, first of all,

04:32

so we can hook the label up. That's really important. So I think what we can do is grab the title from this, so the title just here.

04:41

So let's go ahead and do that. And we'll check this out in a minute. And then let's go and just to have an underscore, for example, just to separate this out.

04:49

And we'll go ahead and output the option in here. So let's go over and just check the markup up for this. So let's pull up our developer tools and close this off. And let's go down and just inspect one of these

05:01

and just see what we've got in here. So we've got color underscore black. That makes sense, because then we've got color as the unique kind of overall for this section,

05:11

and then the actual title of the item underneath, or the title of the variation underneath here. Now that's got a capital B at the moment, which isn't the end of the world,

05:19

but I'm gonna go ahead and use string to lower, native PHP function, just to make that lowercase, just so it's a little bit more consistent. So now that we've got that unique ID for the whole section,

05:30

e.g. the color and the size, and the individual variation, we can go ahead and put that in four. And that just means we can go ahead and click on black, rainbow, white,

05:38

and we've got that label nicely hooked up to our input. Now in terms of the value for each of these, well, that's pretty straightforward. It's just gonna be the option in here,

05:47

because we know if we have black there, black is just gonna be a unique color, same with rainbow, and the same with white. And we could do that in lowercase,

05:57

but we're gonna be sending this across to MeliSearch to compare them things that we indexed earlier. So we'll leave that not in lowercase. So I think it makes a little bit more sense.

06:07

Okay, so now it's time to actually hook this input up to Livewire. So when we click on it, that query gets updated, or that query filters property gets updated.

06:17

So let's go ahead and say wire model, and we're gonna go ahead and say query filters. Now within Livewire, if you want to hook something up, you can either do this to an individual property.

06:27

For example, if you're registering a user, you can have an email and hook her up saying wire model and email, and that would just go ahead and update that property.

06:35

But if you're dealing with an array like we've got for our query filters, and we know that inside of this query filters, we've got color and size,

06:43

that means we can do something like the following. We can say query filters dot size or dot color. So let's go ahead and do that. And we know that we can just output this here

06:56

as the title of the overall section. So now this is nice and hooked up. So if we click on black, for example, you can see black has been added to that color array,

07:05

which we mapped through and created earlier. Same with rainbow. So we can just keep creating these inside of here. And now we know that what we need to filter on color

07:14

is within this array, black and rainbow. We can do the same with size as well now, because of course we're just iterating through, so I can filter by each of those.

07:22

So now effectively what we've got is a array hooked up with the keys for each of the things that we want to filter by, and they're coming through really nicely.

07:31

So we can go ahead and get rid of our query filters just here, and we're pretty much done. We have hooked up these to LiveWire. Now, of course, what we need to do

07:40

is head over to the next episode, and when we click on these, actually send them through to MeliSearch so we can filter the products that we've got.

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

Episodes

Transcript

Episode summary

Episode discussion