Визуальный редактор шаблонов

Описание

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

Создание темы шаблонов

Создать папку по адресу /public/assets/-ВАША-ПАПКА-. В эту папку загрузить файлы HTML-страниц (html, css, js, картинки...).
На панеле редактора шаблонов нажать кнопку "Создать новую тему". В поле "Название темы" указать название папки, в которой находятся HTML-страницы. Откорректировать содержимое поля "HTML-файл главной страницы".
Нажать кнопку "Создать". В папке /templates/ будет создана папка новой темы шаблонов. Также в эту папку будут скопированы файлы из темы "default", которые указаны в параметре "default_copy" конфигурационного файла "/config/packages/twigvisual.yaml".
Активировать новую тему можно в настройках интерфейса администратора (поле "Тема шаблонов") или в файле /config/settings.yaml (параметр "app.template_theme"). После этого нужно очистить системный кэш. Обновить страницу в браузере.
Для создания нового шаблона нажать кнопку "Создать шаблон". В списке "HTML-файл" выбрать HTML-файл, из которого нужно сделать шаблон. В списке "Название шаблона" выбрать название шаблонв, который необходимо создать. Этот список шаблонов берется из параметра "templates" конфигурационного файла "twigvisual.yaml".

Редактирование HTML-элементов

Редактирование контента. Нажать кнопку "Элемент интерфейса" для перехода в режим выбора элемента. Навести курсор на элемент, содержимое которого нужно отредактировать. При этом можно использовать колёсико мыши для выбора родительского элемента. Нажать кнопку "Редактировать контент". Далее можно редактировать текст на странице, внутри выбранного элемента. Нажать кнопку "Сохранить".
Редактирование ссылки. Выбрать элемент ссылки, как описано выше. Этот элемент должен иметь тег "a". Нажать кнопку "Редактировать ссылку" на панеле инструментов. В поле "Ссылка" можно отредактировать URL ссылки. Также ниже можно выбрать как должна открываться ссылка (в текущей или новой вкладке браузера). Нажать кнопку "Сохранить".
Замена картинки. Выбрать элемент картинки (тег "img"). Нажать кнопку "Заменить картинку" на панеле инструментов. Сразу откроется окно, в котором нужно выбрать файл картинки, на которую необходимо сделать замену. Нажать кнопку "Сохранить". См. список ограничений ниже.
Удаление элемента. Выбрать элемент, нажать кнопку "Удалить элемент", затем "Подтвердить".
Перемещение элемента. Выбрать элемент, который нужно переместить. Нажать кнопку "Переместить элемент", далее выбрать эелемент, который должен быть целью перемещения. Выбрать одно из действий ("Вставить", "Вставить до", "Вставить после"). Нажать кнопку "Применить".

Ограничения

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

Редактирование HTML-элементов шаблона невозможно, если HTML-код генерируется или редактируется в JavaScript (например, в шаблоне используется скрипт для создания фото-галереи).
В папке темы шаблонов /templates/-ВАША-ПАПКА-ТЕМЫ- должен находиться файл "twigvisual-data.yaml". Этот файл создается автоматически при создании темы шаблонов в визуальном редакторе (кнопка "Создать новую тему"). В этом файле находятся куски кода элементов, в том виде, какими они были до того как стали динамическими (например, исходный код меню). Этот код применяется для того, чтобы вернуть исходное состояние шаблона, чтобы выбранные элементы были найдены при выполнении действий. Это необходимо, т.к. для нахождения элементов используется XPath, который зависит от соседних элементов.
В текущей версии не поддерживаются блоки {% block block_name %}...{% endblock %} и функция {% include 'template_name.html.twig' %}. Внутри таких блоков контент нельзя редактировать.

Дополнительные материалы

Документация шаблонизатора Twig