For Loops seem to iterate out of order

New Member
4 0 0
[re-post in correct forum category]
 
I'm trying to modify a collection page on my Shopify theme which displays items
<div id="product loop">...</div>

I want to loop through in-stock items then loop through out-of-stock items. (liquid code and html inspector below)

 

However, something strange is happening:

The last iteration of my in-stock loop isn't occurring until after the entire out-of-stock loop finishes. I added html comments to the code to try and track the issue.

 

How can a product with my added <!-- avail --> comment be after the <!-- END Available Products --> when the comment is nested inside the loop?

 

LiquidLoopCapture.JPGAnnotated inspector window

 

 

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

 

0 Likes
Excursionist
30 2 22

Shopify returns the products in whatever order they are in the collection. My guess would be you have to return all the products and then sort then sort them somehow. I've had a similar problem like this and had to write a whole bunch of conditional code, and also set the collection to sort.

0 Likes
New Member
4 0 0

Thanks for the suggestion Stevo. The collection was sorted, before, as you described, but after I added the for loops they were separated into in-stock (A-Z) / out-of-stock (A-Z) -- the same sort order but separated conditionally. (except the one problematic outlier)

 

The only listing that behaves strangely is the last in-stock listing. Shouldn't the loop behavior stay consistent regardless of the sort?

0 Likes
New Member
4 0 0

If anyone stumbles upon this thread in the future, look into the other (seemingly unrelated) scripts and logic that could modify the DOM in any way.

 

The issue, in this case, was being caused by pagination, which was using the collection's sort number (as @StevoHoodDesign suspected) instead of modifying the DOM.

0 Likes