module group in custom html/hubl editor

Top Contributor

Hi

 

Is there a way to define features of modules such as grouping and repetition when using hubl in the custom html module?

 

I thought namespacing in the module name might work however it seems it does not.

 

`{% boolean "hero.reverse_layout" label='Hero - reverse layout on desktop', value=False, no_wrapper=True, export_to_template_context=True %}`

 

Thanks

Reply
0 Upvotes
3 Replies 3
Community Manager

Hi @matttunney,

 

@Adesignl referenced this functionality in this thread.

 

@Adesignl, do you have any suggestions for @matttunney?

 

I also wanted to share this resource as a starting point.

 

Thank you,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Highlighted
Regular Contributor

Are you using custom modules? Or can you. the grouping is easy to do there.

Esteemed Advisor

Hi @matttunney ,

 

I might need more info to give you a better answer, but here is some info:

 

First, you should be using the custom module editor to create a module. You can get most of the same functionality using HubL tags but it is hackish and much hard to pull off.

 

In the custom module editor you have full control over your markup. You can use class controls, such as:

<div class="bg-blue">

</div>

.bg-blue {
    background: blue;
}

.bg-green {
    background: green;
}


Now you need to make it an option to switch between these classes in the page editor. There are two possible options:

Boolean Field
Choice Field

The boolean field is a "true/false" toggle. This works well if there are two options, i.e. a default option and a special options.

The snippet for a boolean field looks like:

{% if boolean_field_name %} <!-- some markup --> {% else  %} <!-- other markup --> {% endif %}

Where the statement is true if the boolean field is checked, and false if unchecked.

You would apply this to your markup like so:

<div class="{% if boolean %}bg-blue{% else %}bg-green{% endif %}">
</div>


The choice field is a good choice for multiple options. You would first create a choice field in the custom module editor. In the field options you would set up your choices. The choice name is for display purposes in the editor and the value is what you would use for your logic:

Choice Name: Blue
Choice Value: bg-blue

You can, and in most cases should, set a default value for the field. You can then copy the snippet. The snippet will look similar to:

{{ module.choice_field }}

and can be applied to your markup like so:

<div class="{{ module.choice_field }}">
</div>

which will print the chosen value to the html like this:

<div class="bg-blue">
<div>


A use case for the boolean field would be flex box ordering. a "reverse order" boolean check box can be used to apply or alter a class on an element:

<div class="order-{% if boolean %}1{% else %}2{% endif %}">

</div>
<div class="order-{% if boolean %}2{% else %}1{% endif %}">

</div>

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

Let me know if that helps.

 

Need help? Hire Us Here

- Jonathan Sumner