[MIgxPageConfigurator] Натяжка вёрстки никогда не будет прежней!

Приветствую. Наконец-то я собрал в пакет первую стабильную версию своего конфигуратора страниц анонсированного ещё осень 2022 года. Всё это время я как мог улучшал его функционал. Находил и исправлял баги и теперь, когда как мне кажется компонент стабилен, решил показать его вам.

Изначальная цель компонента была в том, чтобы дать больше свободы в управлении контентом неподготовленному менеджеру так, чтобы он при этом не сломал вёрстку. Я использовал для этого Migx. Со временем пришло понимание, что я делаю одно и тоже: получаю вёрстку, копирую из неё тексты, картинки в админку, вставляю на их место плейсхолдеры, вырезаю чанки, пишу вызовы сниппетов. Тогда-то я и подумал, что это можно как-то автоматизировать. Для этого был использован самый простой подход: отметить в вёрстке места, которые нужно обработать каким-либо образом с помощью data-атрибутов, и написать скрипт, который эти атрибуты прочитает и выполнит нужные мне действия. И вот он этот скрипт завёрнутый в компонент MIgxPageConfigurator.

Требования: PHP > 7.0 Modx Revolution < 3.0.0

Зависимости: pdoTools, Migx, pThumb, AjaxFormitLogin

Основные возможности:

1. Автоматическое создание элементов сайта плагины, чанки, шаблоны, сниппеты, ресурсы, TV.
2. Автоматическая расстановка в вёрстке плейсхолдеров, вызовов сниппетов, чанков.
3. Автоматическое создание файлов чанков, форм, вызовов сниппетов.
4. Автоматическое заполнение контентом админки сайта.
5. Возможность редактировать вёрстку в одном месте.
6. Встроенная ленивая загрузка изображений.
7. Удобное управление контактами и формами.

Как это работает

1. Устанавливаете компонент.
2. Копируете папки templates и pages из core/components/migxpageconfigurator/examples.
3. В папку templates заливаете все шаблоны, которые у вас есть в вёрстке
4. Размечаете шаблоны специальными атрибутами. Пример смотри в файле templates/test.tpl
5. Запускаете основной скрипт через SSH или в терминале (assets/components/migxpageconfigurator/mgr_tpl.php).
6. Создаёте структуру сайта в папке create. Пример смотри в файле core/components/migxpageconfigurator/examples/create/resource.inc.php
7. Запускаете скрипт создания структуры сайта (public_html/assets/components/migxpageconfigurator/mgr_elems.php resource)
8. Сдаёте сайт заказчику и радуетесь полученyой оплате

Пояснения к работе.

В комплекте есть 4 скрипта, запускаемых из консоли:
* -d display_errors -d error_reporting=E_ALL — это необязательно, но полезно, чтобы видеть ошибки.
1. php -d display_errors -d error_reporting=E_ALL assets/components/migxpageconfigurator/mgr_tpl.php — принимает 4 параметра, разделяемых пробелами, если не передать параметры — будут обработаны все шаблоны в папке; первый — имя шаблона test.tpl, второй — обновлять содержимое страницы в Типах страниц, третий — имена секций через запятую (если хотите обработать только секции с определенными именами), четвёртый — id секций (если хотите обновить только секции с определенными id)
2. php -d display_errors -d error_reporting=E_ALL assets/components/migxpageconfigurator/mgr_elems.php — позволяет создавать элементы TV (tv), ресурсы(resource), плагины(plugin), сниппеты(snippet).
3. php -d display_errors -d error_reporting=E_ALL assets/components/migxpageconfigurator/clear_cache.php — очищает весь кеш и modx, и компонента, параметров нет.
4. php -d display_errors -d error_reporting=E_ALL assets/components/migxpageconfigurator/slice_tpl.php — работает аналогично первому, только не создает страниц в админке.

Для разметки шаблонов используйте следующий набор атрибутов
* у всех префикс data-mpc-
1. sff — указывается html-элементу содержащему атрибут data-mpc-form, если нужно установить в админке параметры из пресета.
2. copy — указывается html-элементу содержащему атрибут data-mpc-section, если нужно указать, что данная секция является копией секции в другом шаблоне; в качестве значения рекомендую указывать имя файла с оригинальной секцией
3. symbol — указывается html-элементу содержащему атрибут data-mpc-snippet или data-mpc-parse, если его вызов должен состояться на этапе предварительного парсинга; принимает два значения { и ##; по умолчанию ##
4. form — указывается html-элементу содержащему атрибут data-mpc-chunk, если нужно заменить чанк на вызов сниппета AjaxFormitLogin.
5. preset — указывается html-элементу содержащему атрибут data-mpc-form или data-mpc-snippet, в значении нужно указать ключ массива параметров вызова спиппета, для форм это параметры сниппета AjaxFormitLogin.
6. cond — указывается html-элементу содержащему атрибут data-mpc-item, если нужно выводить элементы поля типа MIGX по условию; в значение принимает условие, в котором можно использовать переменные $i(№ итерации) или $l (№ номер последней итерации); при наличии вложенности migx в migx переменные будут иметь индексы соответствующие уровню вложенности.
7. static — указывается html-элементу содержащему атрибут data-mpc-section, если нужно указать, что данная секция является статической, т.е. одинаковой для всех страниц.
8. name — указывается html-элементу содержащему атрибут data-mpc-section или data-mpc-form, для задания человеко понятного названия секции или формы.
9. item — указывается html-элементу, содержащему значения полей для заполнения конфигураций migx, должен быть вложен в элемент data-mpc-field(тут возможен индекс)
10. unwrap — указывается html-элементу содержащему атрибут data-mpc-chunk или data-mpc-item, указывает на то, что чанком является только содержимое, без оборачивающего тэга.
11. section — указывается html-элементу, который должен быть смысловой контентной секцией в конфигурации страницы.
12. snippet — указывается html-элементу, в котором должен быть расположен вызов сниппета; в качестве значения принимает строку вида SnippetName|presetName, где SnippetName — имя вызываемого сниппета, указанное так как вы указали бы его при вызове с помощью Fenom, presetName — ключ из массива параметров вызова.
13. chunk — указывается html-элементу, в который нужно вырезать в чанк; в качестве значения нужно указывать путь к чанку относительно папки с чанки из системных настроек.
14. include — указывается html-элементу содержащему атрибут data-mpc-chunk, если нужно заменить его на конструкцию вида {include 'file:path/to/chunk'}
15. parse — указывается html-элементу содержащему атрибут data-mpc-chunk, если нужно заменить его на конструкцию вида {$_modx->parseChunk('@FILE path/to/chunk', $params}; в качестве значения нужно передать массив парметров, например так dara-mpc-parse="[$id => 1]".
16. remove — указывается html-элементу, который следует удалить из вёрстки после обработки, чаще всего это data-mpc-field или data-mpc-chunk.
17. attr — используется в тех случаях, когда необходимо указать динамические атрибуты, например .
18. field — используется для передачи значения из шаблона в админку; если html-элемент содержит атрибуты href или scr, т.е. являются ссылкой, фреймом или картинкой, значение будет взято из этих атрибутов, в противном случае значением будет всё содержимое элемента с атрибутом data-mpc-field;

<h1 data-mpc-field="title">Title</h1> - значение Title; <a href="#">Link</a> - значение #.

Примеры файлов можно посмотреть в папке core/components/migxpageconfigurator/examples/

Предлагаю всем желающим самим попробовать. Скачать готовый пакет можно с гита по ссылке.

И для самых заинтересованных вот часовое видео с моим рассказом о MigxPageConfigurator.