Addressing looped items in nested groups

[Daniel_eon]

Hi everyone,

I am trying to reverse-engineer some modules in the Design Manager that an agency did for us and make changes to them, so I am not too familiar with HubL yet and am reading through the developer documentation as I go.

This one is a carousel module, based on the bootstrap carousel. To add more slides, the carousel-item-class is looped. I added some optional CSS gradient overlay controls to the looped image slide, which works fine.

 {% for item in module.slide %}
      
      <div class="carousel-item-{{loop.index}} carousel-item{% if loop.first %} img-fluid active{% endif %}" data-interval="{{ item.slide_duration *1000 }}" style="background-image: 
        {% if item.overlay_gradient %}
          linear-gradient(
          {% if item.gradient_direction != 'custom' %}  
             {{ item.gradient_direction }}
          {% else %} 
             {{ item.custom_direction }}deg
          {% endif %}, rgba({{ item.gradient_first_color.color|convert_rgb }}, {{ item.gradient_first_color.opacity / 100 }}), rgba({{ item.gradient_second_color.color|convert_rgb }}, {{ item.gradient_second_color.opacity / 100}})),
        {% endif %}
          url({{ item.image_slider.src }});background-size: cover;background-position: center;">
        {% if item.link %}<a class="carousel-item-link" href="{{item.link}}"></a> {% endif %} 

The looped carousel-item is put into a module subgroup called "slide". Within this slide subgroup, I would like to create another subgroup "gradient_settings" (hence a nested group) for just the gradient controls. But then, I don't know how to correctly address the items in the nested group with HubL. I tried various combinations, e.g.

• item.gradient_settings.gradient_first_color.color
• item.slide.gradient_settings.gradient_first_color.color
• module.item.slide.gradient_settings.gradient_first_color.color
• module.slide.gradient_settings.gradient_first_color.color

etc., but none of these work.

How do I need to address items in HubL with this hierarchy?

Module - looped "slide group" - Nested "gradient_settings group" within the looped "slide group" - single item?

Thanks 🙂

[MGheibi]

Hello

you can use:

{% for item in module.FirstStepFieldGroup.SecondStepFieldGroup %}

{{item}} that you need

{% endfor %}

[vish891]

Pls try this

item.gradient_first_color.color

[Daniel_eon]

Hi vish,

thanks for the suggestion. This is how the items are currently addressed in the code, and this works fine. But that stops working once you put the items in a nested group.

[vish891 · Accepted solution]

Hey

Had created the same setup and i could access it with the code i sent.

[John]

a screenshot of the module fields might help us wrap our head around what you are asking

[Daniel_eon]

Hi John,

thanks for the reply. So here is what the module structure /hierarchy looks like currently and which works with the code posted above:

And here is what I would like to do. As soon as I move controls in a nested group, the above code no longer works, as the path to the controls changes.

[sharonlicari]

Hey @Daniel_eon 

Thank you for the information provided. I'll tag a few experts that can share their knowledge with you.

Hey @FabianRichter @John @DavidFJones could you please share your thoughts with @Daniel_eon? 

Thanks

Sharon

[Daniel_eon]

Hi Sharon,

thank you, much appreciated 🙂