如何在 Liquid Shopify 中的 for 循环内从迭代中停止网格收集答案

【问题标题】：How to stop grid-collection from iteration inside for loop in Liquid Shopify如何在 Liquid Shopify 中的 for 循环内从迭代中停止网格收集
【发布时间】：2021-04-02 17:59:15
【问题描述】：

我需要停止网格集合 div 以在 for 循环中进行迭代。

这是我的液体示例代码：

{% for block in section.blocks %}

    {% if block.settings.download_title %}      
     <div class="title">
      <div class="heading_title">
        <p class="title"><h2>Title</h2></p>
      </div>
      <div class="desc">
        <p class="heading_desc">Description</p>
      </div>
     </div>
    {% endif %}

    {% if block.settings.image %} 
          <div class="grid-collection-{{ section.settings.grid_number }}">
            <div class="grid-list-view">
                <img style="height: 277px;" src="{{ block.settings.image | img_url: '300x' }}" alt="{{ block.settings.image | escape }}">
            </div>
          </div> 
    {% endif %}

{% endfor %}

上面代码的输出在这里：

我的目标是将所有grid-list-view div 插入到grid-collection div 中。

就像下面的输出：

如何使用 Liquid 或 JavaScript 实现这个？

【问题讨论】：

需要修改HTML结构，标题需要在里面，grid-collection-three
仍然不能解决问题。一旦标题 div 被触发，我想迭代 grid-collection-three。
不行，你需要把grid-colleciton-three放在for外面，把title也包在里面。
没有任何效果，我想要网格列表视图上方的标题，这样输出将是标题，下面是网格列表视图。如何实现这种方法？
这是不可行的

标签： javascript jquery for-loop shopify liquid

【解决方案1】：

您需要将download_title 移到外部，并将section.blocks 循环到grid-collection-three div 内

类似这样的：

    {% if section.settings.download_title %}      
     <div class="title">
      <div class="heading_title">
        <p class="title"><h2>Title</h2></p>
      </div>
      <div class="desc">
        <p class="heading_desc">Description</p>
      </div>
     </div>
    {% endif %}

    <div class="grid-collection-{{ section.settings.grid_number}}">
      {% for block in section.blocks %}
        {% if block.settings.image %}
        <div class="grid-list-view">
            <img style="height: 277px;" src="{{ block.settings.image | img_url: '300x' }}" alt="{{ block.settings.image | escape }}">
        </div>
        {% endif %}
      {% endfor %}
    </div>

{% schema %}
  {
    "name": "myTitle",
    "blocks" : [
      {
        "type": "slide",
        "name": "Slide",
        "limit": 3,
        "settings": [
          {
            "id": "image",
            "type": "image_picker",
            "label": "Image"
          }
        ]
      }      
    ],
    "settings" :  [
      {
        "id" : "download_title",
        "type" : "text",
        "default" : "text"
      },
      {
        "id" : "grid_number",
        "type" : "text",
        "default" : "three"
      }
    ]

  }
{% endschema %}

【讨论】：