Dynamic Multiple Filters

Hey guys,

Currently, I am working on a functionality for refinements in a modal. What I am trying to do is when “refine” by some attribute in this modal only change the number of results in the Apply button below and not filtering the results in the background. The filtering will happen when user clicks the Apply button. Is it possible? I am using react-instantsearch.

Cheers,
Kris :slight_smile:

Hi there,

Thanks for reaching out to us.

When user clicks a bunch of refinements, it will trigger searches with all different type of refinements. So you could just let it “refine”, and put “cancel” button which clears the refinement. Or, you can remember all the refinements when the modal pops up and the “cancel” button could restore what you had before.

https://react-instantsearch.netlify.com/examples/e-commerce/search/

The link above is one of the demos. You can run it on your mobile phone and see how it’s like.

The upside of this approach is being able to deliver instant experience to users. For some reason if you really don’t want this behavior, you might have a separate InstantSearch instance and all the refinement widgets for the modal and when “Apply” is clicked, you move things around between the modal and the main view.

Let me know what you think.

Best,

This is the exact behavior I am looking for. Is there a source code for this page?

HI @kristiankamenov1,

I believe you are looking for this: https://github.com/algolia/react-instantsearch/tree/master/examples/e-commerce

1 Like

Yes. Thank you so much. One more thing… when I open the modal and make some refine I can clearly see on the background that the results are filtered. However, when I close the modal it kinda resets the filters (they are not saved and restored to default). Do you have an idea why is it happening? I am using GeoSearch on this page too. Maybe it is resetting because of the refinements of GeoSearch?

Hi,

From what I understand, you don’t want to apply the refinements as you select them, but only once, when you click some Apply button, is that correct?

If yes, then you can do this by using the connectRefinementList connector.

It exposes a refine method which is used internally by RefinementList to trigger refinements when you click on them. What you could do is push each refinement in an array instead, then when clicking the Apply button, call refine for each saved refinement.

Does this help?

I tried already this approach but in my modal I have RefinementList, PriceSlider and etc. not just RefinementList, so I didn’t work. But, in general this can work too https://react-instantsearch.netlify.com/examples/e-commerce/search . The side effect here is that it does the filtering immediately not on Apply button. The probem I am facing right now with this approach is: when clicking on some filters in opened modal the items on the background are refined but when I close the modal the filters are cleared. I am also using GeoSearch and I was thinking that the problem maybe coming from it. It was working with ToggleRefinement but when I change it to RefinementList stopped.

Could you share a minimal reproducible example in CodeSandbox and share a link? This would be easier to understand what’s going on.

I found the problem. My modal is rendered outside of the #root component and it is not wrapped in . This is default rendering of modals beacuse I am using material-ui modals.https://imghostr.com/DrfQkecRz

Hi @kristiankamenov1, I’m glad you found the problem! Did this completely solve your issue or are you still having issues?

Yes, thank you so much guys. Just wanted to ask one more thing… How can 2 nested InstantSearch widgets “communicate” between each one. I mean how outer InstantSearch can show the items from the inner one?

Hey Sarah,

I am facing the same problem regarding facets implementation. Could you please let me know that how can we use REFINE function for multiple facets at the same time, when I say multiple facets then I mean different facets attributes which in my case is colours and size. I want to apply all the facets when user has clicked on the APPLY FILTERS button on my search page.

Thanks,
Naman