Algolia - Edit filter position in Magento2 template

Question

I'm using the Algolia plugin for Magento2. I'm trying to style my instant search results page like the below site:

https://www.modaoperandi.com/search?categories%5B%5D=bags

In the above link, certain filters (like category and deliver) are in the sidebar, while other filters (like designer and color) are in the top bar above the results. Is there any way for me to split the Algolia filters up like this in the template?

Answer 1

It's doable, but the extension do not support it out of the box and it requires custom tweaks of the extension.

The container of facet filters is rendered in wrapper.phtml file. And then in instantsearch.js file each facet is rendered into a div appended to this container.

So what you may do is to tweak or write your own wrapper.phtml file, which will contain a new facet container for horizontal filters. And then update instantsearch.js file to place some widgets into this new container.

But be careful then with updating the extension as when you edit the extension's files directly, you will lose those changes on the version update of the extension.