使用塊來重複元素

與部分一起出現的最有用的東西之一是。塊基本上是可以無限次建立的東西的藍圖。最好的例子之一是滑塊的幻燈片。塊是模式中的頂級項,意味著它與 namesettings 之類的東西並排,但不在其中。塊內基本上是迷你模式。

{% schema %}
  {
    "name": "Slider",
    "max_blocks": 6,
    "blocks": [
      {
        "type": "slide",
        "name": "Slide",
        "limit": 4,
        "settings": [
          {
            "id": "image",
            "type": "image_picker",
            "label": "Image"
          }
        ]
      }
    ]
  }
{% endschema %}

請注意,Slide 也有一種 slide。你可以為塊提供自己的型別,而不是 Shopify 提供的型別。

要使用它,你只需迴圈遍歷 HTML / Liquid 程式碼中的每個塊。

<div class="slider">
  {% for block in section.blocks %}
    <img src="{{ block.settings.image | img_url: 'master' }}" alt="" />
  {% endfor %}
</div>