Question

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

我在这里找到了一些线索让我明白这一点。参见下面的代码：

puts "Enter String"

string= gets.chomp

puts "Enter Left Position"

left_position= gets.chomp

define flip(string,left_position)

string temp= string[left_position]

string[left_position]= string[left_position+1]

string[left_position]= temp

return string

flip("hello",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 %}

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

Answer 2

{% for block in section.blocks %}  
  <div class="image_box"> 
       {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
  </div>
 {% endfor %}



{% schema %}
  {
    "name": "multi image",
	"max_blocks": 4,
    "settings": [
		 {
      "type": "header",
      "content": "multi image"
    }  
	],
  "blocks": [
    {
      "type": "select",
      "name": "Add Button",
      "settings": [
        {
          "id": "image",
          "type": "image_picker",
       	  "label": "Add image"
        } 
      ]
    }
  ],
  "presets": [
    {
      "name": "multi image",
      "category": "text" 
    }
  ]
  }

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

2 个答案:

部分

部分设置和块之间的区别

语法差异

您的代码有什么问题？

您的代码应该如何