JSON Schema

JSON Schema — это стандарт для описания структуры JSON-данных. Позволяет валидировать, документировать и генерировать JSON-объекты.

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

Базовая структура

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    }
  }
}

Основные поля

Однострочный текст

Добавляет однострочное текстовое поле. Позволяет администраторам магазина изменять небольшой текстовый контент без редактирования кода.

JSON Schema:

1{
2  "type": "string",
3  "title": "Название поля",
4  "default": "Значение по-умолчанию"
5}

Внешний вид

Многострочный текст

Добавляет многострочное текстовое поле. Позволяет администраторам магазина изменять текстовый контент без редактирования кода.

JSON Schema:

1{
2  "$ref": "#/definitions/TextArea",
3  "title": "Описание",
4  "default": "Оплата частями в Сплит"
5}

Внешний вид

Выпадающий список

Добавляет поле c выпадающим списком доступных вариантов. Кроме стандартных атрибутов select используются дополнительные:

Атрибут	Описание	Обязательный
`enum`	Массив доступных значений	Да
`options`	Словарь соответствия значений и заголовков	Нет

JSON Schema:

 1{
 2  "type": "string",
 3  "default": "primary",
 4  "title": "Внешний вид шапки",
 5  "enum": ["none", "transparent"],
 6  "options": {
 7    "none": "Непрозрачная",
 8    "transparent": "Прозрачная"
 9  }
10}

Внешний вид

Число

Добавляет поле с ползунком для числового ввода. Кроме стандартных атрибутов range используются дополнительные:

Атрибут	Описание	Обязательный
`min`	Минимальное значение	Да
`max`	Максимальное значение	Да
`step`	Размер шага между соседними значениями. По-умолчанию `1`	Нет
`unit`	Единица измерения. Например, можно указать px для размера шрифта.	Нет

JSON Schema:

 1{
 2  "type": "number",
 3  "unit": "шт.",
 4  "step": 2,
 5  "title": "Количество отображаемых фотографий",
 6  "default": 4,
 7  "maximum": 12,
 8  "minimum": 2
 9}

Внешний вид

Переключатель

Добавляет поле для переключения Boolean значений.

JSON Schema:

1{
2  "type": "boolean",
3  "title": "Закреплять шапку при скролле"
4}

Внешний вид

Специальные настройки

Изображение

Добавляет поле для выбора файла с картинкой. Выбранные изображения автоматически нарезаются под требуемые размеры.

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

JSON Schema:

1{
2  "$ref": "#/definitions/ImageModel",
3  "title": "Ссылка"
4}

Внешний вид

Ссылка

Добавляет поле для выбора ссылки. Поддерживается ввод внешних URL-адресов или выбор предсозданных страниц.

Можно использовать для выбора URL-адреса который будет использоваться для перехода по кнопке.

JSON Schema:

1{
2  "$ref": "#/definitions/LinkSource",
3  "title": "Ссылка"
4}

Внешний вид

Rich-текст

Добавляет многострочное текстовое поле для rich-контента.

JSON Schema:

1{
2  "$ref": "#/definitions/MarkdownContent",
3  "title": "Текст"
4}

Внешний вид

Цвет

Добавляет поле для выбора цвета.

Используйте для выбора цвета различных элементов секций, например, как цвет вспомогательное текста.

JSON Schema:

1{
2  "$ref": "#/definitions/ThemeColor",
3  "title": "Цвет",
4  "default": "#6b098B"
5}

Внешний вид

Коллекция товаров

Добавляет поле для выбора предсозданной коллекции товаров.

JSON Schema:

1{
2  "$ref": "#/definitions/ProductsSource",
3  "title": "Товары"
4}

Внешний вид

Цветовая схема

Добавляет поле для выбора предсозданной палитры сайта.

JSON Schema:

1{
2  "$ref": "#/definitions/Palette",
3  "title": "Палитра цветов"
4}

Внешний вид

Горизонтальный отступ секции

Добавляет поле для выбора горизонтального отступа секций.

JSON Schema:

1{
2  "$ref": "#/definitions/SectionHPadding",
3  "title": "Отступ по краям на десктопе"
4}

Внешний вид

Горизонтальный отступ на телефоне

Добавляет поле для выбора горизонтального отступа секций на телефоне.

JSON Schema:

1{
2  "$ref": "#/definitions/SectionHPaddingTouch",
3  "title": "Отступ по краям на телефоне"
4}

Внешний вид

Вертикальный отступ секции

Добавляет поле для выбора вертикального отступа секций.

JSON Schema:

1{
2  "$ref": "#/definitions/SectionVPadding",
3  "title": "Отступ над секцией"
4}

Внешний вид

Модули

В Яндекс KITᵝ нет настройки для массивов. Для создания независимых и/или повторяющихся внутри секций блоков настроек используется специальное свойство modules.

Модули в Яндекс KITᵝ — это инструмент для создания динамических, повторяющихся блоков контента с собственными настройками. Они дают контент-менеджерам возможность редактировать содержимое страниц самостоятельно, без помощи разработчиков, при этом дизайн и структура данных остаются едиными.

Базовая структура модулей

JSON Schema:

 1{
 2  "$schema": "http://json-schema.org/draft-07/schema#",
 3  "type": "object",
 4  "properties": {
 5    "modules": {
 6      "type": "array",
 7      "title": "Кастомный модуль",
 8      "items": {
 9        "type": "object",
10        "required": [
11          "description",
12          "title"
13        ],
14        "properties": {
15          "title": {
16            "type": "string",
17            "title": "Заголовок"
18          },
19          "description": {
20            "$ref": "#/definitions/TextArea",
21            "title": "Описание"
22          }
23        }
24      }
25    }
26  }
27}

Пример шаблона

 1{{#each settings.modules as |module|}}
 2    <ya-kit-v-stack gap="100" class="item">
 3        <ya-kit-text size="md">
 4            {{module.title}}
 5        </ya-kit-text>
 6        <ya-kit-text>
 7            {{module.description}}
 8        </ya-kit-text>
 9    </article>
10{{else}}
11    <ya-kit-text>Модули не добавлены!</ya-kit-text>
12{{/each}}
13