В данном уроке мы создадим простой виджет (SimpleWidgetType), который будет содержать текст, изображение и несколько настроек.
Создаем виджет в панели администратора:
Редактируем snippet.liquid.
<div class="banner-list__item">
<div class="banner-list__item-title h2">
{{ widget_settings.banner_name }}
</div>
<div class="banner-list__item-image">
{% if widget_settings.banner-img %}
{% assign img_width = widget_settings.layout-content-max-width | default: settings.layout-content-max-width | divided_by: 2 %}
{% if widget_settings.layout-wide-content %}
{% assign img_width = 1000 %}
{% endif %}
<div class="img-ratio">
<div class="img-ratio__inner">
<picture>
<source media="(min-width:769px)" data-srcset="{{ widget_settings.banner-img | image_url: img_width, format: 'webp', resizing_type: 'fit_width', quality: 100 }}" type="image/webp" class="lazyload">
<source media="(max-width:480px)" data-srcset="{{ widget_settings.banner-img | image_url: 500, format: 'webp', resizing_type: 'fit_width', quality: 100 }}" type="image/webp" class="lazyload">
<source media="(max-width:768px)" data-srcset="{{ widget_settings.banner-img | image_url: 768, format: 'webp', resizing_type: 'fit_width', quality: 100 }}" type="image/webp" class="lazyload">
<img data-src="{{ widget_settings.banner-img | image_url: img_width, resizing_type: 'fit_width', quality: 100 }}" class="lazyload">
</picture>
</div>
</div>
{% endif %}
</div>
</div>
widget_settings.banner_name - название баннера из настроек виджета{% if widget_settings.banner-img %} - условие если картинка загружена, то ширину картинки берем из общих настроек контента в шаблоне
Редактируем settings_form.json.
Пример:
{
"{{ messages.content }}": [
{
"items": [
{
"class": "text",
"name": "banner_name",
"label": "{{ messages.title }}",
"value": null,
"type": "text",
"general": true
},
{
"name":"banner-img",
"label":"{{ messages.picture }}",
"value":null,
"type":"file",
"general": true,
"help": "{{ messages.recommended_size }}: 915x458 px",
"general_position": 1
},
{
"class": "range",
"name": "font-size",
"label": "{{ messages.font_size }}",
"min": 14,
"max" : 24,
"step": 2,
"type":"number",
"with_btns": true,
"unit": "px",
"hide_mobile": true
},
{
"class": "checkbox",
"name": "hide-title",
"label": "{{ messages.hide_title }}",
"value": null,
"type": "checkbox",
"general": true
}
]
}
]
}
{{ messages.content }} - является заголовком группы - "Контент"."banner-img" - типа файл, предлагает загрузить пользователю картинку в редакторе."general": true - основная настройка."general_position": 1 - порядок в списке основных настроек."name": "font-size" - размер текста."name": "hide-title" - скрыть заголовок в редакторе.
Редактируем settings_data.json.
Пример:
{
"banner_name": {
"ru": "Как подобрать подарок?",
"en": "How to choose a gift?",
"ua": "Як підібрати подарунок?ы",
"es": "¿Cómo recoger un regalo?ы"
},
"banner_content": {
"ru": "Мы сталкиваемся с этим вопросом каждый раз перед праздниками.",
"en": "We face this question every time before the holidays.",
"ua": "Ми стикаємося з цим питанням щоразу перед святами.",
"es": "Nos enfrentamos a esta pregunta cada vez antes de las vacaciones."
},
"font-size": 20,
"hide-title": false
}
В данном файле мы прописываем значение настроек по умолчанию, они переведены на другие языки."font-size": 20 - размер языка в 20 пикселей."hide-title": false - не скрывать заголовок.
Панель администратора -> настройки -> Настройки сайта -> Виджеты, выбираем виджет с артикулом 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
Пропишем стили виджета и не забудем прописать стили для разных значений настроек
.banner-list__item {
display: grid;
grid-template-columns: auto var(--img-size, 50%);
gap: 1.5em;
position: relative;
align-items: var(--align-content, start);
font-size: var(--font-size, 16px);
--controls-font-size-m: var(--font-size);
}
&[style*="--hide-title:true;"] .banner-list__item-title {
display: none;
}
