Виджеты

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

1. Структура виджета
2. Создание виджета
3. Добавление виджета
4. Вывод на сайт

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

• Сниппет snippet.liquid
• SCSS snippet.scss
• JS snippet.js
• Переводы messages.json
• Форма настроек settings_form.json
• Настройки по умолчанию settings_data.json
• Блоки по умолчанию setup.json
• Превью preview.jpg и mobile_preview.jpg
• Метаданные info.json

Создание виджета

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

1. через панель администратора;
2. с помощью добавления папки с виджетом в архив шаблона.

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

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

Перейдите в раздел Настройки → Виджеты.

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

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

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

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

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

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

Добавление виджета

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

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"
        }
      ]
    }
  ]
}

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

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

Разместив виджет на сайте, он автоматически запишется в 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" %}

Содержание

1. Примеры
2. snippet.liquid
3. snippet.scss
4. snippet.js
5. Файл messages.json в виджете
6. settings_form.json
7. settings_data.json
8. Файл setup.json в виджете
9. preview.jpg
10. info.json