In this episode, we focus on getting our filter options out of MeliSearch so we can display them for users to pick from, like color and size. Instead of going straight to our database, it's way quicker to ask MeliSearch directly for something called the facet distribution. That tells us, for each available filter (like color), what options exist and how many products match each one.
To get started, we use Postman—a handy REST client—to interact with the MeliSearch API. Here, we set up our environment, test our connection, and get the raw search data back so we know exactly what Laravel Scout is working with under the hood. We run into an initial hiccup: MeliSearch complains that our filter fields (color and size) aren't set as filterable, so we quickly fix that by updating our index settings via Postman.
Next, we double-check that our facet data looks right, even tweaking our database a bit so we have products with overlapping colors and sizes. Once our facet distribution is coming in correctly (showing how many items are available per color/size), we move on to making this data usable in our product browser UI.
There are a couple of technical considerations, like making sure we get our product collections back the right way, handling the raw data, and mapping IDs to Eloquent models. Once that's sorted, we use Livewire to loop over our facets and dynamically display the available filter options—now our users can see all filter categories and their counts right in the interface.
We leave off with the filters nicely displayed and ready for clicking, setting us up for the next episodes, where we’ll handle making them interactive—actually applying the filters and also filtering by price.