info.json
Метаданные виджета, в которых прописывается: поколение виджета, тип виджета, уникальный артикул, доступность в шаблонах страницы магазина, виджет-лист (раздел виджетов), категории виджетов, используемый шаблон блоков, доступные зависимости (плагины).
Поколение виджета
На данный момент используется только виджеты 4 поколения, пример:
"generation": 4
Типы виджетов:
Без привязки блоков
"type": "SimpleWidgetType"
"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"]
Доступный список страниц (то как мы прописываем 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_list_kinds":["content", "footer"]
Категории виджетов
Категории виджетов нужны для сортировки виджетов по категориям при добавлении нового виджета.
Например, категория баннеры:
"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
Шаблон привязанных блоков
Внутри блока есть поля настройки, которые можно поменять в редакторе. Для каждого набора полей есть свой уникальный шаблон. Можно выбрать существующий, а можно создать свой в панели администратора.
Нужно перейти в Настройки -> Настройки сайта -> Шаблоны блоков
. Url - Имя_вашего_магазина/admin2/block_templates
.
В столбце поля перечислены типы используемых полей. Слева указан идентификатор, который прописывается в значении параметра block_template_handle
.
"block_template_handle": "system-banner-2"
добавить
, указать название и идентификатор. Затем нажать на иконку карандаша, чтобы добавить нужные поля. Далее нужно нажать добавить
под заголовком поля.
Название на русском, идентификатор латинскими буквами.
В качестве примера можно создать шаблон блока для изображения со ссылкой.
Название - баннер. Идентификатор - banner-image-link
.
Название | Идентификатор | Тип |
---|---|---|
Ссылка | link | Текст |
Изображение | image | Файл |
Чтобы использовать созданный шаблон блока необходимо указать индентификатор:
"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 | Документация