javascript - 如何在 Shopify 中使用循环打印商品？

Question

我对 Shopify 非常陌生，我正在尝试从我的数组中打印项目。我已使用 Shopify CMS 将文本输入到文本字段中。但是，当我在浏览器中加载页面时，我看到的只是一个空的 <ul> 。因此，下面的循环有问题，但我无法弄清楚。欢迎任何帮助。

<div class="featured_item">
      <ul class="featured_item_list">
          {% for i in featured_items %}
          <li>
            <p>{{ i }}</p>
          </li>
          {% endfor %}
      </ul>
</div>


{% schema %}
  {
    "name": "Featured items",
    "class": "section section_homepage section_featured_items",
    "settings": [
        {
            "type": "text",
            "id": "itemOne",
            "label": "Item one text"
        },
        {
            "type": "text",
            "id": "itemTwo",
            "label": "Item two text"
        }
      ],
    "presets": [
        {
            "name": "Featured items",
            "category": "text"
        }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Answer 1

您需要阅读有关部分以及如何正确使用它们的更多信息:https://help.shopify.com/en/themes/development/sections

目前您正在尝试循环...什么也没有。

任何地方都没有 featured_items 变量分配，即使有，也没有 block (可以循环的数组)。

当您在某个部分中并且想要从该部分的架构中获取特定字段时，您始终会浏览该部分。

所以现在你有以下内容:

"settings": [
    {
        "type": "text",
        "id": "itemOne",
        "label": "Item one text"
    },
    {
        "type": "text",
        "id": "itemTwo",
        "label": "Item two text"
    }
],

因此，您必须事先调用 section ，如果您想获取 itemOne 字段，则可以像 section.settings.itemOne 那样调用它，因为itemOne 出现在设置部分。

这同样适用于第二个 itemTwo，它应该被称为 section.settings.itemTwo。

<div class="featured_item">
      <ul class="featured_item_list">
        <li>
            <p>{{ section.settings.itemOne }}</p>
        </li>
        <li>
            <p>{{ section.settings.itemTwo }}</p>
        </li>
      </ul>
</div>

<小时/>

但是，由于您正在制作可重复的内容，因此实际上最好使用 BLOCKS。

block 的模式语法是:

{% schema %}
  {
    "name": "Featured items",
    "class": "section section_homepage section_featured_items",
    "blocks": [
      {
        "type": "some_type",
        "name": "Some Type",
        "settings": [
          {
            "id": "content",
            "type": "text",
            "label": "Content"
          }
        ]
      }
    ],
    "presets": [
        {
          "name": "Featured items",
          "category": "text"
        }
   ]
  }
{% endschema %}

然后，由于 block 实际上是返回数组的可重复内容，因此您可以为循环调用 section.blocks ，它会变成这样:

<div class="featured_item">
    <ul class="featured_item_list">
        {% for block in section.blocks %}
            <li>
            <p>{{ block.settings.content }}</p>
            </li>
        {% endfor %}
    </ul>
</div>

现在您有了可重复的 block ，您可以多次添加这些 block 以创建动态列表而不是固定数量。

考虑阅读有关部分以及如何使用它们的更多信息，因为它们还有很多内容。