Виджет с блоками
В данном уроке мы создадим виджет с блоками (blockListWidgetType), который будет содержать несколько блоков, внутри которых будут картинка и ссылка, и несколько настроек виджета. В данном виджете мы будем использовать шаблон привязанных блоков - system-banner-7. Поля: Картинка (Файл - image), Ссылка (Универсальная ссылка - link)
Шаг 1 (создание виджета)
Создаем виджет в панели администратора:
- Переходим в панель администратора Вашего сайта -> Настройки -> Настройки сайта -> Виджеты. Нажимаем кнопку "Создать".
- В адресной строке должно быть - Имя_Вашего_Магазина.myinsales.ru/admin2/widget_types/new
Выбираем тему в которой будем использовать виджет. Вводим название: banner_test_block, описание: banner_descr_block. - Выбираем категорию - баннеры, тип - Виджет с блоком. Артикул: BBT1.2, Идентификатор: BB102, Типы страниц - все. Типы списков виджетов - основной контент. Шаблон блока - Универсальная ссылка + Картинка
- Нажимаем сохранить и переходим в раздел дизайн и выбираем указанную тему, нажимаем "редактировать шаблон". В левой панели редактора выбираем "Контент". Нажимаем кнопку "Добавить виджет". Выбираем группу "баннеры" и выбираем виджет с артикулом BBT1.2.
- В левой панели редактора нажимаем кнопку "редактировать код"
- Добавляем код из примеров ниже.
Шаг 2. HTML (snippet.liquid)
Редактируем snippet.liquid.
Пример кода:
<div class="banner-list grid-list">
{% for slide in data.blocks %}
{% if slide.link != "" %}
<a href="{{ slide.link }}" class="banner-list__item">
{% else %}
<div class="banner-list__item">
{% endif %}
<div class="img-ratio img-fit banner-list__item-photo">
<div class="img-ratio__inner">
{% assign image_title = slide.name | escape %}
{% if slide.image %}
{% assign img_width = 686 %}
<picture>
<img data-src="{{ slide.image | image_url: img_width, resizing_type: 'fill-down', quality:100 }}" class="lazyload" alt="{{ image_title }}">
</picture>
{% endif %}
</div>
</div>
{% if slide.link != "" %}
</a>
{% else %}</div>{% endif %}
{% endfor %}
</div>
{% assign image_title = null %}
{% for slide in data.blocks %}
- цикл для перебора блоков slide
. {% if slide.link != "" %}
- проверка передачи пустого строкового значения в ссылке блока slide
. {{ slide.link }}
- внутри атрибута href
мы указываем поле link
блока slide
. В редакторе будет отображаться пустое поле для ссылки.
{% if slide.image %}
- проверка передачи пустого значения в поле с изображением блока slide
.
data-src="{{ slide.image }}
- поле image
блока slide
. В редакторе будет отображаться поле с загрузкой изображения.
Шаг 3. Настройки блоков JSON (setup.json)
В файле setup мы прописываем блоки с параметрами image
и link
, в примере ниже 6 блоков с пустыми ссылками и одинаковыми изображениями.
Пример:
{
"blocks": [{
"image": "23802459",
"link": "#"
},
{
"image": "23802459",
"link": "#"
},
{
"image": "23802459",
"link": "#"
},
{
"image": "23802459",
"link": "#"
},
{
"image": "23802459",
"link": "#"
},
{
"image": "23802459",
"link": "#"
}
]
}
Шаг 4. Форма настроек JSON (settings_form.json)
Редактируем settings_form.json.
Пример кода:
{
"{{ messages.banner }}":[
{
"group_name":"{{ messages.indentation }}",
"items": [
{
"class":"range",
"name":"grid-list-row-gap",
"min":0,
"max":10,
"step":0.5,
"unit":"rem",
"label":"{{ messages.vertical_padding_between_blocks }}",
"type":"number",
"with_btns": true
},
{
"class":"range",
"name":"grid-list-column-gap",
"min":0,
"max":10,
"step":0.5,
"unit":"rem",
"label":"{{ messages.horizontal_padding_between_blocks }}",
"type":"number",
"with_btns": true
}
]
}
],
"{{ messages.label_widget }}": [
{
"group_name":"{{ messages.background }}",
"items": [
{
"name":"bg",
"label":"{{ messages.widget_background_color }}",
"value":"",
"type":"color",
"clearable": true
}
]
},
{
"group_name":"{{ messages.adaptive }}",
"items": [
{
"class": "checkbox",
"name": "hide-desktop",
"label": "{{ messages.hide_desktop }}",
"value": null,
"type": "checkbox"
}
]
}
]
}
{{ messages.content }}
- является заголовком группы - "Контент".
"banner-img"
- типа файл, предлагает загрузить пользователю картинку в редакторе.
"general": true
- основная настройка.
"general_position": 1
- порядок в списке основных настроек.
"name": "font-size"
- размер текста.
"name": "hide-title"
- скрыть заголовок в редакторе.
Шаг 5. Переводы сообщений для формы (messages.json)
В файле messages мы прописываем перевод ключа hide_desktop
из settings_form.json на 4 языках. Более подробно можно почитать здесь.
Пример:
{
"ru": {
"hide_desktop": "Скрыть на десктопе"
},
"ua": {
"hide_desktop": "Сховати на робочому столі"
},
"en": {
"hide_desktop": "Hide on Desktop"
},
"es": {
"hide_desktop": "Para Mostrar u ocultar favoritos, vaya a la configuración de la plantilla y Active favoritos"
}
}
Шаг 6 Настройки по умолчанию JSON (settings_data.json)
Редактируем settings_data.json.
Пример:
{
"hide-desktop": false,
"grid-list-row-gap": 2,
"grid-list-column-gap": 2,
"bg": "#ddd9d6"
}
hide-desktop
- скрыть на детскопе, по умолчанию false
, что означает что мы не скрываем на детскопе виджет.
grid-list-row-gap
- отступ по вертикали, в 2
rem.
grid-list-column-gap
- отступ по горизонтали, в 2
rem.
bg
- цвет фона по умолчанию "#ffda33"
Шаг 7 (info.json)
Панель администратора -> настройки -> Настройки сайта -> Виджеты, выбираем виджет с артикулом BBT1.1 и нажимаем на иконку карандаша. Подключаем зависимости: jquery, my-layout, vanilla-lazyload.
Шаг 8. JS (snippet.js)
Редактируем snippet.js.
Пример:
$widget.each(function(index, el) {
new LazyLoad({
container: $(el).get(0),
elements_selector: '.lazyload'
});
});
Шаг 9. SCSS (snippet.scss)
Пропишем стили виджета и не забудем прописать стили для разных значений настроек. Интегрируем миксин @include background-color(--bg)
и посмотрим как он работает на практике:
@include background-color(--bg);
&[style*="--img-fit:contain"] {
.banner-list__item .img-ratio img {
object-fit: contain;
}
}
.banner-list {
grid-template-columns: repeat(2, 1fr);
}
.banner-list__item {
grid-column: auto /span 1;
text-decoration: none;
}
@media screen and (max-width: 767px) {
.banner-list__item {
grid-column: auto /span 2;
text-decoration: none;
}
}
.banner-list__item {
.img-ratio img {
transition: all .5s;
}
}
.banner-list__item-photo {
position: relative;
z-index: 1;
}