CMS Development

CarolineLane
Participant

Trouble with HubL If statement not working

Résolue

Hi!

 

I am trying to offer 4 colors of background for the text in columns in this email template: https://app.hubspot.com/design-previewer/246039/templates/7874717337

 

The columns are a HubL, and I am using a widget to create different color choices. My problem is, only the 2 first colors actually work (my if and first "else if" will work as expected. The rest won't...). I am not sure what I am doing wrong...

 

Here is my code for the widget: 

{% set primary_accent_color = "#1B6EE3" %}
{% set secondary_accent_color = "#34C37D" %}
{% set tertiary_accent_color = "#FFC53D" %}
{% set fourth_accent_color = "#F46C4C" %}

{% for contents in module.content %}
<table class="two-col-centered" style="line-height: 1.5em; color: #fff; ">
    <tr>
        {% if contents.text_image_orientation == 'image_right' %}
      
              {% if contents.text_background_color == 'yellow' %}
                <td style="width: 50%; padding-right: 30px; text-align: right; font-size: 12px; padding-left: 50px; background-color: {{ tertiary_accent_color }}; " valign=middle class="content img-right k-700-text-align k-700-col k-700-padding">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
   
              
              {% else if contents.text_background_color == 'orange' %}
                <td style="width: 50%; padding-right: 30px; text-align: right; font-size: 12px; padding-left: 50px; background-color: {{ fourth_accent_color }}; " valign=middle class="content img-right k-700-text-align k-700-col k-700-padding">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
              
      
            {% else if contents.text_background_color == 'blue' %}
                <td style="width: 50%; padding-right: 30px; text-align: right; font-size: 12px; padding-left: 50px; background-color: {{ primary_accent_color }}; " valign=middle class="content img-right k-700-text-align k-700-col k-700-padding">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
      
       {% else if contents.text_background_color == 'green' %}
                <td style="width: 50%; padding-right: 30px; text-align: right; font-size: 12px; padding-left: 50px; background-color: {{ secondary_accent_color }};" valign=middle class="content img-right k-700-text-align k-700-col k-700-padding">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
                {% endif %}
      
        {% endif %}
        <td style="width: 50%; text-align: left; font-size: 12px; padding: 0;" valign=top class="k-700-col mk-padding">
            {% if contents.image.src %}
                <img src="{{ contents.image.src }}" style="width: 350px;" width="{{ contents.image.width }}" alt="{{ contents.image.alt }}">
            {% endif %}
        </td>
      
        {% if contents.text_image_orientation == 'image_left' %}
        
              {% if contents.text_background_color == 'yellow' %}
                    <td style="width: 50%; padding-left: 30px; text-align: left; font-size: 12px; padding-right: 50px; background-color: {{ tertiary_accent_color }};" valign=middle class="content k-700-col k-700-padding">
                          <div class="small-screen-padding">
                          <h2 style="font-size: 16px; color: #fff; margin: 0;">{{ contents.heading }}</h2> 
                          <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 0; border: none;"></span></div>
                          {{ contents.content }}
                          </div>
                    </td>
      
               {% else if contents.text_background_color == 'orange' %}
                    <td style="width: 50%; padding-left: 30px; text-align: left; font-size: 12px; padding-right: 50px; background-color: {{ fourth_accent_color }};" valign=middle class="content k-700-col k-700-padding">
                          <div class="small-screen-padding">
                          <h2 style="font-size: 16px; color: #fff; margin: 0;">{{ contents.heading }}</h2> 
                          <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 0; border: none;"></span></div>
                          {{ contents.content }}
                          </div>
                    </td>
      
             {% else if contents.text_background_color == 'blue' %}
                    <td style="width: 50%; padding-left: 30px; text-align: left; font-size: 12px; padding-right: 50px; background-color: {{ primary_accent_color }};" valign=middle class="content k-700-col k-700-padding">
                          <div class="small-screen-padding">
                          <h2 style="font-size: 16px; color: #fff; margin: 0;">{{ contents.heading }}</h2> 
                          <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 0; border: none;"></span></div>
                          {{ contents.content }}
                          </div>
                     </td>
      
              {% else if contents.text_background_color == 'green' %}
                    <td style="width: 50%; padding-left: 30px; text-align: left; font-size: 12px; padding-right: 50px; background-color: {{ secondary_accent_color }};" valign=middle class="content k-700-col k-700-padding">
                          <div class="small-screen-padding">
                          <h2 style="font-size: 16px; color: #fff; margin: 0;">{{ contents.heading }}</h2> 
                          <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 0; border: none;"></span></div>
                          {{ contents.content }}
                          </div>
                      </td>
     
              {% endif %}
        {% endif %}
    </tr>
</table>
{% endfor %}
0 Votes
2 Solutions acceptées
Jsum
Solution
Conseiller clé

Trouble with HubL If statement not working

Résolue

Hi @CarolineLane ,

 

It looks like you are using a choice field to give your users some color options: Yellow, Orange, Blue, and Green.

 

Each option you set in the module choice field has two attributes, label and value. The value is what you check against, the label is the text that is show in the drop down. You should check the values in your choice field to ensure that they are lowercase and otherwise formatted correctly. 

 

anotherthing you can do, to remove the if statements, is use the hexidecimal color codes as the values for the choice field options:

a Hubspot custom module choice field with color optionsa Hubspot custom module choice field with color options

Then you can output the color code directly into the html:

{% for contents in module.content %}
<table class="two-col-centered" style="line-height: 1.5em; color: #fff; ">
    <tr>
        {% if contents.text_image_orientation == 'image_right' %}

                <td style="background-color: {{ contents.text_background_color }};">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
{% endif %} </tr> </table> {% endfor %}

Voir la solution dans l'envoi d'origine

0 Votes
Bhargavi2503
Solution
Membre

Trouble with HubL If statement not working

Résolue

For using any Personalization Token in if/else condition, it is necessary to enable programmable email. And for that, you need to add isEnabledForEmailV3Rendering: true at the top of the template. For reference, please check the screenshot. For more, please go to this page.

enable-design-manager-template-for-programmable-email.png_width=765&name=enable-design-manager-template-for-programmable-email

Voir la solution dans l'envoi d'origine

0 Votes
2 Réponses
Bhargavi2503
Solution
Membre

Trouble with HubL If statement not working

Résolue

For using any Personalization Token in if/else condition, it is necessary to enable programmable email. And for that, you need to add isEnabledForEmailV3Rendering: true at the top of the template. For reference, please check the screenshot. For more, please go to this page.

enable-design-manager-template-for-programmable-email.png_width=765&name=enable-design-manager-template-for-programmable-email

0 Votes
Jsum
Solution
Conseiller clé

Trouble with HubL If statement not working

Résolue

Hi @CarolineLane ,

 

It looks like you are using a choice field to give your users some color options: Yellow, Orange, Blue, and Green.

 

Each option you set in the module choice field has two attributes, label and value. The value is what you check against, the label is the text that is show in the drop down. You should check the values in your choice field to ensure that they are lowercase and otherwise formatted correctly. 

 

anotherthing you can do, to remove the if statements, is use the hexidecimal color codes as the values for the choice field options:

a Hubspot custom module choice field with color optionsa Hubspot custom module choice field with color options

Then you can output the color code directly into the html:

{% for contents in module.content %}
<table class="two-col-centered" style="line-height: 1.5em; color: #fff; ">
    <tr>
        {% if contents.text_image_orientation == 'image_right' %}

                <td style="background-color: {{ contents.text_background_color }};">
                    <div class="small-screen-padding">
                    <h2 style="font-size: 16px; color: #fff; text-align: right; margin: 0;">{{ contents.heading }}</h2>  
                    <div><span style="display: inline-block; background-color: #fff; width: 10em; height: 3px; margin: 3px 0; border: none;"></span></div>
                    {{ contents.content }}
                    </div>
                </td>
{% endif %} </tr> </table> {% endfor %}
0 Votes