Skip to content

Виджет с блоками

В данном уроке мы создадим виджет с блоками (block_list_widget_type), который будет содержать нескольно блоков, внутри которых будут картинка и ссылка, и несколько настроек виджета. В данном виджете мы будем использовать шаблон привязанных блоков - system-banner-7. Поля: Картинка (Файл - image), Ссылка (Универсальная ссылка - link)

Шаг 1 (snippet.liquid)

Создаем файл snippet.liquid или мы можем поменять код в редакторе, нажав кнопку "редактировать код". Используем html разметку и liquid код, который отделется двумя фигурными скобками - {{ code }}. В примере ниже мы прописываем класс grid-list, внутри div мы используем цикл {% for slide in data.blocks %}, перебирая блоки slide. Затем проверем не передается ли пустое строковое значение в ссылке блока slide - {% if slide.link != "" %}. Далее, внутри атрибута href мы указываем поле link блока slide - {{ slide.link }}. Когда мы указываем поле ссылка, в редакторе пользователь сможет перейти в параметры блока и указать ссылку самостоятельно. Далее проверем не передается ли пустое значение в картинке блока slide - {% if slide.image %}. Затем, внутри атрибута data-src мы указываем поле image блока slide - {{ slide.image }}. Когда мы указываем поле изображение, в редакторе пользователь сможет перейти в параметры блока и добавить картинку самостоятельно.

Пример кода:

<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 %}

Шаг 2 (setup.json)

В файле setup мы прописываем количество блоков с параметрами 'image' и 'link', в примере ниже 6 блоков с пустыми ссылками и одинаковым id изображения. В качестве файла указывается id файла из аккаунта

Пример:

{
  "blocks": [{
      "image": "16779404",
      "link": "#"
    },
    {
      "image": "16779404",
      "link": "#"
    },
    {
      "image": "16779404",
      "link": "#"
    },
    {
      "image": "16779404",
      "link": "#"
    },
    {
      "image": "16779404",
      "link": "#"
    },
    {
      "image": "16779404",
      "link": "#"
    }
  ]
}

Шаг 3 (settings_form.json)

Теперь в файле settings_form.json мы прописываем настройку с полем типа text и поле с настройкой типа rich-text. {{ messages.content }} - Является заголовком группы - "Контент". Настройка "banner-img" типа файл, предлагает загрузить пользователю картинку в редакторе. Настройка "banner-img" является основной "general": true, "general_position": 1 - будет первой списке основных настроек. Настройка с именем "name": "font-size", предлагает пользователю выбрать размер текста в редакторе. А настройка "name": "hide-title" - предлагает скрыть заголовок в редакторе. Пример:

{
  "{{ messages.banner }}": [{
    "items": [{
        "class": "range",
        "name": "grid-list-row-gap",
        "min": 0,
        "max": 3,
        "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": 3,
        "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"
        }
      ]
    }
  ]
}

Шаг 3 (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"
  }
}

Шаг 3 (settings_data.json)

В данном файле мы прописываем значение настроек (settings_form.json), по умолчанию. hide-desktop - скрыть на детскопе, по умолчанию false, что означает что мы не скрываем на детскопе наш виджет по умолчанию. grid-list-row-gap - отступ по вертикали, в 2 rem. grid-list-column-gap - отступ по горизонтали, в 2 rem. bg - цвет фона по умолчанию "#ffda33"

Пример:

{
  "hide-desktop": false,
  "grid-list-row-gap": 2,
  "grid-list-column-gap": 2,
  "bg": "#ffda33"
}

Шаг 4 (info.json)

  • "generation": 4 - Поколение виджета. Всегда указывается 4, более старые поколения виджетов больше не поддерживаются
  • "type":"block_list_widget_type" - Тип виджета с привязкой блоков
  • "handle":"system_widget_v4_banner_list_23" - Папка с виджетом. Главное чтобы имя папки было уникальным, наименование может быть любым.
  • "sku":"BG10" - уникальный ID виджета
  • "page_kinds":["all"] - виджет будет доступен на всех страницах шаблона, еще варианты страниц можно посмотреть по ссылке
  • "widget_list_kinds":["before_content", "content", "after_content"] - виджет будет доступен на всех страницах шаблона
  • "widget_category_handle":"banner" - сортировка виджетов по категориям, в данном случае - Баннеры. Доступные категории можно посмотреть по ссылке
  • "name" - имя виджета
  • "description" - описание виджета
  • "libraries" - используемые библиотеки виджета в данном случае - jquery, my-layout, vanilla-lazyload. Список доступные библиотек можно посмотреть по ссылке
    {
      "type": "block_list_widget_type",
      "handle": "system_widget_v4_banner_list_23",
      "sku": "BG10",
      "name": {
        "ru": "Группа баннеров в 2 ряда",
        "en": "Group of banners in two rows",
        "ua": "Група банерів в два ряди",
        "es": "Grupo de pancartas en dos filas"
      },
      "description": {
        "ru": "Плитка из баннеров",
        "en": "Banner tile",
        "ua": "Плитка з банерів",
        "es": "Azulejo de banner"
      },
      "page_kinds": ["all"],
      "widget_list_kinds": ["before_content", "content", "after_content"],
      "generation": 4,
      "block_template_handle": "system-banner-7",
      "widget_category_handle": "banner",
      "libraries": [
        "jquery",
        "my-layout",
        "vanilla-lazyload"
      ]
    }
    

Шаг 5 (preview.jpg)

Для загрузки превью виджета необходимо добавить в папку два файла с именами:

  • preview.jpg | для десктопной версии устройства
  • mobile_preview.jpg | для мобильной версии устройства

Шаг 6 (snippet.js)

В данном примере реализуем ленивую загруку изображений с помощью плагина LazyLoad | Github

$widget.each(function(index, el) {
  new LazyLoad({
    container: $(el).get(0),
    elements_selector: '.lazyload'
  });
});

Шаг 7 (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;
}

Шаг 8 (Способы добавления виджета)

  • Через админку. Переходим в панель администратора -> Настройки -> Настройки сайта -> Виджеты, нажимаем кнопку "Создать". Вводим название - banner_test, описание banner_descr. Выбираем категорию - баннеры, тип - простой виджет. Артикул BANNER.1, Идентификатор - BB101, Типы страниц - все. Типы списков виджетов - основной контент. Далее находим в списке по id - BANNER.1 добавляем содежимое нашего snippet.scss и snippet.js. Выбираем Область применения - Зависимости - jquery, vamilla-lazyload, сохраняем изменения. Переходим в наш шаблон, слева в редаторе нажимем кнопк "добавить виджет". В группе "Баннеры", мы увидим наш виджет banner_text.

  • Online. Для этого добавляем виджет в редакторе, нажимаем "Расширенный режим настроек", затем "Редактировать код", вставляем необходимый код по нужным нам файлам.

  • HTML - это snippet.liquid

  • SCSS - это snippet.scss
  • JS - это snippet.js
  • Форма настроек (JSON) - это settings_form.js
  • Настройки по умолчанию (JSON) - это settings_data.js