Advice on refinement list output

Hi there,
I’m using instansearch.js in order to use urlSync.

In Instansearch.js, Is there a way of making the refinement list output exactly the html I need? ( I need to specify my own template due to being tied to a CMS).

I’ve seen a few potential solutions on various forums but some seem quite convoluted. Is there a simple way to specify the code for each refinement item and have the check box still function as usual when the user selects one?

I’d prefer to use instantsearch.js rather than having to dig into the helpers if at all possible.


Hi @c.d.beard

Unless I didn’t understand what you want to achieve, I believe you can do it with

RefinementListTemplate option

That should be something like :

RefinementListTemplates : { item: (label, highlighted, value, count, isRefined, url) => { return '<li>'+name+'(+count+)</li> } }

This is not functional but you get the spirit.

Hope this helps, otherwise could you be more specific about your goal ?

Hi thanks for the reply Pierre,

Sure I’ll put the specifics and example snippets below as well as a link to the github repo…

I have three facets in one refinement list as so:

  • undergraduate
  • postgraduate taught
  • postgraduate research

I’ve been using the RefinementLstTemplates but I can’t see how the check boxes work or how the following code can be output (please see below).

The following HTML is the required output however it’s the form__field class that is the most important (used for the styling). The other ids and names are just to tie the labels to the input etc and so I could feasibly use any value for those.:

<div class="form__field"><input name="name-study-level" id="id-undergraduate" type="checkbox" value="undergraduate"> <label for="id-undergraduate">Undergraduate</label></div>
<div class="form__field"><input name="name-study-level" id="id-postgraduate-taught" type="checkbox" value="postgraduate-taught"> <label for="id-postgraduate-taught">Postgraduate Taught</label></div>
<div class="form__field"><input name="name-study-level" id="id-postgraduate-research" type="checkbox" value="postgraduate-research"> <label for="id-postgraduate-research">Postgraduate Research</label></div>

and so here’s the test template I’m using:

item: '<div class="form__field"><input name="name-study-level" id="{{value}}" type="checkbox" value="{{value}}"> <label for="{{value}}">{{value}} ( {{count}} ) {{#isRefined}} - is selected{{/isRefined}}</label></div>'

It’s obviously a mess since the {{value}} used for the ids is not a single string (has spaces) in it but even so, I’ve tried with single strings (using a different attributeName) but it still doesn’t keep checkboxes checked when clicked. I’ve left the {{value}} in there for now so you can see my efforts though.

( I’m currently using {{#isRefined}} text to feedback whether an item is selected or not since the check boxes are not working )

Here it is on github so far -
There’s a branch on there using a connector & custom renderFn too.

You can see my many attempts at the template commented at ~line 104 here

Any help much appreciated.

I think the main issue is that I don’t understand how to render input boxes using the refinementListTemplates?


PS as I say, I still need to retain the urlSync feature.
Also, I know Vue instant search let’s me specify things with slots but so far, I don’t think urlSync works for refinements, it only does the query string , hence sticking with instantsearch.js

Hi @c.d.beard,

I made a little jsfiddle using your own code but changed it to make it keep the checked checkboxes. Does that achieve what you want?


Thanks @marielaure.thuret, that sorted it. I couldn’t see the wood for the trees :smile: