Widget refinementList - Color (name,hexacode)

Have the follow widget where the attribute/field color is a array of objects as follow:

  "color": [
    {
      "name": "Rosa",
      "hexa": "#FE2EF7"
    },
    {
      "name": "Azul",
      "hexa": "#0174DF"
    }
  ]

search.addWidget(
      instantsearch.widgets.refinementList({
        container: '#color_filter',
        attribute: 'color',
        templates: {
        	item(hit) { debugger; console.log(hit); return `
            	<button class="btn" group="brand" onclick="brandSelected(1);">${hit.label}<strong>${hit.count}</strong></button>
            `;
           }		
        },
      })
    );

and wanted in the template to get the color name and the color hexa code as well as the count. In case the attribute is ‘color.name’ it will get the name well but also want to get hexa code associated to that name…

if that is possible how to do so?

was able to make it work by adding in the name of color field the name and the hexacode seperated by ‘,’

  "color": [
    {
      "name": "Rosa,#FE2EF7",
      "hexa": "#FE2EF7"
    },
    {
      "name": "Azul,#0174DF",
      "hexa": "#0174DF"
    }
  ],

and the template

   templates: {
    	item(hit) { return `
        	<button class="btn" group="colour" onclick="brandSelected(1);" initialized="1"><span style="background:${hit.label.split(',')[1]}"></span>${hit.label.split(',')[0]}<strong>1</strong></button>
        `;
       }		
    },

but there must be a better way of doing this, if so please give a example.

Hi @henrique.corte,

Thanks for your question!

I’m glad to see that you got this working!

If you want to keep the attributes separate in your data, then the solution you have is probably the simplest.

The other option would be to combine the two attributes into one. You could still leave the other attributes if you need them for other reasons and just add a third attribute that combines the two:

"color": [
    {
      "name": "Rosa",
      "hexa": "#FE2EF7",
      "label": "Rosa, #FE2EF7"
    },
    {
      "name": "Azul",
      "hexa": "#0174DF",
      "label": "Azul, #0174DF"
    }
  ]

Then your refinementList could look like this:

search.addWidget(
  instantsearch.widgets.refinementList({
    container: '#brand-list',
    attribute: 'color.label',
  })
);

You can see a codesandbox here.
You could still add the template for the button.

Let us know how this works for you!
Best regards,