奇怪的 Shopify Liquid Forloop 行为 - 在标签 Forloop 中使用 Forloop 时页面变得混乱

Question

我为我的客户创建了一个系统，以便能够在产品页面上显示产品 details/specification table，产品标签的工作方式类似于 Supply 主题的分组过滤器标签，例如。具有标签 "Brand_Philips" 的产品将自动向 table 添加一行，第一列为 "Brand"，第二列为 "Philips".

我在主题 settings_schema.json 中添加了一个输入，所以我的客户应该能够 add/remove 并重新排序细节，我现在要做的就是遍历新设置并检查如果有匹配的标签并将其添加到 table，但由于某种原因，当我在标签循环中循环详细信息时，一切正常，当我在详细信息中循环标签时，整个页面都搞砸了。

这是我的代码：

在settings_schema.json中：

{
  "name": "Sort Product Details",
  "settings": [
    {
      "type": "text",
      "label": "Type the product detail tags in a comma-separated list.",
      "id": "product_details",
      "info": "List items must be identical to the tag prefixes (no underscore), and have no spaces between commas.ie. Brand,Avarage Lifetime,Watts,Volts"
    }
  ]
}

我在产品页面写了这段代码：

{% assign marker = '_' %}
{% assign productDetails = settings.product_details | split: ',' %}
{% assign found = false %}
{% for tag in product.tags %}                             <!-- The tags loop -->
  {% for detail in productDetails %}                      <!-- The details loop -->
    {% if tag contains marker and tag contains detail %}  
      {% if found == false %}
        {% assign found = true %}
        <hr>
        <h3>Product Details:</h3>
        <table class="table-striped">
      {% endif %}
      {{ tag | replace: marker, ': </strong></td><td>' | prepend: '<tr><td><strong>' | append: '</td></tr>' }}
      {% if found and forloop.last %}</table>{% endif %}
    {% endif %}
  {% endfor %}
{% endfor %}

请注意，我在标签循环中循环了详细信息，但是当我在详细信息循环中循环标签时，我的页面变得一团糟。

这是我的页面正常显示的样子：

下面是我在详细信息循环中循环标记时我的页面的外观：

我希望它在细节循环中循环标签的原因是我希望我的客户能够重新排序细节 - 它不应该按字母顺序显示 - 标签循环的工作方式。

提前致谢！

马丁.

Answer 1

在 Shopify forums 上问了这个问题后，我得到了答案，想在这里分享。

一切都搞砸的原因是结束 </table> 标签只在循环结束时用这段代码添加 {% if found and forloop.last %}</table>{% endif %} 并且只渲染包含在它从未到达最后一个标签的详细信息。

所以这是我的固定代码：

{% assign marker = '_' %}
{% assign productDetails = settings.product_details | split: ',' %}
{% assign found = false %}
{% for detail in productDetails %}
  {% for tag in product.tags %}
    {% if tag contains marker and tag contains detail %}
      {% if found == false %}
        {% assign found = true %}
        <hr>
        <h3>Product Details:</h3>
        <table class="table-striped">
      {% endif %}
      {{ tag | replace: marker, ': </strong></td><td>' | prepend: '<tr><td><strong>' | append: '</td></tr>' }}
    {% endif %}
  {% endfor %}
  {% if found and forloop.last %}</table>{% endif %}
{% endfor %}

请注意，标签循环位于详细信息循环中，结束 </table> 标签添加在详细信息循环的末尾。

奇怪的 Shopify Liquid Forloop 行为 - 在标签 Forloop 中使用 Forloop 时页面变得混乱

Weird Shopify Liquid Forloop Behavior - Page Get's Messed Up When Using A Forloop Within A Tag Forloop

html

loops

liquid

shopify