Personalized checkout and custom promotions with Shopify Scripts
I'm trying to modify a collection page on my Shopify theme which displays items in the <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 tags 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?
<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>
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024