Can you use a single refinement/facet list component to drive multiple result lists?

[tombburnell]

I want to have multiple lists of results on my home page “Trending”, “Top Sellers” "editor picks" etc..

And I’d like to have a single multi-select facet control for “Genre” so that when the user selects the genre’s they are interested in, all result lists update to show only products in those selected genres.

I'd also like to store their selections for their next visit.

Is it possible and how would you structure it?

Thanks!

[Haroenv]

Indices inherit top-down. So if you have compatible index formats, you can have this layout:

instantsearch().addWidgets([
  refinementList(),
  index().addWidgets([hits()]),
  index().addWidgets([hits()]),
]);

[tombburnell]

oh cool - how would that look in react?

[Haroenv]

In react that looks very similar:

<InstantSearch>
  <RefinementList>
  <Index>
    <Hits/>
  </Index>
  <Index>
    <Hits/>
  </Index>
</InstantSearch>

This way the refinements of the refinement list will apply to all indices which are lower in the tree