Create same refinementList for multiple Instantsearch instances

Open Q&A
#1

Hey there!

So I’m trying to show catégories in a page from the same set of items, 3 categories actually.
Here an example:

image
image984×983 129 KB

So Ihave 3 instances of intantsearch, and I’m trying to have the same refinement list (The languages), for the filter to apply on all 3 catégories.

The issue is that when I try to add the same refinementList to all my instances it just works on the last instances when I filter, and not all.

I tried to search on the internet, but I cannot seem to find a way to do it.

Maybe I need to only have once instance that can create 3 categories I don’t know. Thanks for your help !

#2

Hope this helps…

You could try to combine the 3 instead of having 3 separate calls. Then you should be able to add additional searches just as any other widget. These will then update as you change facets.

I found this while actually trying to get multiple searches to use the same filter list but make them as ORs between categories instead of ANDs. Still haven’t solved that yet.

You could try something like this inside your search deinition.

search.addWidgets([
      instantsearch.widgets
                    .index({indexName: ALGOLIA_INDEX_NAME})
                    .addWidgets([
                        instantsearch.widgets.configure({
                            relevancyStrictness: 0,
                            getRankingInfo: true
                        }),
                        instantsearch.widgets.hits({
                            container: '#dym',
                            templates: {
                                item: `
                                    <li>{{name}}
                                    <br>{{_rankingInfo.userScore}}
                                    <br>Matched: <span class="ais-RefinementList-count">{{_rankingInfo.filters}}</span>
                                    {{YOUR_OTHER_FIELDS_HERE}}
                                    </li>
                                  `
                            }
                        })
                    ])