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

TradingboTradingbo Posts: 21Member

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,

Best Answer

Answers

  • TradingboTradingbo Posts: 21Member

    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 %}
    
  • LucienVersendaalLucienVersendaal Posts: 23Moderator, Lightspeed Staff moderator

    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 %}
    


  • TradingboTradingbo Posts: 21Member

    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 %}
    


  • TradingboTradingbo Posts: 21Member

    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!

Sign In or Register to comment.