Shopify Liquid: Consecutive for loops iterating out of order

Question

I'm trying to modify a Shopify theme that displays products by looping through the collection. I wanted to display the out-of-stock products after the rest, so I created a for loop to iterate through in-stock items, and then another to iterate through out-of-stock items. However, there is always one in-stock listing that appears after all the out-of-stock listings.

In an attempt to debug this I added html tags inside the product listing and before and after the liquid loop.

How could the listing have the "avail" comment but be after the "END Available Products" comment?

Red: Available Products

Blue: Unavailable Products

<div id="product-loop" {% if settings.collection-sidebar %}class="desktop-10 tablet-5 mobile-3"{% endif %}>
  {% assign products-per-row = settings.products-per-row %}

  <!-- Available Products -->
  {% for product in collection.products %}
    {% assign outofstock = true %}
    {% for variant in product.variants %}
        {% if variant.inventory_quantity > 0 %}
            {% assign outofstock = false %}
        {% endif %}
    {% endfor %}
  
    {% if outofstock == false %}
      {% if current_tags != null %}
          <!-- Tag section removed for brevity -->
      {% endif %}
  
      <div class="product-index {% if template == 'index' and settings.homepage-product-display == 'carousel' %}{% else %}{% if products-per-row == "6" %}desktop-2{% cycle ' first', '', '', '', '', ' last' %}{% elsif products-per-row == "4" %}desktop-3{% cycle ' first', '', '', ' last' %}{% elsif products-per-row == "3" %}desktop-4{% cycle ' first', '', ' last' %}{% elsif products-per-row == "5" %}desktop-fifth{% cycle ' first', '', '', '', ' last' %}{% elsif products-per-row == "2" %}desktop-6{% cycle ' first', ' last' %}{% endif %} tablet-half mobile-half{% endif %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
        <!-- avail -->
        {% include 'product-listing' %}
        {% include "panda-swatch" %}
      </div>
  
    {% endif %}
  {% endfor %}
  <!-- END Available Products -->
  
  <!-- Unavailable Products -->
  {% for product in collection.products %}
    {% assign outofstock = true %}
    {% for variant in product.variants %}
        {% if variant.inventory_quantity > 0 %}
        {% assign outofstock = false %}
        {% endif %}
    {% endfor %}
  
    {% if outofstock == true %}
      {% if current_tags != null %}
          <!-- Tag section removed for brevity -->
      {% endif %}
  
      <div class="product-index {% if template == 'index' and settings.homepage-product-display == 'carousel' %}{% else %}{% if products-per-row == "6" %}desktop-2{% cycle ' first', '', '', '', '', ' last' %}{% elsif products-per-row == "4" %}desktop-3{% cycle ' first', '', '', ' last' %}{% elsif products-per-row == "3" %}desktop-4{% cycle ' first', '', ' last' %}{% elsif products-per-row == "5" %}desktop-fifth{% cycle ' first', '', '', '', ' last' %}{% elsif products-per-row == "2" %}desktop-6{% cycle ' first', ' last' %}{% endif %} tablet-half mobile-half{% endif %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
        <!-- no avail -->
        {% include 'product-listing' %}
        {% include "panda-swatch" %}
      </div>
  
    {% endif %}
  {% endfor %}
  <!-- END Unavailable Products -->
  
</div>

That's a tricky one. Do you think there may be some JS code included that pushes certain product to the bottom of the page, regardless of loop settings? — Lukasz Formela
@LukaszFormela Hmm.. That's a good thought. I'll look into it. — Jehy
@LukaszFormela Your suggestion led me to find the answer. I appreciate your help. — Jehy

Jehy Jehy · Accepted Answer · 2019-10-01T19:23:23

The issue was due to pagination altering the order of the product listings after in-stock / out-of-stock loops generated html. Fixing the issue required altering the pagination method.

Shopify Liquid: Consecutive for loops iterating out of order

1 Answers