Ad

Shopify Liquid: Consecutive For Loops Iterating Out Of Order

- 1 answer

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

Annotated image of chrome inspector

<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>
Ad

Answer

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.

Ad
source: stackoverflow.com
Ad