shopify - 在 Shopify 中添加自定义多图像部分

Question

我正在尝试在 Shopify 中添加一个自定义部分，以允许用户上传 2 张宣传图片。我是新手，但我设法为 1 张图片创建了一个自定义部分，但是当我尝试为同一部分中的两张图片尝试时，上传后图片不会显示在页面上。

我在这里找到了一些线程来让我明白这一点。见以下代码:

{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}

{% schema %}
  {
    "name": "PromoTwo",
    "blocks":[
      {
        "type": "block-1",
        "name": "Block 1",
        "settings": [
          {
            "type": "image_picker",
            "id": "test_2",
            "label": "Promo Image 1"
          }
        ]
      },
      {
        "type": "block-2",
        "name": "Block 2",
        "settings": [
          {
            "type": "image_picker",
            "id": "test_3",
            "label": "Promo Image 2"
          }
        ]
      }
    ],
  "presets": [
    {
      "name": "PromoTwo",
      "category": "Content"
    }
  ]
  }
{% endschema %}

我对这个部分的目标是创建一个包含两个并排图像的部分，用户可以自己上传。

我怀疑我在这里做错了什么:

{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}

Answer 1

您正在尝试使用正确的工具构建已经存在的东西，但方法是错误的。

章节

部分的主要思想是为管理员提供一种交互式方式来更新特定元素的内容。

一个部分有两种方法来实现这一点:

• 使用部分设置
• 使用区 block

版 block 设置和版 block 的区别

部分设置是可以通过自定义面板填充的静态字段。静态是指如果不编写额外代码就无法动态添加更多内容。

另一方面， block 与部分设置相同，但它们可以是动态的，或者您可以添加多个 block ，而无需为每个新 block 编写额外的代码。

如果你愿意，你可以在同一个节文件中使用它们，但你需要学习如何正确调用它们。

语法差异

这是一个部分设置的样子:

{% schema %}
  {
    "name": "Slideshow",
    "settings": [
      {
        "id": "slide_image",
        "type": "image_picker",
        "label": "Image"
      }
    ]
  }
{% endschema %}

这是你如何调用它:

{{ section.settings.slide_image | img_url: '1024x' | img_tag }}

Section 是主要的对象，然后传递 JSON 对象，因此它变成了 section.settings.slide_image。

---

这是 block 语法的样子:

{% schema %}
  {
    "blocks": [
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "id": "slide_image",
            "type": "image_picker",
            "label": "Image"
          }
        ]
      }
    ]
  }
{% endschema %}

下面是正确的调用方式:

{% for block in section.blocks %}
  {{ block.settings.slide_image | img_url: '1024x' | img_tag }}
{% endfor %}

你的代码有什么问题？

1) 您正在使用部分 block ，但您正在调用部分设置。

2) 您正在创建具有相同图像字段的多个 block 类型 - 这没有意义。

3) 不要使用 img_url: 'medium' 这已弃用。请改用数字。例如 img_url: '1024x'。

你的代码应该是什么样的

你的代码应该是这样的:

{% for block in section.blocks %}
  {{ block.settings.promo_image | img_url: '1024x' | img_tag }}
{% endfor %}

{% schema %}
{
    "name": "Promo",
    "blocks": [
      {
        "type": "promo",
        "name": "Puote",
        "settings": [
          {
            "id": "promo_image",
            "type": "image_picker",
            "label": "Promo image"
          }
        ]
      }
    ],
    "presets": [
        {
        "name": "PromoTwo",
        "category": "Content"
        }
    ]
}
{% endschema %}