How to vary HTML for products within a specific category{by ID}?

Tradingbo

Hi Support,

Relatively new to rain/twig and LS in general and enjoying the platform so far.

Trying to vary content in our product.rain file depending on which category a given product is in.

For example:

<ul class="flex no-list">
   {% if product.category_id == '8727568' %} 
   {# UPCOMING EVENTS #}  
      <li class="tb-product-tab-title1 tb-product-tab-titles active"><h4>About Gig</h4> </li>
      <li class="tb-product-tab-title2 tb-product-tab-titles"><h4>Ticket Info</h4> </li>
      <li class="tb-product-tab-title3 tb-product-tab-titles"><h4>Reviews</h4> </li>
    {% else %}
    {# FURNITURE #}
      <li class="tb-product-tab-title1 tb-product-tab-titles active"><h4>Description</h4> </li>
      <li class="tb-product-tab-title2 tb-product-tab-titles"><h4>Delivery Info</h4> </li>
      <li class="tb-product-tab-title3 tb-product-tab-titles"><h4>Reviews</h4> </li>
    {% endif %}
</ul>

This works great when targeting products directly by ID:

<ul class="flex no-list">
   {% if product.id == '92299045' %} 
   {# UPCOMING EVENTS #}  
      <li class="tb-product-tab-title1 tb-product-tab-titles active"><h4>About Gig</h4> </li>
      <li class="tb-product-tab-title2 tb-product-tab-titles"><h4>Ticket Info</h4> </li>
      <li class="tb-product-tab-title3 tb-product-tab-titles"><h4>Reviews</h4> </li>
    {% else %}
    {# FURNITURE #}
      <li class="tb-product-tab-title1 tb-product-tab-titles active"><h4>Description</h4> </li>
      <li class="tb-product-tab-title2 tb-product-tab-titles"><h4>Delivery Info</h4> </li>
      <li class="tb-product-tab-title3 tb-product-tab-titles"><h4>Reviews</h4> </li>
    {% endif %}
</ul>

Targeting by product ID in this case however isn't ideal as our store has hundreds of products.

I can see on the Dev Toolbar that the category ID is available for use on the product pages:

Can anyone point in the right direction re: the syntax for this as an {% if %} statement?

As a designer new to LS/Twig & Rain I really feel like the documentation is missing basic examples on how to express variables when making simple queries like this.

A few more examples on the variables page might go a long way to encourage new users to invest in the platform and help build the community.

Thanks,

Milesbd

Hi, and thanks for the questions!

Unfortunately, the loop is necessary to look inside the array of the categories, and verify that one of the category's id matches the ID you are looking for. The only alternative to having less code would be specifying the position of the expected ID, which is not recommended as the positioning may change in the future:

For example on the product page, if the ID is in the first position within the array:

{% if product.categories[0].id == '8727568'%}

Would refer to the first position in the array, and only look to see if the category with this ID is at first position, on the product page.

In regards to your question about the "abbreviated hooks". There is not a list of abbreviations, as they are a user-defined variables declared inline during the for loop. The structure in plain english is simply:

{% for declared variable in theme.variable %}

The syntax we use as an abbreviation is just for clarity, and can be swapped with any user defined variable. For example, using the loop you provided:

{% for cat in product.categories | limit(1) %}  

    {% if cat.id == '8727568'%}          

    {% else %}
    
    {% endif %}

{% endfor %}

The abbreviated hook could just as well be "asdf":

{% for asdf in product.categories | limit(1) %}  

    {% if asdf.id == '8727568'%}          

    {% else %}
    
    {% endif %}

{% endfor %}

And the loop would work the same, as it is using a user-defined variable

Tradingbo

Found a fix but it's not ideal:

Using the product.brand.id variable you can achieve similar results if you specify a brand inside a selected product...

Still curious to know why this isn't available as a variable for category IDs of products however.

{% if product.brand.id == '3402022' %}  
    <li class="tb-product-tab-title1 tb-product-tab-titles active"><h4>About Gig</h4> </li>
    <li class="tb-product-tab-title2 tb-product-tab-titles"><h4>Ticket Info</h4> </li>
    <li class="tb-product-tab-title3 tb-product-tab-titles"><h4>Reviews</h4> </li>
{% else %}
    <li class="tb-product-tab-title1 tb-product-tab-titles active"><h4>Description</h4> </li>
    <li class="tb-product-tab-title2 tb-product-tab-titles"><h4>Delivery Info</h4> </li>
    <li class="tb-product-tab-title3 tb-product-tab-titles"><h4>Reviews</h4> </li>
{% endif %}

LucienVersendaal

Hi @Tradingbo ,

What you need to do is to build a {% for %} loop to get all categories first. After you have done this, you can get the category id and make the {% if %} statement.

See below:

{% for cat in product.categories %}  
 {% if cat.id == '123456'%}
  <h2>Show data</h2>
 {% endif %}
{% endfor %}

Tradingbo

Hi Lucien,

Thanks for the response. Yep I understand that you would need to loop through category arrays as most products would have multiple categories, however it would be useful to have product.category.id variable to filter whether a product has a specific category within it's array.

Would save a bit of code and also be useful for when products only have one category such as in our case?

Also in a lot of the threads on here I've noticed support and devs using abbreviated hooks. E.g. category = cat , subcategory = sub

Can't find anything in the documentation regarding this, have you guys got a link that explains which hooks are abbreviated and a list of which are available?

Many Thanks,

Btw if this is useful to any other new users... if you want to filter a product by category within the array but only want your content to render once. You have to limit the array as in:

{% for cat in product.categories | limit(1) %}  

    {% if cat.id == '8727568'%}          

    {% else %}
    
    {% endif %}

{% endfor %}

Tradingbo

Ah brilliant. That makes a lot more sense if the first variable is user-declared in {% for %} statements.

This threw me off a bit in the documentation:

Assumed some variables were already globally set somewhere I couldn't locate.

Thanks for the quick response!