Use Widgets with Correlated Multi-Index Vue InstantSearch

My end goal is to output a grouped set of results with the ability to search and filter on those groupings - grouped by one of the faceted attributes. As an example, in your BestBuy demo, I’d display all product results, but in rows grouped by Category. So first row would show the first 4 hits for Movies, the next row shows first 4 hits for Computers, and so on.

The working concept Ive come up with is to have multiple index components, but all on the same index - and I just pass a different filter to each index component via query-parameters. That way each index component displays a different set of results from the same index in algolia. All are bound to one query field so typing instantly updates results for each group. (Not sure if this is the best way to achieve this, but its the best thing Ive managed to get working at all)

Is there a way to correlate another widget to all instances of my multiple index components in the page? Similar to how I bound the query field to all indexes? For example, I’d like to add a few refinement list components that affects all of the groupings as well - the same way the query field updates all index components. If they are all on the same index, but with different query-parameters, in theory, this should be possible right? Is there a simple way to achieve this? Or will this require some custom manual work?

Hi @wphillips,

We don’t have a built-in solution to sync multiple index component together. Like you said it requires a bit of manual work. You need to manually replicate the refinements from the primary index to the others. I did a small example that can gave you an idea about how to implement it. It’s a very simplistic solution that might no fit every use case. Here is the example on CodeSandbox.

Hope that helps, let me know if you have questions.

I’ll take a look at this and circle back with you next week.

I’ll also share what I ended up doing which is working “ok” for now. Would love to hear your take on what I did - altho I may change it depending on what you did in your example. I’ll definitely compare.

Thanks for the response!