Skip to content

Простой виджет

В данном уроке мы создадим простой виджет (SimpleWidgetType), который будет содержать текст, изображение и несколько настроек.

Шаг 1 (создание виджета)

Создаем виджет в панели администратора:

  • Переходим в панель администратора Вашего сайта -> Настройки -> Настройки сайта -> Виджеты. Нажимаем кнопку "Создать".
  • В адресной строке должно быть - Имя_Вашего_Магазина.myinsales.ru/admin2/widget_types/new
    Выбираем тему в которой будем использовать виджет. Вводим название: banner_test, описание: banner_descr.
  • Выбираем категорию - баннеры, тип - простой виджет. Артикул: BBT1.1, Идентификатор: banner_test, Типы страниц - все. Типы списков виджетов - основной контент.
  • Нажимаем сохранить и переходим в раздел дизайн и выбираем указанную тему. Нажимаем кнопку "Добавить виджет". Выбираем группу "баннеры" и выбираем виджет с артикулом BBT1.1.
  • В левой панели редактора нажимаем кнопку "редактировать код"
  • Добавляем код из примеров ниже.

Шаг 2. HTML (snippet.liquid)

Редактируем 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 %} - условие если картинка загружена, то ширину картинки берем из общих настроек контента в шаблоне

Шаг 3. Форма настроек JSON (settings_form.json)

Редактируем 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" - скрыть заголовок в редакторе.

Шаг 4. Настройки по умолчанию JSON (settings_data.json)

Редактируем 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 - не скрывать заголовок.

Шаг 5 (info.json)

Панель администратора -> настройки -> Настройки сайта -> Виджеты, выбираем виджет с артикулом BBT1.1 и нажимаем на иконку карандаша. Подключаем зависимости: jquery, my-layout, vanilla-lazyload.

Шаг 6. JS (snippet.js)

Редактируем snippet.js.
Пример:

$widget.each(function(index, el) {
  new LazyLoad({
    container: $(el).get(0),
    elements_selector: '.lazyload'
  });
});
В данном примере реализуем ленивую загрузку изображений с помощью плагина LazyLoad | Github

Шаг 6. SCSS (snippet.scss)

Пропишем стили виджета и не забудем прописать стили для разных значений настроек

.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;
}