Skip to content

Вводная

Info

Шаблоны 4 поколения состоят из виджетов. Виджеты - это настраиваемые через редактор блоки с контентом. Для добавления виджета в шаблон нужно создать папку с названием виджета, внутри папки лежат файлы, прописанные в структуре виджета.

Структура виджета

Как создать пользовательский виджет?

Существует два способа создания виджета:

  1. Через панель администратора
  2. Добавить папку с виджетом в архив шаблона

Примеры можно посмотреть здесь.

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

Заходим в раздел Настройки -> Виджеты

Там доступно 2 варианта: создать с нуля или импортировать уже готовый виджет.

При создании нужно будет выбрать тему, к которой привяжется виджет.

При загрузке шаблона

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

Имя папки виджета должно совпадать с полем handle в файле info.json.

Запрещено указывать названия с префиксом system_.

Добавление

Добавить виджет можно 2 способами:

  1. Через setup.json
  2. Через интерфейс визуального редактора сайта

В первом случае виджет будет установлен по умолчанию при загрузке шаблона. Во втором случае, его можно будет добавить уже после установки.

setup.json

Фрагмент, в котором мы добавили виджет с пермалинком system_widget_v4_promo_slider_4 к виджет-листу index-list.

"theme_widgets":{
  "widget_lists":[
    {
      "name":"index",
      "handle":"index-list",
      "kind":"content",
      "widgets": [
        {
          "settings_data":{
            "hide-mobile":false,
            "hide-desktop":false,
            "img-ratio":"3",
            "autoplay":false,
            "autoplay-delay":"5"
          },
          "widget_type":"system_widget_v4_promo_slider_4",
          "data_handle":"block-list-slider"
        }
      ]
    }
  ]
}

Info

Виджет-листы требуются для разделения списков на области и страницы. Так как виджет-лист главной должен отличаться от виджет-листа каталога, то на каждой странице необходимо отделить виджеты основного контента от виджетов футера/сайдбара/хедера.

Виджет-листы

Редактор сайта

Для добавления виджета на текущую страницу достаточно нажать на кнопку + в области редактирования или добавить виджет в боковой панели. После чего появится модальное окно с галереей доступных виджетов.

Разместив виджет на сайте, он автоматически запишется в setup.json при скачивании архива шаблона.

Вывод на сайт

Виджет-листы доступны в переменной widget_lists.

Пример вывода виджетов из виджет-листа index-list:

{% for widgetDrop in widget_lists.index-list.widgets %}
  {% widget widgetDrop %}
{% endfor %}

Стили и скрипты виджетов выводятся отдельным тегом widgets_assets, в качестве параметра указываются названия виджет-листов через запятую.

{% widgets_assets "header-list, footer-list, index-list" %}