Stop refinementList sorting hits upon selection

Hi,

Is it possible to select multiple refinementList items and then ‘submit’ them all at once without the results being filtered as I select the?

Hello Brendan!

You can achieve this by using connectors. What you want here is to customize the rendering so that when you click on items, it doesn’t refine right away, but adds refinement values to a list. Then, when clicking on your custom “Submit” button, you iterate on that list and send every value to InstantSearch.

Here’s an example using InstantSearch.js v3: https://codesandbox.io/s/instantsearchjs-app-cety5?fontsize=14&module=%2Fsrc%2Fapp.js

Note that this is a naive implementation. The refine method takes values but either refines or unrefines, depending on whether the value is already refined. For example, if you refine on “Apple”, then re-refine on “Apple”, it will remove the refinement on Apple. Make sure you take this into account when building your UI.

Best,

Sarah.

1 Like

Thanks Sarah! Does this work in the same of refinementLists in that if I have 4 lists I need to make 4 custom widgets? Or can I just make one custom list and init it 4 times in the addWidgets method?

Hi @brendan.betheldo, you could use the same connector multiple times as shown in this example: https://codesandbox.io/s/instantsearchjs-app-3r0bt.

Note that I moved the “Refine” button to be generated on its own in the index.html, rather than being generated in customRefinementList. This is so that only one is created. Nonetheless, all customRefinementLists are still listening for a click on that element to refine.

Hope this helps!

1 Like

Hi @maria.schreiber, that’s excellent and absolutely helps. Do you think this would cause issues if I had the default, click to refine on desktop and then the select multiple options and submit them to refine on mobile?

Sorry, I’m not sure I understand the difference between the desktop and mobile implementation.

Do you mean you would have an out of the box implementation (each selection refines results) on desktop, but use the custom implementation (wait for submit button) on mobile? If so, I think that sounds totally fine! (And in fact how I have seen UX in a few different places.)

Hi @maria.schreiber, yes that’s exactly what I mean. Thanks @sarah.dayan and @maria.schreiber for the great help!

1 Like