Custom refinement widget for facet combinations

In an instantsearch.js UI we are building, we need to provide a custom refinementList widget that provides some options which would combine facet selections.

Say our attribute for faceting includes [a, b, c, x, y, z], can i use transformData to provide custom options like “beginning” which would select the [a, b, c] values and “end” which would select the [x, y, z] values? That’s the best direction I’ve come up with, but haven’t quite found a solution.

I haven’t quite found a thread or example that does this. Basically, providing custom refinement options that do the same thing as selecting multiple refinementList items using operator: 'or'.

So on screen options would be something like:

  • Beginning (filters [type:"a" OR type:"b" OR type:"c"])
  • End (filters [type:"x" OR type:"y" OR type:"z"])

Hi @sr4-jason,

I’m not sure to fully understand what you are trying to do. Let me rephrase your question: basically you want to “group” some facet behind a specific value. The RefinementList widget will display the “Beginning” option that will select the values a, b and c for the facet “type”. Is it correct? In case it’s not could you give us a bit more context about your use case to help us better understand the issue. Thanks!

What you describe is exactly what I want. I need to provide custom selection labels that apply 1 or more facet filter values in combination. I’ll try to illustrate by updating my initial example.

Facets

  • a
  • b
  • c
  • d
  • e
  • f

RefinementList

  • Beginning (sets facet filter to [type:a OR type:b OR type:c])
  • Middle (sets facet filter to [type: d])
  • End (sets facet filter to [type:e OR type:f])

When I use the default widget and have a list of say 10 items. I want to reduce the list of options to 6 items by providing some custom labels that join 1 or more facet values.

Hi @sr4-jason, thanks for the explanation it helps a lot!

Unfortunately there is no built-in solution to implement this behaviour. The connector API won’t help you either because the refine function cannot accept multiple value at the same time. The last solution consist to create your own widget to implement the wanted behaviour. Here is an example with static values, but the same concept can be applied with the values from the facet.

Hope that helps, let me know if you have questions.

Thanks for the follow up. I was able to shift expectations instead of the UI. That example should help lead the way when I end up needing this functionality in the future.