Search code examples
javascriptalgoliainstantsearch.jsinstantsearch

Algolia: Change label of currentRefinements item

I'm using a toggleRefinement widget to check if an item is on sale. There is an extra attribute in my index called on_sale. It has true or false value.

As a result my currentRefinements widget shows true or false instead of a better text like "Only on sale".

Is there a way to change the output?

Unlike other widgets, there is no template attribute for this one. See docs

This is my current code:

instantsearch.widgets.toggleRefinement({
  container: '#onsale',
  attribute: 'on_sale',
  templates: {
    labelText: 'Only on sale',
  },
}),

This is my current output:

<ul class="ais-CurrentRefinements-list">
    <li class="ais-CurrentRefinements-item">
        <span class="ais-CurrentRefinements-label">On_sale:</span>
        <span class="ais-CurrentRefinements-category">
            <span class="ais-CurrentRefinements-categoryLabel">true</span>
            <button class="ais-CurrentRefinements-delete">✕</button>
        </span>
    </li>
</ul>
Solution

  • The template option doesn't exist but you have the possibility to control the output of the widget with the connector API (doc). You can render the widget with whatever output. You have complete control over it.