Conditional display in the hit-template

Hi

I want to use different styles based on the value of a specific Algolia Index attribute.

My rules will be something like:

  • if {{isFeatured}} == “Featured” THEN display the word Featured inside a red box
  • else if {{isFeatured}} == “Regular” THEN display the word Regular inside a green box
  • else: Do not display anything.

Could you please help to achieve this using the snippet below:

<div align="center"><font color="red"><a type="button" class="featuredbox">Featured</a></font></div>
<div align="center"><font color="green"><a type="button" class="featuredbox">Regular</a></font></div>

Appreciate your help.

Hi Steve, thanks for reaching out!

You can check the Mustache specification, especially the part on Sections and Inverted sections: you will find an example to do a template displaying something when repo has some content, and something else when repo is empty.
You should be able to adapt it to your case, displaying something when isFeatured is true and something else when it is false :slightly_smiling_face:

Thanks Paul-Louis for your quick reply.

This helped me to only display {{isFeatured}} if it exists and it’s value is NOT NULL. (This solves 2/3 of my current problem)

{{#isFeatured}}
    <div align="center"><font color="red"><a type="button" class="featuredbox">{{isFeatured}}</a></font></div>
{{/isFeatured}}

How to add a check the value of {{isFeatured}} when it it is not null to get multiple cases based on the value:

if {{isFeatured}} = "Featured" THEN <div align="center"><font color="red"><a type="button" class="featuredbox">{{isFeatured}}</a></font></div> 

if {{isFeatured}} = "Regular" THEN <div align="center"><font color="green"><a type="button" class="featuredbox">{{isFeatured}}</a></font></div>.

Regards

Hey, you’re welcome!

Indeed, using a Section ({{#foo}} ... {{/foo}}) solves the first part of your problem.
It seems however that Mustache templates has no way to check for value, as described in their specs:

We call it “logic-less” because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.

So you can only do conditional display depending on a key being there, but not depending on the actual value. This means you can either:

  • Do this logic in the front-end: for example when getting search results you could loop on each result, check the value, and change the font color with Javascript
  • Adapt your data to leverage the templates: you can update your records to have isFeatured=true|false, which would then let you do conditional display with such a block:
{{#isFeatured}}
    <div align="center"><font color="red"><a type="button" class="featuredbox">{{isFeatured}}</a></font></div>
{{/isFeatured}}
{{^isFeatured}}
    <div align="center"><font color="green"><a type="button" class="featuredbox">{{isFeatured}}</a></font></div>
{{/isFeatured}}

(In the latter case, if you have three or more featured cases (Featured/Regular/Christmas), then you can use an attribute with three boolean keys (featured.isFeatured/featured.isRegular/featured.isChristmas)

Thanks for the clarification.
I will evaluate both options and see what will make sense for us.

1 Like