Website Pages > Edit modules sidebar hierarchy/positioning

[simmpaul]

Hi all.

I'm creating a content block module that holds content in columns. Within each column, there is a flexible container to give our content editors the freedom to add further modules within each of the content block's columns.

However, my issue is that I'm unable to order or name the flexible containers within the custom content block module.

Here's a snippet of the code:

{% if widget.columns == 1 %}
<div class="span12">
{% widget_container "column_1" %}
{% end_widget_container %}
</div>

And here's the result:

Ugly, right?

Anyone know what I can do to give the flexible containers correctly named and hierarchical?

Thanks,

Simon

[DaniellePeters]

The naming issue can happen when you have multiple modules with the same name (i.e. two named Column_1) or are using some sort of repeater to differentiate between the different instances of those modules. Can you clarify your implementation here?

[simmpaul]

Hi Danielle,

 I have a single module that can contain up to 3 columns.

 The module itself requires a unique identifier (widget.identifier), which is used in naming the content within each single module in the sidebar module editor.

 With this, I would assume the single module's children would appear below, but instead they're moved to the top of the sidebar.

{% if widget.columns == 1 %}
            <div class="span12">
            {% set label = widget.identifier ~ " > Column 1" %}
                {% widget_container "flexible_column_1" label={{ label }} %}
                    {% rich_text "column_1_content" %}
                {% end_widget_container%}
            </div>

E.G. widget.identifier = "testing" would display as "testing > Column 1", "testing > Column 2", etc.

This does help differentiate between content of the same module type, but it just doesn't make it easy for our content creators to update pages.

Does that make sense?

[DaniellePeters]

To clarify, it sounds like you have a custom module that contains the column options and all of the relevent HTML/HubL.

What you could do is pull in the module with the parameter export_to_template_context = True like so

{% custom_widget "column_selector" widget_name='Column Selector', export_to_template_context=True %}

and then just call in the widget token where you need it.

{{ column_selector }}

Then, the end user could select the options in the top of the module pabe (in the Hidden Modules section). And edit the contents of the columns themselves below. 

Ends up looking like this: