Show text according to product tags like liquid contains syntax

Hi everyone,
I would like to apply the same logic that I have in my Shopify Product Grid to display a certain text if the product has specific tags.
For example, if I have products with ‘sale’ or ‘new arrival’ tags, a pink text is displayed above the product_vendor, as shown in the attached image.

product

In my liquid file, before installing Algolia, I used the ‘contains’ to filter when to display the text, but I didn’t find in the Algolia documentation what would be the relative from algolia/hogan.
This is the logic in my liquid file:

{%- assign top_title_text = “” -%}
{% if product.tags contains “seasons-best” %}
{%- assign top_title_text = “SEASON’S BEST” -%}
{% elsif product.tags contains “sale” %}
{%- assign top_title_text = “HOT-SALE” -%}
{% elsif product.tags contains “new-arrival” %}
{%- assign top_title_text = “NEW ARRIVAL” -%}
{% endif %}

How can I apply the same in the algolia_instant_search_product.hogan.liquid? Maybe using the [[tags]]

Thanks in advance

Hey @fernando! I’m not too familiar with our Shopify integration or Hogan in general, but it looks like Hogan as a templating language doesn’t have a concept of complex conditionals (I think it just evaluates if a variable returns true/false

One thing you could do is define a Hogan Helper to take the tags and run through the logic your mentioning here and then return the proper string

In assets/algolia_helpers.js.liquid you should see the default helpers (i believe), you can then add a helper that runs any JavaScript you want:

algolia.helpers = {
  tagPrint: function (tags) {
   if (tags.includes('seasons-best') return "SEASON'S BEST"
   if (tags.includes('sale') return "HOT-SALE"
   // etc.
  }
};

There may be better JS for this sort of thing, but that’s the rough idea. Then you’d call it in your template

[[# helpers.tagPrint ]]
  [[ tags ]]
[[/ helpers.tagPrint ]]

Again, not super knowledgeable in this area, but you can look at this doc for a bit more information: Rendering and Templating Languages | Shopify | Algolia Documentation

1 Like

Thank you so much for the help Bryan! :+1:

1 Like