Разработка конструктора страниц как в Tilda на ModX

Заказчик

Маркетинговое агентство «Market Group» — это коммуникационное агентство, которое входит в ТОП 15 национального рейтинга коммуникационных агентств HP2K, членство в АКМР, АКАР, РАСО

Задача

Разработать новый сайт с удобной админкой и конструктором страниц, как на Tilda, чтобы для SEO был удобен и всё это недорого чтобы было.

Компании приходят к нам за эффективными решениями и экспертизой, чтобы мы подсказали, как лучше и быстрее решить их задачи. За 15 лет работы мы научились находить самые короткие пути к решению проблем клиентов, которые бы оставались рентабельными для их бизнеса и могли потом поддерживаться не только самими авторами разработки. С одной стороны стараемся использовать готовые решения или старые наработки, которые подстраиваются под новые задачи, для минимизации затрат клиентов, а с другой — обеспечить удобство использования и гибкость продукта. Когда клиенты приходят с просьбой сайта, который можно было бы редактировать конструктором, сразу на ум приходит лидер рынка по конструкторам сайтов Тильда. Но с уходом с российского рынка из-за санкций другого сервиса конструктора сайтов Wix, использование Тильда становится рисковым. О поиске компромиссов и золотой середине и будет этот кейс.

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

Цели

Создать сайт на готовой системе управления сайтом с открытым кодом, которая имела бы основной функционал управления сайтом: распределение прав пользователей, создание редактирование удаление страниц, шаблонизатор и т.п.;

Создать визуальный конструктор страниц из разных настраиваемых типовых блоков;

Листинг портфолио должен был иметь динамическую структуру, чтобы блоки разных размеров собирались в цельную сетку без пробелов (что-то вроде тетриса).

Перенести информацию со старого сайта и заполнить новые страницы.

В итоге — сделать более привлекательный современный сайт и минимизировать время его дальнейшего наполнения и обслуживания.

Исходя из вводных данных были отброшены варианты реализации на фреймворках с написанием собственного конструктора. Из распространенных готовых бесплатных решений из нашего стека оставались Тильда, WordPress + Elementor и ModX (Evolution).

Wordpress — нормальная история для клиентов, которым нужно что-то доброе и вечное для блога, с максимальными возможностями из коробки. Тильда хороша для визиток и лендингов. Тильду отмели, так как она не отвечала удобству управления многостраничным сайтом, его сео оптимизации и динамическому листингу портфолио ( + с недавней блокировкой конструктора Wix, Тильда на очереди на уход из России). WordPress с Elementor отпугнул тем, что для гибкого управления блоками elementor уже нужен не бесплатный плагин Elementor Pro и тем, что при долгой эксплуатации сайтов на WP с множеством реализаций функционала через готовые плагины с их постоянным обновлением част закрадываются какие-то баги в работе сайта. Потому остановились в выборе на ModX Evolution, как готовое гибкое решение, оставался вопрос с конструктором. 

Для реализации конструктора страниц на базе CMS ModX Evo за основу был взят функционал ModX MultiFields. В MODX MultiFields — это дополнительное поле (TV — Template Variable), позволяющее работать с набором полей внутри одного TV. Оно особенно полезно, когда необходимо создать сложную структуру данных (например, несколько текстовых полей, изображений, ссылок и т.д.), которая будет храниться в одном месте и выводиться на странице.

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

Набор полей внутри TV — MultiFields позволяет создавать группы полей (текстовые, изображение, ссылка и т.д.) и выводить их как единое целое.

Гибкость в настройке — Вы можете добавить различные типы данных, такие как:

   Текстовые поля (input)

   Поля для ввода ссылок

   Поля для загрузки изображений

   Выбор даты (Datepicker)

   И другие кастомные поля.

Удобство редактирования — Поля в MultiFields могут быть динамическими (их можно добавлять, удалять и редактировать прямо из интерфейса MODX).

Таким образом, MultiFields значительно упрощает работу с набором данных в одном TV, обеспечивая удобное управление и гибкий вывод. Технически работает так:

Указывается для какого-то TV тип multifields и создаётся одноимённый файл файл-конфиг. Этот файл содержит многоуровневый массив блоков и их настроек. Блок содержит список полей, их типы и шаблоны для вывода как в админке, так и во фронте. Блок может быть публичным - его можно выбирать в админке в конструкторе, а может быть приватным - в конструкторе он не виден, но его можно вставлять внутрь другого блока в качестве поля. Таким образом можно создавать блоки с полями большой вложенности. Вместе с этим, в настройках поля можно указывать, что поле, это контейнер множества блоков: внутри поля можно плодить вложенный блок. В этом случае появляется + и можно множить однотипные блоки нужное число раз. Это применимо для повторяющихся блоков, списков, галерей.

Используя этот файл-конфиг, в админке модх специальный плагин скрывает поле TV и выводит конструктор. Визуальное оформление блоков можно настраивать в css. Собранная конструктором страница сохраняется как json в TV.

На фронте специальный сниппет читает конфиг, TV, и выводит этот TV, применив шаблоны из конфига, учитывая заданную вложенность блоков.