I'm trying to get my product images with attributes according to their variants with Liquid. It's my code:
{%assign curOpt1 = product.selected_or_first_available_variant.option1 %}
{% for img in product.images %}
{% assign opt1 = img.variants[0].option1 %}
{% assign opt2 = img.variants[0].option2 %}
<div class="swiper-slide {% if opt1 == curOpt1 %} {{'visible-slide'}} {% endif %}"
data-option-one='{{ opt1 }}'
data-option-two='{{ opt2 }}'>
<img src="{{ img | img_url: '600x600' }}" alt="{{ img.alt }}" />
</div>
{% endfor %}
And I'm getting this output:
<div class="classes" data-option-one="first-value" data-option-two="first-value">...</div>
<div class="classes" data-option-one data-option-two>...</div>
<div class="classes" data-option-one data-option-two>...</div>
<div class="classes" data-option-one data-option-two>...</div>
<div class="classes" data-option-one="second-value" data-option-two="second-value">...</div>
<div class="classes" data-option-one data-option-two>...</div>
<div class="classes" data-option-one data-option-two>...</div>
<div class="classes" data-option-one="third-value" data-option-two="third-value">...</div>
<div class="classes" data-option-one data-option-two>...</div>
<div class="classes" data-option-one data-option-two>...</div>
...
So, there is some records doesn't have any value if it's same with previous ones. But I need to fill them like this:
<div class="classes" data-option-one="first-value" data-option-two="first-value">...</div>
<div class="classes" data-option-one="first-value" data-option-two="first-value">...</div>
<div class="classes" data-option-one="first-value" data-option-two="first-value">...</div>
<div class="classes" data-option-one="first-value" data-option-two="first-value">...</div>
<div class="classes" data-option-one="second-value" data-option-two="second-value">...</div>
<div class="classes" data-option-one="second-value" data-option-two="second-value">...</div>
<div class="classes" data-option-one="second-value" data-option-two="second-value">...</div>
<div class="classes" data-option-one="third-value" data-option-two="third-value">...</div>
<div class="classes" data-option-one="third-value" data-option-two="third-value">...</div>
<div class="classes" data-option-one="third-value" data-option-two="third-value">...</div>
...
So it'll get the previous item's values if its empty. Anyone have an idea or know a better way?