时间戳

首页 > 解决方案 > Shopify 中 JSON 中的自定义部分存在多个问题

json - Shopify 中 JSON 中的自定义部分存在多个问题

问题描述

在此处输入图像描述我第一次尝试在我的 shopify 页面中创建一个自定义部分。但是我遇到了多个错误。

目标：创建 2 个英雄图像的部分，水平定位器彼此相邻，没有疯狂。每个英雄形象都有一个按钮/号召性用语。单击左侧图像时，访问者将被带到网上商店。单击正确的图像时，访问者将被带到一个网页。

现在：此时我在编辑代码 > 部分文件夹中创建了一个自定义部分，并将其连接到 index.liquid 页面。作为指导，对于我自己来说，该部分有一个标题和文本区域 ( <h3>+ <p>)。下面有两个<img>标签包裹在两个 div ( <div class="row">+ <div class="column">) 中。这两个 div 用于水平对齐图像。

当我进入自定义菜单时，用这段代码。我可以在页面上实时放置标题和文本 - 但图像没有显示。然而，图像确实显示在自定义菜单中，但它们在实际页面上永远不可见。

相反，页面按钮中有两个空白图像点，位置正确 - 但没有内容。无论我在自定义菜单中做什么，这些图像点都完全不受影响。

我希望有人能够帮助我。

我上传了一些图片，以了解所需的结果`在此处输入图片描述

这也是页面外观的当前图像 在此处输入图像描述

<h3> {{section.settings.heading}}</h3>
<p>{{section.settings.description}}</p>

      <div class="row">

        <div class="column">
         
            <img src="{{blocks.settings.image | img_url: 'master' }}"/>

        </div>
 
      <div class="column">

            <img src="{{blocks.settings.image | img_url:'master'}}"/>

      </div>

{% schema %}
 {
	"name": "icons with text above",
	"settings": [
					{	
						"type": "text",
						"label": "Your headline for the section",
						"id": "heading"
					},
					
					{
						"type": "richtext",
						"label": "Your description",
						"id": "image"
					}
				],

		"blocks":[
					{
						"type": "image",
						"name": "image block",
						"settings": [
									{
									"type":"image_picker",
									"label": "your image",
									"id": "image"
									}

						]
					}

					]

}
{% endschema %}

标签： jsonshopify

解决方案

您尝试访问块设置的方式不正确。您需要遍历这些块才能获取设置。

您可以在Shopify 帮助文档中看到一个很好的示例：

{% for block in section.blocks %}
  <div class="grid-item" {{ block.shopify_attributes }}>
    {% case block.type %}
    {% when 'text' %}
      {{ block.settings.content }}
    {% when 'image' %}
      <img src="{{ block.settings.image | img_url }}">
    {% endcase %}
  </div>
{% endfor %}

您只需要遍历图像，columns因为这是图像所在的位置。

以下代码适用于我：

<h3>{{ section.settings.heading }}</h3>
<p>{{ section.settings.description }}</p>

<div class="row">
  {% for block in section.blocks %}
  <div class="column">
    <img src="{{ block.settings.image | img_url: '1024x1024' }}" />
  </div>
  {% endfor %}
</div>

{% schema %}
{
  "name": "icons with text above",
  "settings": [
    {   
      "type": "text",
      "label": "Your headline for the section",
      "id": "heading"
    },

    {
      "type": "richtext",
      "label": "Your description",
      "id": "image"
    }
  ],
  "blocks": [
    {
      "type": "select",
      "name": "Add Button",
      "settings": [
        {
          "id": "image",
          "type": "image_picker",
            "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Icons with text above",
      "category": "Image",
      "blocks": [
        { 
          "type": "select"
        },
        {
          "type": "select"
        }
      ]
    }
  ]
}
{% endschema %}

推荐阅读