Данный сниппет предназначен для написания html разметки. Осуществляется с помощью шаблонизатора liquid. Код виджета будет обернут в блок с классом layout и автоматически генерируемом уникальным классом виджета. У родительского класса layout при изменении настроек в редакторе меняется значение css переменных в атрибуте style.
widget_settings. Например, значение настройки ширины контента:
{{ widget_settings.layout-wide-content }}
data.blocks. Пример цикла для перебора блоков и получения значения свойства блока:
{% for block in data.blocks %}
{{ block.name }}
{% endfor %}
block.name - название указанное в блоке. Доступные поля можно посмотреть здесь{% assign img_width = widget_settings.layout-content-max-width | default: settings.layout-content-max-width %}
{% if widget_settings.layout-wide-content %}
{% assign img_width = 1920 %}
{% endif %}
<div class="banner-list__item {% unless widget_settings.banner-img-m %}show-mobile{% endunless %}">
{% assign img_width = widget_settings.layout-content-max-width | default: settings.layout-content-max-width %}
{% if widget_settings.layout-wide-content %}
{% assign img_width = 1920 %}
{% endif %}
<div class="h4 heading">{{ widget_settings.title_text-default }}</div>
<div class="gallery-contanier">
<div class="splide gallery-splide">
<div class="splide__slider">
<div class="splide__track">
<ul class="splide__list">
{% assign slide_index = 0 %}
{% for video in data.blocks %}
<li class="splide__slide" data-slide-index="{{ slide_index }}">
{% if video.link != blank %}
<div class="iframe_wrapper">
{{ video.link | video_iframe_by_url: id: video_id }}
</div>
{% else %}
<div class="banner-list__empty-video">
{{widget_settings.video-empty}}
</div>
{% endif %}
{% if video.image %}
<picture class="picture">
<source media="(min-width:769px)" data-srcset="{{ video.image | image_url: img_width, format: 'webp', resizing_type: 'fit_width' }}" type="image/webp" class="lazyload">
<source media="(max-width:480px)" data-srcset="{{ video.image | image_url: 500, format: 'webp', resizing_type: 'fit_width' }}" type="image/webp" class="lazyload">
<source media="(max-width:768px)" data-srcset="{{ video.image | image_url: 768, format: 'webp', resizing_type: 'fit_width' }}" type="image/webp" class="lazyload">
<img data-src="{{ video.image | image_url: 940, resizing_type: 'fit_width' }}" class="lazyload">
</picture>
{% else %}
<img class="picture" src="{{ video.link | video_preview_by_url }}" style="max-width: 100%" />
{% endif %}
<a href="" class="button banner-preview__play-btn">
<div class="triangle right"></div>
</a>
</li>
{% assign slide_index = slide_index | plus: 1 %}
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<div class="thumbnails-contanier js-init">
<div class="splide thumbnails-splide">
<div class="splide__track">
<ul class="splide__list">
{% for video in data.blocks %}
<li class="splide__slide">
{% if video.image %}
<picture>
<source media="(min-width:769px)" data-srcset="{{ video.image | image_url: img_width, format: 'webp', resizing_type: 'fit_width' }}" type="image/webp" class="lazyload">
<source media="(max-width:480px)" data-srcset="{{ video.image | image_url: 500, format: 'webp', resizing_type: 'fit_width' }}" type="image/webp" class="lazyload">
<source media="(max-width:768px)" data-srcset="{{ video.image | image_url: 768, format: 'webp', resizing_type: 'fit_width' }}" type="image/webp" class="lazyload">
<img data-src="{{ video.image | image_url: 940, resizing_type: 'fit_width' }}" class="lazyload">
</picture>
{% else %}
<img class="picture" src="{{ video.link | video_preview_by_url }}" style="max-width: 100%" />
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
Если нужно узнать, какие переменные доступны на странице или какие есть свойства у объекта, то используйте help:
{% help %} - выведет доступные переменные.
{% help account %} - выведет список свойств объекта account
Liquid-переменная widget_messages содержит переводы текстов для разных языковых версий из файла messages.json
