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>
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.