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

Posted 2023-02-15

【中文标题】Shopify Liquid：连续 for 循环无序迭代

【英文标题】：Shopify Liquid: Consecutive for loops iterating out of order

【发布时间】：2020-01-28 05:20:17

【问题描述】：

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

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

listing 怎么可能有“avail”评论但在“END Available 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>

【问题讨论】：

这是一个棘手的问题。您是否认为可能包含一些 JS 代码将某些产品推送到页面底部，而不管循环设置如何？

@LukaszFormela 嗯..这是个好主意。我会调查的。

@LukaszFormela 您的建议让我找到了答案。感谢您的帮助。

【参考方案1】：

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