CMS Development

CarolineLane
参加者

Trouble with HubL If statement not working

解決

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 いいね!
2件の承認済みベストアンサー
Jsum
解決策
キーアドバイザー

Trouble with HubL If statement not working

解決

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 いいね!
Bhargavi2503
解決策
メンバー

Trouble with HubL If statement not working

解決

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 いいね!
2件の返信
Bhargavi2503
解決策
メンバー

Trouble with HubL If statement not working

解決

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 いいね!
Jsum
解決策
キーアドバイザー

Trouble with HubL If statement not working

解決

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 いいね!