Can't get the refinementList showMoreText template function to work correctly

I am using the refinementList widget with vanilla JS and have the following template defined for the showMoreText:

refinementList({
showMore: true,
showMoreLimit: 20,
templates: {
showMoreText(isShowingMore) {
return isShowingMore ? “Less” : “More”;
}
}
})

The toggle button always shows “Less” even when toggling the button to show more/less items. When debugging the code, I can see the value of isShowingMore is correctly changing between true and false but the button text in the UI is always showing “Less”.

What am I missing here? Thanks.

Hi @jason5

Having had a look at your code, the issue you are having is due to the parameter that is passed to the showMoreText function, which isn’t actually a boolean. When looking at the value of it within the function it is an object which has a property value for isShowingMore, which is a boolean.

So if you want to use the function you would need to change it to be:

showMoreText(isShowingMore) {    
return isShowingMore.isShowingMore ? 'Less' : 'More';
},

When you use the string notation, this is then a boolean value so you can define the text as shown in the documentation: refinementList | InstantSearch.js | API parameters | API Reference | Algolia Documentation.

Let me know how it goes and if you have more questions.

Best regards,
Mike

Cool - thanks so much for your help.