problem with hubspot identifier

[kyKaq]

Good day,

I am doing a repeater in the repeater module and using the unique identifier {{ name }} and {{loop.index}}

the code is roughly like that

<section class="module">
  <div class="repeater-{{ name }}">
    {% for item in module.repeater %}
    <div class="card-{{ loop.index }}">
      {% for item2 in item.card %}
      <div class="card-item">
......

 And then I wanted to make it customizable by adding the setting in the left side while using it. But then the card of first and second item in first repeater is affeted by first item's setting.

Then, while creating the second repeater, the item setting in the first repeater is unable to modify and the second repeater's first item will affect the first repeater.Then, the second item insecond repeater will affect it own item

Thinking that it is because of the unique id, thu, wanted to ask whether anyone have any idea?

PS: I had done the setting for the first and second repeater. And the problem that I faced is in the card setting of the second repeater.

Thanks

[kyKaq]

Sorry for the inconvenient,
This is the preview page.

However, I will still put the coding here in the case have any burden about the link

<section class="module">
  <div class="repeater-wrapper-{{ name }}">
    {% for item in module.row %}
    <div class="card-wrapper-{{ loop.index }}">
      {% for item2 in item.card %}
      <div class="card-item-{{ loop.index }}">
        <div class="img-area">
          {% if item2.image_field.src %}
			{% set sizeAttrs = 'width="{{ item2.image_field.width }}" height="{{ item2.image_field.height }}"' %}
			{% if item2.image_field.size_type == 'auto' %}
				{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
			{% elif item2.image_field.size_type == 'auto_custom_max' %}
				{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item2.image_field.max_width }}px; max-height: {{ item2.image_field.max_height }}px"' %}
			{% endif %}
			 {% set loadingAttr = item2.image_field.loading != 'disabled' ? 'loading="{{ item2.image_field.loading }}"' : '' %}
			<img src="{{ item2.image_field.src }}" alt="{{ item2.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
		{% endif %}
        </div>
        <div class="text-area">
          {% inline_rich_text field="richtext_field" value="{{ item2.richtext_field }}" %}
        </div>
      </div>
      {% require_css %}
    <style>
      section.module .repeater-wrapper-{{ name }} .card-wrapper-{{ loop.index }} .card-item-{{ loop.index }} {
        height: {{ item2.card_height }}px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: {{ item2.choice_field }};
      }
      
      section.module .repeater-wrapper-{{ name }} .card-wrapper-{{ loop.index }} .card-item-{{ loop.index }} .text-area{
        width: {{ item2.text_setting.text_width }}px;
        height: {{ item2.text_setting.text_height }}px;
        border: solid;
      }
    </style>
    {% end_require_css %}
      {% endfor %}
    </div>
    {% require_css %}
    <style>
      .card-wrapper-{{ loop.index }}{
        background-color: {{ item.repeater_setting.background_color.color }};
        display: flex;
        flex-direction: {{ item.repeater_setting.card_direction }};
      }
    </style>
    {% end_require_css %}
    {% endfor %}
  </div>
</section>

I put the {{ loop.index }} at the card item there as I wanna make each card item editable.  The result: second repeater's first item affect first repeater's first item; second repeater's second item affect its own.

Previously I didn't put the  {{ loop.index}} in the card item, the result is like this: First repeater's card setting = unusable; second repeater's first item setting affect first repeater ; second repeater's second item affect second repeater;

[Anton · Accepted solution]

Hi @kyKaq, 

thanks for the informations. 

Your CSS looks a bit odd. 

I would recommend to seperate the CSS from the for-loops and recreate it like this:

{% require_css %}
<style>

	{% for item in module.row %}section.module .repeater-wrapper-{{ name }} .card-wrapper-{{ loop.index }} {% for item2 in item.card %}.card-item-{{ loop.index }}{% endfor %}{% unless loop.last%},{% endunless%}{% endfor %} {
		height: {{ item2.card_height }}px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: {{ item2.choice_field }};
	}
	{% for item in module.row %}
	section.module .repeater-wrapper-{{ name }} .card-wrapper-{{ loop.index }} {% for item2 in item.card %}.card-item-{{ loop.index }}{% endfor %}{% unless loop.last%},{% endunless%}{% endfor %}{
		width: {{ item2.text_setting.text_width }}px;
		height: {{ item2.text_setting.text_height }}px;
		border: solid;
	}

	{% for item in module.row %}
	.card-wrapper-{{ loop.index }}{
		background-color: {{ item.repeater_setting.background_color.color }};
		display: flex;
		flex-direction: {{ item.repeater_setting.card_direction }};
	}
	{% endfor %}
</style>
{% end_require_css %}

hope this helps, 

best, 

Anton

[kyKaq]

Hi @dennisedson  and @Anton ,

This is the link to my module: https://app.hubspot.com/design-manager/8477376/modules/39401016294
However, I am not sure whether this is the link that links to the working sheet.

PS: again, the problem is in the setting of the second repeater item.

Thanks again.

[dennisedson]

Hey @kyKaq 

anything that starts with app will require a person to be a user on the portal.  if you could put it on a dummy page and send a preview link that would be best!

[dennisedson]

@kyKaq  in addition to full code, if you have link to a working example of the issue, that would be helpful to fully illustrate the problem.  Agreeing with @Anton , so far with the code there should be no issue with targeting.

[Anton]

Hi @kyKaq, 

to get this clear:

you want to have the ablility to change the {{name}} tag individually?

How did you tried to modify it? 

I've tried your code with a simple text in the second repeater and had no issues. 

Could you please post the whole module code?

best, 

Anton