Instanserach refinementList Item template

Using instantsearch.js via the WordPress plugin., and I’m trying to style the items in a refinementList.in PHP

`/* Skill level refinement widget */
search.addWidget(
    instantsearch.widgets.refinementList({
        container: ‘#facet-skill-level’,
        attributeName: ‘taxonomies.skill_level’,
        operator: “or”,
        sortBy: [‘name:asc’],
        limit: 10,
        templates: {
            header: ‘<h3 class=”widgettitle”>Skill Level</h3>’,
           item: ‘{{name}} ({{count}})’,
           },
    })
);’

This gives me name (count) but how do I get an a checkbox on the front to allow the item to be selected/desselected.

My first time working with Algolia so forgive me if it’s a stupid question.

Hi @colevalleygirl, the checkbox should be there by default. See this codesandbox starter template.

I believe your issue may be related to how you are using the item in the template.

Sorry, but I don’t understand what you’re saying. The checkbox is there by default unless I create an item template for the refinementList. Whatever I put in that item template, the checkbox vanishes.

For example, if I use this code? No checkbox, although it changes the way the item is displayed, so it’s clearly taking effect.

instantsearch.widgets.refinementList({
  // ...
  templates: {
    item: `
      <a href="{{url}}" style="{{#isRefined}}font-weight: bold{{/isRefined}}">
        <span>{{label}} ({{count}})</span>
      </a>
    `,
  },
});

itemtemplate

The first facet has no item template defined. The second has the above item template.

For anyone interested, this is the code that finally worked

/* Skill level refinement widget */
search.addWidget(
	instantsearch.widgets.refinementList({
	    <snip>
	    templates: {
		header: '<h3 class="widgettitle">Skill Level</h3>',
	item: '<input type="checkbox" class="ais-refinement-list--checkbox" value="&nbsp; {{label}}" {{#isRefined}}checked="true"{{/isRefined}}> {{label}} <span class="ais-refinement-list--count">({{count}})</span>',
						},
					})
				);
1 Like