В данном уроке мы создадим виджет с блоками (blockListWidgetType), который будет содержать несколько блоков, внутри которых будут картинка и ссылка, и несколько настроек виджета. В данном виджете мы будем использовать шаблон привязанных блоков - system-banner-7. Поля: Картинка (Файл - image), Ссылка (Универсальная ссылка - link)
Создаем виджет в панели администратора:
Редактируем 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. В редакторе будет отображаться поле с загрузкой изображения.
В файле setup мы прописываем блоки с параметрами image и link, в примере ниже 6 блоков с пустыми ссылками и одинаковыми изображениями.
Пример:
{
"blocks": [{
"image": "23802459",
"link": "#"
},
{
"image": "23802459",
"link": "#"
},
{
"image": "23802459",
"link": "#"
},
{
"image": "23802459",
"link": "#"
},
{
"image": "23802459",
"link": "#"
},
{
"image": "23802459",
"link": "#"
}
]
}
Редактируем 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" - скрыть заголовок в редакторе.
В файле 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"
}
}
Редактируем 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"
Панель администратора -> настройки -> Настройки сайта -> Виджеты, выбираем виджет с артикулом BBT1.1 и нажимаем на иконку карандаша. Подключаем зависимости: jquery, my-layout, vanilla-lazyload.
Редактируем snippet.js.
Пример:
$widget.each(function(index, el) {
new LazyLoad({
container: $(el).get(0),
elements_selector: '.lazyload'
});
});
В данном примере реализуем ленивую загрузку изображений с помощью плагина LazyLoad | Github
Пропишем стили виджета и не забудем прописать стили для разных значений настроек. Интегрируем миксин @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;
}
