@colevalleygirl (Helen Wright) posted a new topic, subject "Instanserach refinementList Item template". It read:

   Using instantsearch.js via the WordPress plugin., and I'm trying to style the items in a refinementList.in PHP
    [code] 
        `/* 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}})',
                   },
            })
        );'
        
    [/code]
    
    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.

So @cindy.cullen (Cindy Cullen) replied

    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.

So @colevalleygirl (Helen Wright) replied

    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.
    [code] 
        instantsearch.widgets.refinementList({
          // ...
          templates: {
            item: `
              <a href="{{url}}" style="{{#isRefined}}font-weight: bold{{/isRefined}}">
                <span>{{label}} ({{count}})</span>
              </a>
            `,
          },
        });
        
    [/code]
    
    The first facet has no item template defined. The second has the above item template.

So @colevalleygirl (Helen Wright) replied

    For anyone interested, this is the code that finally worked
    [code] 
        /* 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>',
        						},
        					})
        				);
    [/code]


{'source': 'discourse', 'url': 'https://discourse.algolia.com/t/instanserach-refinementlist-item-template/10309', 'title': 'Instanserach refinementList Item template', 'views': 1377, 'has_accepted_answer': True, 'word_count': 302, 'like_count': 1, 'reply_count': 1, 'participant_count': 2, 'posts': 4, 'tags': 'instantsearch wordpress php', 'author': '@colevalleygirl (Helen Wright)', 'participants': '@colevalleygirl (Helen Wright), @cindy.cullen (Cindy Cullen)', 'image_url': [None], 'created_at': '2020-06-22T13:51:08.480Z', 'last_posted_at': '2020-06-24T06:21:08.903Z'}