CMS Development

Andrew_Nimbler
Participant

HubL question: looping {% choice %} & using {% if %} to detect each option

SOLVE

I'm looking into creating a master email template that contains multiple layouts that the client can show/ hide. The idea is that the template is locked down so the client can't do anything unintended, but allows them to create all their email communication without ruining their template's visual style. Similar to how Campaign Monitor allows you to repeat layouts you define in the template.

 

I'm using HubL to create a choice that selects how many times to repeat another choice that allows the client to pick a unique layout for each of the repeats.

 

Below is the code I'm using which doesn't quite work, as it doesn't repeat the second choice field.

{% choice "sections_field" label="How many sections?", value="1", choices="1, 2", export_to_template_context=True %}

{% for sections in widget_data.sections_field.value %}
    {% choice "layout_field" label="Use layout?", value="One Column", choices="One Column, Two Columns", export_to_template_context=True, unique_in_loop=True %}

    {% if widget_data.layout_field.value == 'One Column' %}
        One Column
    {% elif widget_data.layout_field.value == 'Two Columns' %}
        Two Columns
    {% endif %}
{% endfor %}

Any ideas? I can do all this manually in the template by just copying the choice a few times, but I am hoping to get the loop working as it would be easier to maintain...

1 Accepted solution
Andrew_Nimbler
Solution
Participant

HubL question: looping {% choice %} & using {% if %} to detect each option

SOLVE

Thanks for the help everyone. For future reference here is the solution:

{% set sections = range(1, 5) %}
{% choice "sections_field" label="How many sections?", value="1", choices="{{ sections }}", export_to_template_context=True %}

{% set layout = '["One Column", "Two Columns", "Three Columns"]' %}

{% for section in sections|split(',', widget_data.sections_field.value) %}
    {% choice "layout_field" label="Use layout?", value="One Column", choices="{{ layout }}", export_to_template_context=True, unique_in_loop=True %}
{% endfor %}

{% for widget in widget_data %}
    {% if loop.index0 <= widget_data.sections_field.value %}
        {% if widget.value == "One Column" %}
            One Column
        {% elif widget.value == "Two Columns" %}
            Two Columns
        {% elif widget.value == "Three Columns" %}
            Three Columns
        {% endif %}
    {% endif %}
{% endfor %} 

 

View solution in original post

8 Replies 8
AJLaPorte_diagr
Key Advisor

HubL question: looping {% choice %} & using {% if %} to detect each option

SOLVE

I would recommend against using the repeater option in an email template at this time with what you are trying to do. I have tried this in the past and found it a pain mainly because the repeater elements when placed on the page will not match up with the element list in the edit menu. I submitted a ticket about this about a year ago and was told support had no plans to fix the issue. I am uploading a pdf and image of the support ticket here so you can see. I removed and blurred pieces so not to throw the support person under the bus or anything like that. 

 

I basically was able to accomplish this with a really long IF statement in order to be able to get it to function as needed and allow for the user to be able to use either the edit menu or the clicking directly on the module to edit area in the same order. 

 

Until HS can fix their repeater module, this will continue to be an issue.

 

edit: Looks like attachments didnt show, here they are in dropbox:
Image of issue: https://www.dropbox.com/s/uso59wr2q124583/edit%20module%20email%20issues.jpg?dl=0

Thread: https://www.dropbox.com/s/a7znf8dwiecaeep/HS-Support_ticket-Thread.pdf?dl=0

oliviajackson12
Member

HubL question: looping {% choice %} & using {% if %} to detect each option

SOLVE


Thanks for giving us so much time !!
Great tips man! Worth reading. To be honest at first sight I thought you’ll use the same old tips people used to write on their blogs, but here I learnt some new things in this key Point, something out of the box!

 

0 Upvotes
nickdeckerdevs
Contributor | Diamond Partner
Contributor | Diamond Partner

HubL question: looping {% choice %} & using {% if %} to detect each option

SOLVE

