在 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

您正在尝试使用适当的工具但以错误的方式构建已经存在的东西。

部分

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

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

• 使用部分设置
• 使用剖面块

部分设置和块之间的差异

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

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

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

语法差异

部分设置如下所示：

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

这是你如何称呼它的：

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

部分是主要部分object，之后传递 JSON 对象，因此它变成section.settings.slide_image.

块语法如下所示：

{% 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) 您正在使用剖面块，但您正在调用剖面设置。

2）您正在使用相同的图像字段创建多个块类型 - 这样做没有意义。

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 %}