info.json

Метаданные виджета, в которых прописывается: поколение виджета, тип виджета, уникальный артикул, доступность в шаблонах страницы магазина, виджет-лист (раздел виджетов), категории виджетов, используемый шаблон блоков, доступные зависимости (плагины).

Поколение виджета

На данный момент используется только виджеты 4 поколения, пример:

"generation": 4

Типы виджетов

Без привязки блоков

"type": "SimpleWidgetType"

С блоками (необходимо добавить файл setup.json с указанием параметром блоков). Виджет с блоками позволяет пользователю добавлять блоки и менять их местами через редактор:

"type": "blockListWidgetType"

Шаблон блока это поля с разными типами настроек.

Типы виджетов, примеры:

handle виджета

Виджет лежит в определенной директории. handle виджета должен совпадать с названием папки, в которой лежат все файлы виджета. Главное - чтобы имя папки было уникальным, при этом наименование может быть любым.

"handle":"v4_article_products_beauty_article_1"

Уникальный артикул виджета

Наименование уникального артикула виджета состоит из заглавных латинских букв и цифр. Мы придумываем артикул на основе сокращений его названия, F - footer, M - medium, 1 - первый в группе. Важно проверить, что артикул виджета уникален. Можно посмотреть артикул виджета в редакторе шаблона при добавлении. При изменения кода виджета в редакторе шаблона в его артикул добавляется точка (пример FM1.1). При добавлении виджета с одинаковым артикулом в наименование добавляется тире - (пример FM1-1 и FM1-2).

"sku":"FM1"

Привязка к типу страницы

"page_kinds":["product,collection"]

Если указать, например, "collection", то виджет будет доступен только на странице каталога. Как они выглядят, можно увидеть посередине верхней панели. Там расположен выпадающий список со всеми страницами шаблона.
Доступный список страниц (то как мы прописываем page_kinds в файле info.json:

• all - все страницы;
• index - главная страница;
• collection - каталог;
• product - карточка товара;
• cart - страницы корзины;
• page - страница;
• search - страницы поиска;
• blog - страницы блога;
• compare - страница сравнения;
• article - страница статьи;
• favorite - страница избранного.

Области страницы

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

• верхняя панель - top_panel;
• шапка - header;
• контент - content;
• подвал - footer;
• нижняя панель - bottom_panel;
• вне контента - outside;
• сайдбар - sidebar.

Категории виджетов

Категории виджетов нужны для сортировки виджетов по категориям при добавлении нового виджета.
Например, категория баннеры:

"widget_category_handle":"banner"

• Аналогичные товары | product-similar
• Баннеры | banner
• Блог | blog
• Всплывающие окна | modals
• Другие | drugie
• Заголовки страниц | page-title
• Информация о товаре | product-info
• Карточки товара | products-cards
• Комментарии | comments
• Корзина | cart
• Навигация | navigation
• Описание категории | collection-description
• Отзывы | reviews
• Подвалы | footers
• Подкатегории | collection-subcollections
• Преимущества | benefits
• Разделители | delimeters
• Результаты поиска | search-results
• Слайдеры | sliders
• Сопутствующие товары | product-related
• Сравнение | compare
• Тексты и картинки | text
• Товары в категории | collection-products
• Товары в сайдбаре | product-sidebar
• Товары на главной | product-homepage
• Уведомления | notices
• Фильтры | filters
• Формы | forms
• Шапки | headers
• Ранее просмотренные товары | recently-viewed
• Избранное | favorites
• Статьи | articles
• Видео | video
• Истории | stories

Шаблон привязанных блоков

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

Нужно перейти в Настройки → Настройки сайта → Шаблоны блоков. В столбце поля перечислены типы используемых полей. Слева указан идентификатор, который прописывается в значении параметра block_template_handle.

"block_template_handle": "system-banner-2"

Чтобы создать свой шаблон блока, нужно нажать "Добавить", указать название и идентификатор. Затем нажать на иконку карандаша, чтобы добавить нужные поля. Далее нужно нажать "Добавить" под заголовком поля. Название на русском, идентификатор латинскими буквами. В качестве примера можно создать шаблон блока для изображения со ссылкой. Название - баннер. Идентификатор - banner-image-link.

Чтобы использовать созданный шаблон блока необходимо указать идентификатор:

"block_template_handle": "banner-image-link"

Пример:

{
  "type": "BlockListWidgetType",
  "handle": "system_widget_v4_stories_3",
  "sku": "ES2",
  "page_kinds": [
    "all"
  ],
  "widget_list_kinds": [
    "before_content",
    "content",
    "after_content",
    "footer"
  ],
  "generation": 4,
  "name": {
    "ru": "Истории",
    "en": "Stories",
    "es": "Cuentos"
  },
  "description": {
    "ru": "Истории в виде изображений",
    "en": "Stories as images",
    "es": "Historias como imágenes"
  },
  "widget_category_handle": "stories",
  "libraries": [
    "fslightbox",
    "jquery",
    "splide3",
    "my-layout",
    "vanilla-lazyload"
  ],
  "block_template_handle": "system-image-link-text"
}

Зависимости

Библиотеки виджета

"libraries": [
  "commonjs_v2",
  "jquery",
  "my-layout",
  "swiper"
]

Доступные зависимости (плагины). Зависимости используются только те, которые установлены на стороне платформы:

• commonjs_v2 - Фреймворк InSales | Документация
• jquery | Документация
• microalert | Github
• my-layout | Github
• vanilla-lazyload | Github
• splide | Документация
• splide3 | Документация
• fslightbox | Документация
• micromodal | Документация
• body-scroll-lock | Документация
• js-cookie | Документация
• cut-list | Документация
• nouislider | Документация