What are you trying to accomplish by doing this line? You are trying to loop through one value right there. I'm not sure what exactly you are doing, but maybe try without the .value

{% for sections in widget_data.sections_field.value %}

 

Andrew_Nimbler
Participant

HubL question: looping {% choice %} & using {% if %} to detect each option

SOLVE

Thanks for the feedback, your right nickdeckerdevs, I wasn't understanding the for loop correctly. I've updated the for loop & now I'm having a problem with the if statements not detecting each unique choice per loop.

{% set sections = [1, 2, 3, 4] %}
{% set layout = '["One Column", "Two Columns"]' %}
{% choice "sections_field" label="How many sections?", value="1", choices="{{ sections }}", export_to_template_context=True %}

{% for section in sections|split(',', widget_data.sections_field.value) %}
    {% choice "layout_field" label="Use layout?", value="One Column", choices="{{ layout }}", export_to_template_context=True, unique_in_loop=True %}

    {% if widget_data.layout_field.value == 'One Column' %}
        One Column
    {% elif widget_data.layout_field.value == 'Two Columns' %}
        Two Columns
    {% endif %}
{% endfor %}

If I use 'widget_data.layout_field_2.value' as an if statement it gets the second choice's value, but I can't figure out how to add index.loop into the variable to get it to treat each variable in the for loop as unique.

Andrew_Nimbler
Solution
Participant

HubL question: looping {% choice %} & using {% if %} to detect each option

SOLVE

Thanks for the help everyone. For future reference here is the solution:

{% set sections = range(1, 5) %}
{% choice "sections_field" label="How many sections?", value="1", choices="{{ sections }}", export_to_template_context=True %}

{% set layout = '["One Column", "Two Columns", "Three Columns"]' %}

{% for section in sections|split(',', widget_data.sections_field.value) %}
    {% choice "layout_field" label="Use layout?", value="One Column", choices="{{ layout }}", export_to_template_context=True, unique_in_loop=True %}
{% endfor %}

{% for widget in widget_data %}
    {% if loop.index0 <= widget_data.sections_field.value %}
        {% if widget.value == "One Column" %}
            One Column
        {% elif widget.value == "Two Columns" %}
            Two Columns
        {% elif widget.value == "Three Columns" %}
            Three Columns
        {% endif %}
    {% endif %}
{% endfor %} 

 

stinhambo
Contributor

HubL question: looping {% choice %} & using {% if %} to detect each option

SOLVE

Hi Andrew,

 

Only issue with this is that if you add 6 or more sections, the  modules no longer correspond with the order you choose for them.

0 Upvotes
Gonzalo
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

HubL question: looping {% choice %} & using {% if %} to detect each option

SOLVE

This is a perfect and easy solution to work with choice fields. But if you will work with special characters like ñ,{, }, [, ], ô, ü, etc. I recommend to you change each option  in a value + label combo:

 

{% set layout = '[ [\"1\", \"One Column\"], [\"2\", \"Two Columns\"], [\"3", \"Three Columns\"] ]' %}

On this way you can be very sure that this will work nice always.

 

As you can see the rules for this syntax are:

- Wrap all options between [...].

- Also wrap each option between [...].

- Wrap each value and label with double quotes "...".

- Sanitize each double quote with inverted slash before the symbol: \".

 

In this case, it's unnecesary but I think that it's interesting to know for complex cases and with this way this post becomes a full solution. 

If this answer helps you to solve your questions please mark it as a solution.

Thank you,


Gonzalo Torreras

HubSpot freelance developer

hola@gonzalotorreras.com
www.gonzalotorreras.com
Schedule a meeting
Anonymous
Not applicable

HubL question: looping {% choice %} & using {% if %} to detect each option

SOLVE

I think what you're looking for is a repeater.

 

Check out the documentation in this link: http://designers.hubspot.com/docs/tutorial/how-to-create-a-repeater-module-with-hubl

 

You could then use the "if" to change up the layout.