CMS Development

remiwebs
Member | Elite Partner
Member | Elite Partner

Dynamically add groups - COS

Hi,

 

For a landingpage I would like to make a section available where the user dynalically can add sections. This is possible with Flexible columns but I cant put complete (global) groups in a flexible column, only a single text editor for example. I want to make it possible for the user to dynamically add more advanced groups.

 

How can I achieve this?

 

Remi

0 Upvotes
5 Replies 5
Jsum
Key Advisor

Dynamically add groups - COS

@remiwebs, is your landing page built using the tempalte builder or HubL? With HubL you could create drop down options to show/hide sections so you could add all of the possible sections into the page and give the user the option to show/hide them in the page editor, but the tempate builder isn't going to allow this.

0 Upvotes
remiwebs
Member | Elite Partner
Member | Elite Partner

Dynamically add groups - COS

Hi,

 

Thank you for your response,

 

I'm using the template builder.

 

In the case I would use Hubl, sometimes I need 3 of the same blocks and sometimes I need 40 of the same block below eachother. This are to many blocks to put in the template to enable and disable them. I'm looking for a more dynamic solution. Is there any?

0 Upvotes
Jsum
Key Advisor

Dynamically add groups - COS

@remiwebs,

 

Yes there is. Here's an example.

 

Set up a choice variable:

{% set repeat_amount = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40] %}
{% choice "repeat_section_1" label='Repeat Section 1', value='0', choices='{{ repeat_amount }}' export_to_template_context=True %}

Then wrap your section markup in a for loop with a condition that stops the loop at the amount chosen:

{% for options in repeat_amount %}
    {% if loop.index <= widget_data.repeat_section_1.value %}
        <section class="section_1">

        </section>
    {% endif %}
{% endfor %}

add your editable fields and make sure to include "unique in loop" so that the loop appends a unique identifier to the system name:

{% set repeat_amount = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40] %}
{% choice "repeat_section_1" label='Repeat Section 1', value='0', choices='{{ repeat_amount }}' export_to_template_context=True %}

{% for options in repeat_amount %}
    {% if loop.index <= widget_data.repeat_section_1.value %}
        <section class="section_1">

              {% widget_block rich_text "right_column" overrideable=True, label='Right Column', unique_in_loop=True  %}
                     {% widget_attribute "html" %}
                            <h2>Something Powerful</h2>
                            <h3>Tell The Reader More</h3>
                            <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>
                            <p>Remember:</p>
                            <ul>
                                   <li>Bullets are great</li>
                                   <li>For spelling out <a href="#">benefits</a> and</li>
                                   <li>Turning visitors into leads.</li>
                           </ul>
                    {% end_widget_attribute %}
             {% end_widget_block %}

        </section>
    {% endif %}
{% endfor %}

You can create one of these for each of the sections you want repeatable. All you need is a unique charce field and an unique loop for each section and they can all play off of your "repeat_amount" array. 

 

The only down side to this is for developers using the template builder because you have to use hubl, but you can place this in a hubl module within the template builder. 

 

Hubspot create this tutorial you can use as a reference.

0 Upvotes
remiwebs
Member | Elite Partner
Member | Elite Partner

Dynamically add groups - COS

Thank you, I will try that.

0 Upvotes
Jsum
Key Advisor

Dynamically add groups - COS

let me know if it worked for you. One more thing, when you choose how many times you want to repeat a section on the page editor you have to refresh the page editor page for the modules to appear.

0 Upvotes