I have created a section with context and am trying to pass data to the custom module, but cannot figure out the Hubl to access grouped fields. Example outlined below, where there is a repeater group inside my custom module and I want to pass a unique image field or link to display in the template. For the section heading I can use a string easily, but I cannot figure out the groups.
Custom Module Fields:
> Section Heading
> Section Description
> Card (Repeater Group)
>> Card Title
>> Card Image
>> Card Link
{% dnd_section %}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path=“../../modules/cardScroll.module” %}
{% module_attribute ‘variant’ %}{{ context.variant || ‘gradient’ }}{% end_module_attribute %}
{% module_attribute ‘background_color’ %}{{ context.background_color || ‘light’ }}{% end_module_attribute %}
TODO not working below
{% module_attribute ‘card_content.image_field’ %}{{ context.image || get_asset_url(‘../images/blank-page-banner.png’) }}{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
The only way I was able to get this to work was to apply attributes at the top level. Therefore, the value of card_content must be a json string with the values needed. So in your example something like this should work:
{# Basic Example #}
{% module_attribute 'group_name' %}
{ field_name: 'field value' }
{% end_module_attribute %}
{# Your use case #}
{% module_attribute 'card_content' %}
{ image_field: {{ context.image || get_asset_url('../images/blank-page-banner.png') }} }
{% end_module_attribute %}
I got this working in my test using the first code example above. I’m not 100% sure of what HubL is acceptable inside dnd areas or module_attribute areas. I feel like dot notation should work like you tried, but I couldn’t get it to work witout just assigning the parent group a json value.
I tried the JSON as a string and as object literal but end up with two warnings and the module not rendering fully.
is_json is false but this value looks like a JSON object.
AND
Invalid value for field [card_content] in module [cardScroll]: “Value for field with an occurrence must be an array”
So if card_content is a repeater the object would need to be an array instead of a single object.
{# Single Item in Group #}
{% module_attribute 'group_name' %}
[{ field_name: 'field value' }]
{% end_module_attribute %}
{# Multiple Items in Group #}
{% module_attribute 'group_name' %}
[
{ field_name: 'field value 1' },
{ field_name: 'field value 2' }
]
{% end_module_attribute %}
The above code is working in my instance where the group is named ‘group’ and the field is named ‘text’ and group is a repeater.
The question I believe the OP and I both have is how do you set context on the multiple items so you can alter the values in your page template?
In the section this works:
{# Multiple Items in Group #}
{% module_attribute 'group_name' %}
[
{ field_name: 'field value 1' },
{ field_name: 'field value 2' }
]
{% end_module_attribute %}
But - how do you modify this to allow your page template to use this or the context you put in the page template. For most items you add context like this:
{% module_attribute 'content' %}
{{
context.intro || '<h2>Heading Here</h2>
<p class="uk-text-center@m">This is where your content goes .</p>'
}}
{% end_module_attribute %}
How do you do this for an array?
Working snippet w context and image:
{% module_attribute 'card_content' %}
[{
image_field: {{ context.image || "{'width': 360, 'height': 270, 'src': '../images/placeholders/360x270.png', 'alt': 'card image'}" }},
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit sed',
description: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis a minima facere earum eum eligendi. Facilis laborum vero vitae quaerat.',
date: 'May 5 2022',
location: 'Chicago, IL',
cta_text: 'read more'
},
{
image_field: {{ context.image || "{'width': 360, 'height': 270, 'src': '../images/placeholders/360x270.png', 'alt': 'card image'}" }},
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit sed',
description: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis a minima facere earum eum eligendi. Facilis laborum vero vitae quaerat.',
date: 'May 5 2022',
location: 'Chicago, IL',
cta_text: 'read more'
},
{
image_field: {{ context.image || "{'width': 360, 'height': 270, 'src': '../images/placeholders/360x270.png', 'alt': 'card image'}" }},
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit sed',
description: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis a minima facere earum eum eligendi. Facilis laborum vero vitae quaerat.',
date: 'May 5 2022',
location: 'Chicago, IL',
cta_text: 'read more'
}]
{% end_module_attribute %}
Thank you!
