Custom template for list of Current Refined Values

I would like to know if there is a way to customize the template for the item in the currentRefinedValues widget. I would like to have control over what gets linked inside the item template. Currently when using the item template, you can only control what is inside the .ais-current-refined-values--link div

Current output:

<div class="ais-current-refined-values--item">
<a class="ais-current-refined-values--link" href="{{url}}">
	<div>{{name}} <span class="ais-current-refined-values--count">{{count}}</span></div>
</a>

Desired output:

<div class="ais-current-refined-values--item">
<a class="ais-current-refined-values--link" href="{{url}}">X</a> <div>{{name}} <span class="ais-current-refined-values--count">{{count}}</span></div>

Sorry, but with the widget you can’t have control on what gets linked in the template. You can control only what is rendered inside the link. But if you really want full control of the rendering you can use the CurrentRefinedValues connector.

Hello @razvan.horeanga,

What @samuel.vaillant is correct, but since I’m looking at your desired output it looks like you want to put an “X” before each items? If that is the case, you can also maybe use some CSS like:

.ais-current-refined-values--link div::before {
  content: 'X';
  display: inline-block;
  [...]
}

Is that answering your answer? Feel free to ask us anything else.

Cheers, Maxime.

This is exactly what I needed! Thank you.

Hi Maxime, thanks for your input - Samuel’s answer is exactly what I needed :slight_smile:

I’m glad we could help, have a nice day :slight_smile: