Using HUBL for calculated inline CSS

Amit_95
Member | Platinum Partner

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

 

 

0 Upvotes
1 Reply 1
MFrankJohnson
Thought Leader

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

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

- see Operators & expression tests

 

Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Visit

 

Hope that helps.

 

Be well,
Frank


Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

0 Upvotes