Sorting refinement values feature

We have implemented algolia search on our site and are looking to further enhance it. We would like users to be able to click an icon that changes the sort order of the items in a text refinement widget.

image

For example if they click the down arrow icon this will re-sort the facet list by name in descending order. We’ve found a couple of hacky ways of doing this by I’m wondering if there is a way to force algolia to re-render the refinement widget with the new sort order?

Hi James,
I’m assuming that you are using InstantSearch.js, let me know if it’s not the case.

The refinementList widget has a ‘sortBy’ parameter which accepts a sort function. https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/#widget-param-sortby
So you could implement this function to make it return a different sorting when the user clicks on the sort icon. Only be aware that this sorting is only front-end.

The sorting function works the same way than the standard Array.sort() function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Don’t hesitate to let us know if it helps, and what hacky way you had explored on your way :slight_smile:

1 Like

@sylvain.bellone Yes we are using InstantSearch.js. Could you just clarify how we would make the refinement list re-render the new order using JavaScript?

We could build a function that renders the refinement ourselves with the new sort order but i’d prefer to try and see if there is a more native way of doing it.

At the moment the hacky way is to remove the refinement and create it again with the new sort order specified. It works but it’s not a very nice experience as it causes the results to reload, once when the refinement is removed and a second time when it is added back in.

Ok, I’ve checked and there is currently no built-in way to do it with the default widget.
Removing and re-adding the widget will indeed clear the selected refinements, I hadn’t think of that.

So the only way to achieve what you want for now is indeed to build your own refinement widget: https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/#connector