Skip to content

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

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

Шаг 1 (snippet.liquid)

Создаем файл snippet.liquid или мы можем поменять код в редакторе, нажав кнопку "редактировать код". Используем html разметку и liquid код, который отделется двумя фигурными скобками - {{ code }}. В примере ниже мы указываем настройку виджета widget_settings.banner_name, слева в редакторе пользователь сможет поменять текст данной настройки. widget_settings.banner-img - картинку можно будет заменить через редактор. {% if widget_settings.banner-img %} - если картинка загружена, то ширину картинки берем из общих настроек контента в шаблоне img_width = widget_settings.layout-content-max-width

Пример кода:

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

Шаг 2 (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.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
          }
        ]
      }
    ]
  }

Шаг 3 (settings_data.json)

В данном файле мы прописываем значение настроек по умолчанию, они могут быть переведены на другие языки. А размер языка выбираем в 20 пикслей. Заголовок по умолчанию скрывать не будем. Картинка по умолчанию, по id из нашего магазина. Пример:

{
  "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,
  "banner-img": "14935940"
}

Шаг 4 (info.json)

  • "generation": 4 - Поколение виджета. Всегда указывается 4, более старые поколения виджетов больше не поддерживаются
  • "type":"SimpleWidgetType" - Тип виджета без привязки блоков
  • "handle":"system_widget_v4_page_banner_1" - Папка с виджетом. Главное чтобы имя папки было уникальным, наименование может быть любым
  • "sku":"BB1" - уникальный ID виджета
  • "page_kinds":["all"] - виджет будет доступен на всех страницах шаблона, еще варианты страниц можно посмотреть по ссылке
  • "widget_list_kinds":["before_content", "content", "after_content"] - виджет будет доступен на всех страницах шаблона
  • "widget_category_handle":"banner" - сортировка виджетов по категориям, в данном случае - Баннеры. Доступные категории можно посмотреть по ссылке
  • "name" - имя виджета
  • "description" - описание виджета
  • "libraries" - используемые библиотеки виджета в данном случае - jquery, my-layout, vanilla-lazyload. Список доступные библиотек можно посмотреть по ссылке
    {
      "generation": 4,
      "type":"SimpleWidgetType",
      "handle":"system_widget_v4_page_banner_1",
      "sku":"BB1",
      "page_kinds":["all"],
      "widget_list_kinds":["before_content", "content", "after_content"],
      "widget_category_handle":"banner",
      "name": {
        "ru": "Баннер с текстом и кнопкой",
        "es": "Banner - 1"
      },
      "description": {
        "ru": "Баннер с текстом и кнопкой",
        "es": "Banner con texto y botón"
      },      
      "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)

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

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

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

  • Через панель администратора:

    • Переходим в панель администратора Вашего сайта -> Настройки -> Настройки сайта -> Виджеты, нажимаем кнопку "Создать".
    • В адресной строке должно быть - Имя_Вашего_Магазина.myinsales.ru/admin2/widget_types/new Вводим название - banner_test, описание - banner_descr.
    • Выбираем категорию - баннеры, тип - простой виджет. Артикул BANNER.1, Идентификатор - BB101, Типы страниц - все.
    • Типы списков виджетов - основной контент. Во вкладку "СНИППЕТ" добавляем содержимое пример кода из Шаг 1 (snippet.liquid)
    • Далее находим в списке по id - BANNER.1 добавляем содежимое нашего добавляем содержимое пример кода из Шаг 7 (snippet.scss) и Шаг 6 (snippet.js).
    • Выбираем Область применения - Зависимости: jquery, vamilla-lazyload, и сохраняем изменения.
    • Переходим в наш шаблон, слева в редаторе нажимем кнопк "добавить виджет". В группе "Баннеры", мы увидим наш виджет с именем banner_text.
  • Online, через редактор шаблона. Для этого добавляем виджет в редакторе, включаем "Расширенный режим настроек", затем "Редактировать код", вставляем необходимый код по нужным нам файлам: