时间戳

首页 > 解决方案 > Shopify Liquid：连续 for 循环无序迭代

html - Shopify Liquid：连续 for 循环无序迭代

问题描述

我正在尝试通过循环浏览集合来修改显示产品的 Shopify 主题。我想在其余产品之后显示缺货产品，因此我创建了一个 for 循环来遍历库存商品，然后再创建一个循环来遍历缺货商品。但是，在所有缺货清单之后，总会出现一个有货清单。

为了调试它，我在产品列表中以及液体循环之前和之后添加了 html 标记。

列表怎么可能有“可用”评论，但在“结束可用产品”评论之后？

红色：可用产品

蓝色：不可用的产品

chrome 检查器的注释图像

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

标签： htmlshopifyliquidshopify-template

解决方案

该问题是由于在库存/缺货循环生成 html后分页改变了产品列表的顺序。解决此问题需要更改分页方法。

推荐阅读