Using HUBL for calculated inline CSS

Highlighted
Occasional Contributor

I have a tabbed module which by default, shows 6 products. However, when another tab is clicked, it shows 4 products. I.e.

  1. Tab Compare all products shows six items.
  2. Tab Business only shows four items (because there's only four business products).

 

Based on this, I'm trying to set the width of the container based on how many items are in its container. I have the PHP for it, but stuggling to convert it into HubL:

 

$productWidth = 'calc((100% / ' . $numberOfProducts . ') - (5em / ' . $numberOfProducts . ') - 4px)';

HubL:

 

 {% for item in module.products %}

      <!-- Check how many products exist in total (6) -->
      {% set numberOfProducts = loop.length %}
      
      <!-- Check how many business products exist (4) -->
      {% if item.this_is_a_homeowner_product %}
        {% set numberHomeowner == loop.index %} 
      {% endif %}
    
      {% set first_calc = (100 / numberOfProducts)  %}
      {% set second_calc = ('75' / numberOfProducts) %}
      {% set calc = first_calc - second_calc %}

      {% set productWidth =  (first_calc - second_calc) - 4px %}

      <div class="containerProducts" style="width:{{ productWidth }};"> </div>

{% endfor %}

 

 

Reply
0 Upvotes
1 Reply 1
Community Thought Leader

Have you tried to remove the single quotes, so your code reads ??

 {% set second_calc = (75 / numberOfProducts) %}

- see Operators & expression tests

Hope that helps.

 

Best,
Frank

 

MFrankJohnson-dot-com-HubSpot-Community-banner-gif-v20190817

Reply
0 Upvotes