CMS Development

mw023
Member

Can modules contain flexible columns?

I'm trying to make a module that includes a flexible column. Is this possible?

 

When I add the widget code into my module I get an error: Screenshot 2020-06-05 at 21.31.53.png

 

Here's the code from my module:

 

<div class="MaxWitdh">
  <div class="Container">
    {% widget_container "my_flexible_column" label="Custom Widget Box" %}
      {% rich_text "my_rich_text" %}
      {% rich_text "second_rich_text" %}
    {% end_widget_container %}
  </div>
</div>

 

 

I have been able to get flexible columns working in an "HTML & HUBL" template. But Am eager to get it working in a module so that I can drag it into various page templates.

 

I only know basic HTML/CSS so any answers with examples I can use would be really helpful Smiley Happy

 

Screenshot 2020-06-05 at 21.32.24.png

2 Replies 2
FabianRichter
Contributor

Can modules contain flexible columns?

Hey there,


I know this thread is old, but I was looking for this function as well some while ago and finally I got a good solution at least for my use case. Let me show how I do it. Important: for my solution you need custom coded HTML+HubL templates but since this is now the recommended way it shouldn't be a problem.
Here we go.
We have pages on our website, that contains sections with background colors that span the whole screen width. Of course we want our flexible columns not to do so because we want them to sit in the center grid. Since every page is different the count of sections varies. Simplified I needed something like this:

 

{% for section in sections %}
  <section class="{{ section.background }}" id="{{ section.id }}">
    {% widget_container %}{% end_widget_container %} // this is my flexible column
  <section>
{% endfor %}

 

I first also had in mind to do that via a module, but unfortunately you can not use widget_container in this context, which totally makes sence to me. So I made use of the export_to_template_context parameter in modules. I created a module called section_settings with a group of fields (named "sections") called background (section.background) and id (section.id). Then I have my sections.html template where I put this module with its export_to_template_context_parameter set to true on top of the template. And then I iterate through my sections. The template code looks like this:

 

// Add the module
{% module "section_settings", path="...", label="Section Settings", export_to_template_context=True %}

// Access the module data via {{ widget_data.section_settings... }}
{% for section in widget_data.section_settings.sections %}
<section class="{{ section.background }}" id="{{ section.id }}">
  {% if loop.index0 = 0 %}{% widget_container "section0" %}{% end_widget_container %}{% endif %}
  {% if loop.index0 = 1 %}{% widget_container "section1" %}{% end_widget_container %}{% endif %}
  ...
  {% if loop.index0 = 9 %}{% widget_container "section9" %}{% end_widget_container %}{% endif %}
</section>
{% endfor %}

 

You might wonder why I use if statements instead of just looping. This is because every widget container needs its unique ID otherwise it does not know where to attach the modules to. Unfortunately you cannot pass any variable so there is no way to do something like:

 

{% widget_container "section"+{{ loop.index0 }} %}

 

I don't use more than 10 sections, so that's fine. Note, that this example is simplified. Of course I specify a label for each flexible column, so I know later in the "Contents" tab which one I edit.
When I now create a new page with this template, I first define, how many sections I want on this page and also how they should look. Then I refresh the content editor and all defined flexible columns appear. I am now able to drag and drop modules into these sections and it works perfectly!
Hope this helps.

Best,
Fabian

0 Upvotes
ashleyidesign
Top Contributor | Partner
Top Contributor | Partner

Can modules contain flexible columns?

Hey there,

 

My understanding is that no, you can't have flexible columns in a custom module. Custom modules are more meant to be added TO flexible columns, instead of the other way around.

 

Can you explain your use case here?

0 Upvotes