Несколько проблем с пользовательскими разделами в JSON в Shopify

Question

Впервые я пытаюсь создать пользовательский раздел на своей странице shopify. Но я столкнулся с несколькими ошибками.

Цель: создать раздел из двух изображений героев, расположив их горизонтально, без смещения. На каждом изображении героя есть кнопка / призыв к действию. При нажатии на левое изображение посетитель попадает в интернет-магазин. При нажатии на нужное изображение посетитель попадает на веб-страницу.

Сейчас: На данный момент я создал настраиваемый раздел в папке «Код редактирования»> «Разделы» и подключился. это на страницу index.liquid. В качестве ориентира, для меня раздел имеет заголовок и текстовую область (<h3> + <p>). Ниже есть два тега <img>, обернутые в два элемента (<div class="row"> + <div class="column">). Эти два элемента служат для выравнивания изображений по горизонтали.

Когда я вхожу в меню настройки с этим фрагментом кода. Я могу разместить заголовок и текст на странице в режиме реального времени, но изображения не отображаются. Однако изображения отображаются в меню настройки, но они никогда не видны на реальной странице.

Вместо этого на кнопке страницы есть две пустые области изображения, расположенные правильно, но без содержимого. Эти пятна изображения совершенно не зависят от того, что я делаю в меню настройки.

Я надеюсь, что кто-то сможет мне помочь.

Я загрузил несколько изображений, чтобы дать представление о желаемом результате. Введите описание изображения здесь

также это текущее изображение того, как выглядит страница

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

Answer 1

Неправильный способ доступа к настройкам блока. Вам нужно l oop пройти через блоки, чтобы получить настройки.

Хороший пример вы можете найти в справочных документах 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 %}

Вам нужно будет только l oop над 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 %}