In this episode, we start hooking up our product filters to work with Livewire. First, we set up an array in our ProductBrowser component to keep track of the active filters, since we're going to eventually need to pass this array to MeiliSearch in the next episode.
We walk through the process step-by-step:
- Grabbing all product variations (like color and size) from our category's products and flattening them into a single array, so we know all the options available for filtering.
- Grouping these variations by their type, which lets us create a nice data structure like
{ color: [...], size: [...] }
.
- Building out our filters UI in the template and making sure each checkbox and label is uniquely hooked up, so clicking the label will toggle the checkbox.
- Wire up each checkbox to our Livewire filter state using
wire:model
, so whenever a user toggles one of the filters, our filter array automatically updates.
- We see this in action by dumping out the filters and clicking around. Now, when you select "black" or "rainbow" for color, for example, you see those values pop into the array in real time.
By the end, we've got a solid Livewire setup for our product filters, ready to pass them off to MeiliSearch to actually filter the product results in the next episode!