Trouble with HubL If statement not working

[CarolineLane]

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

[Jsum]

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

[Bhargavi2503]

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.