Fill missing elements with previous one - Liquid, Shopify

14 Views Asked by At

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?

0

There are 0 best solutions below