Shopify: создание пользовательских полей с помощью шаблона JSON и схемы

Вопрос или проблема

Shopify: создание пользовательских полей с помощью шаблона JSON и схемы

{
  "sections": {
    "main": {
      "type": "global",
      "settings": {},
      "blocks": {
        "excerpt": {
          "type": "excerpt",
          "settings": {
            "text": "<p>привет мир</p>"
          }
        }
      },
      "block_order": [
        "excerpt"
      ]
    }
  },
  "order": [
    "main"
  ]
}

<div>
{%- for block in section.blocks -%}
{%- case block.type -%}
  {%- when 'excerpt' -%}
  {{ block.settings.text }} 
{%- endcase -%}
{%- endfor -%}
</div>

{% schema %}
{
  "name": "privacy",
  "settings": [],
  "blocks": [
    {
      "type": "excerpt",
      "name": "excerpt",
      "limit": 1,
      "settings": []
    }
  ]
}
{% endschema %}

<p>привет мир</p>

Ответ или решение

Для создания пользовательских полей в Shopify с использованием JSON-шаблона и схемы, вам нужно правильно настроить иерархию шаблонов и секций. Давайте разберем ваш код и добавим необходимые корректировки для достижения желаемого результата, чтобы текст, который вы указали в коде, отображался на странице.

Шаг 1: Измените файл JSON-шаблона

Ваш JSON-шаблон templates/page.global.json выглядит неплохо, но нам нужно убедиться, что он правильно определяет блоки внутри секции main. Проверьте, что такой файл действительно существует, и обновите его следующим образом:

{
  "sections": {
    "main": {
      "type": "global",
      "settings": {},
      "blocks": {
        "excerpt": {
          "type": "excerpt",
          "settings": {
            "text": "<p>hello world</p>"
          }
        }
      },
      "block_order": ["excerpt"]
    }
  },
  "order": ["main"]
}

Шаг 2: Обновите секцию global.liquid

Теперь нужно убедиться, что ваш файл sections/global.liquid правильно обрабатывает вывод для блока excerpt. Проверьте, что он выглядит так:

<div>
  {%- for block in section.blocks -%}
    {%- case block.type -%}
      {%- when 'excerpt' -%}
        {{ block.settings.text | escape }}
    {%- endcase -%}
  {%- endfor -%}
</div>

{% schema %}
{
  "name": "Global Section",
  "settings": [],
  "blocks": [
    {
      "type": "excerpt",
      "name": "Excerpt",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "Excerpt Text",
          "default": "<p>hello world</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Default",
      "category": "Custom"
    }
  ]
}
{% endschema %}

Объяснение изменений:

1. Правильные настройки блока: Убедитесь, что настройка блока excerpt содержит поле с типом richtext. Это позволяет вводить HTML-содержимое. Вы также указали текст по умолчанию.

2. Экранирование текста: Использование фильтра escape поможет избежать потенциальных проблем с выводом HTML-кода.

3. Название секции и предустановки: Я добавил более актуальное название секции и предустановки, чтобы сделать управление более организованным.

Шаг 3: Проверка

После этих изменений опубликуйте и обновите страницу с шаблоном. Перейдите на страницу вашего сайта, использующую этот шаблон, и вы должны увидеть текст "hello world". Если вы хотите редактировать текст на различных страницах, убедитесь, что у каждого блока excerpt есть уникальные значения.

Завершение

Если вы все еще не видите ожидаемый результат, убедитесь, что:

• Убедитесь, что ваш шаблон page.global.json корректно применяется к нужной странице в админке Shopify.
• Проверьте консоль браузера на наличие ошибок JavaScript или загрузки ресурсов.

С помощью вышеуказанных шагов и корректировок вы должны успешно создать пользовательское поле, аналогичное экстракту в WordPress.