Конструктор сайта на ModX для Zolotov.Studio

У Zolotov Studio уже был рабочий, устоявшийся сайт на Tilda — около 70 страниц с портфолио, кейсами, статьями, формами заявок и брифами под разные услуги: аренда студий, видео- и фотосъёмка, организация онлайн-трансляций. Сайт приносил заявки, но клиент упирался в ограничения конструктора: сложно было развивать сайт как полноценный многостраничный ресурс, а не набор лендингов.

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

Требования в техническом задании:

— перенести все страницы 1:1 по структуре и содержанию, включая брифы и статьи;

— реализовать каталог товаров и услуг с корзиной и формой заявки для страницы аренды студий (rental);

— сделать онлайн-калькулятор аналогичный тому, что уже работал на старом сайте;

— создать базу отзывов с категориями по направлениям услуг и автоматическим выводом в блоках на нужных страницах;

— перекрасить сайт в тёмную тему (фон #101010) с сохранением пропорций и стиля всех шаблонных блоков;

— сохранить интеграции с amoCRM, email-уведомлениями, Jivo и квизами;

— провести SEO- и юзабилити-аудит, исправить технические ошибки, поднять Google PageSpeed до 90%+;

— дать заказчику удобную админку с WYSIWYG-редактированием — без необходимости трогать HTML.

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

В частности, у Tilda нет инструментов для серверной логики — корзины с реальным бэкендом, базы отзывов с категориями и автоматическим выводом по разным разделам, калькулятора с сохранением заявок. Всё это пришлось бы собирать через сторонние сервисы и встраивать костылями поверх статичных блоков.

Рассматривали также WordPress с Elementor: гибкий вариант, но для полноценного визуального управления блоками там нужен уже платный Elementor Pro, а сайты на WP при активной эксплуатации со временем обрастают конфликтующими плагинами и багами при их обновлениях.

В итоге остановились на ModX Evolution — лёгкой и гибкой CMS с полноценным управлением правами, страницами и шаблонами из коробки. Оставался один открытый вопрос — как дать заказчику визуальный конструктор блоков, похожий по удобству на тот, к которому он привык в Tilda, но поверх обычной MODX-страницы.

Конструктор блоков на основе MODX MultiFields

Для этого использовали и адаптировали под проект наработку JetBit — конструктор страниц на базе MultiFields, дополнительного типа TV (Template Variable) в MODX Evolution, который позволяет хранить внутри одного поля целый набор вложенных полей: текст, изображения, ссылки, даты и другие типы данных.

Технически это устроено так: для нужного TV указывается тип multifields и подключается файл-конфиг с деревом блоков и их настроек. Каждый блок описывает свой набор полей, их типы и шаблоны вывода — отдельно для админки и для фронта. Блок может быть публичным (доступен для выбора прямо в конструкторе) или приватным (используется только как вложенное поле внутри другого блока), что позволяет собирать блоки произвольной вложенности. Поле может быть помечено как контейнер, тогда в конструкторе появляется кнопка «+», и менеджер может добавить нужное количество однотипных вложенных блоков — это удобно для галерей, списков, повторяющихся карточек.

Специальный плагин в админке MODX скрывает исходное TV-поле и подставляет вместо него визуальный конструктор, собранный по конфигу. Готовая страница сохраняется как JSON прямо в TV. На фронте отдельный сниппет читает конфиг и JSON и рендерит страницу, применяя нужные шаблоны с учётом вложенности блоков — оформление при этом настраивается в CSS.

Адаптация конструктора под zolotov.studio

Под структуру сайта Zolotov Studio набор типовых блоков собрали так, чтобы менеджер клиента мог визуально повторить всё, к чему привык на Tilda:

—   обложка страницы с заголовком и фоновым изображением/видео;

—   текстовые блоки с иконками и колоночной раскладкой — под описание услуг;

—   фото- и видеогалереи с адаптивной сеткой;

—   блок отзывов — с автоматическим выводом из базы отзывов по категории услуги, к которой относится страница;

—   формы заявки и брифы, интегрированные с amoCRM;

—   блок каталога с корзиной — для страницы rental;

—   блок с онлайн-калькулятором.

Автоматически формируемый блок хлебных крошек вывели над обложкой на каждой странице — отдельным сниппетом, без ручной настройки менеджером.

Базу отзывов сделали как отдельный тип ресурсов MODX с TV-полем категории по направлению услуг (онлайн-трансляции, фуд-фотосъёмка, аренда студий и т.д.). Блок отзывов в конструкторе просто ссылается на нужную категорию, а сниппет на фронте сам подтягивает и выводит актуальные отзывы на каждой странице — без ручного дублирования контента.

Каталог товаров и услуг с корзиной для страницы rental и калькулятор, аналогичный тому, что был на старом сайте, реализовали как отдельные модули и подключили их как блоки того же конструктора — так они встраиваются в любую страницу наравне с остальными типовыми блоками.

SEO и юзабилити

Параллельно с переносом провели SEO- и юзабилити-аудит текущей версии сайта на Tilda, согласовали с клиентом список правок и внедрили их уже в новую версию:

—   проверили и устранили битые ссылки и дубли страниц;

—   сохранили разметку h1–h3, соответствующую прежней версии сайта;

—   настроили robots.txt и автогенерацию карты сайта sitemap.xml;

—   оптимизировали изображения до ≤100 Кб на 1 Мп без потери приемлемого качества, сохранили и дополнили alt-теги;

—   привели все блоки к тёмной теме (#101010) с фирменным акцентным цветом #008FD5, не меняя пропорций и общего стиля вёрстки;

—   проверили корректное отображение в Internet Explorer 11, Edge, Chrome, Firefox и Safari, на десктопе и мобильных.

—   перенесли на ModX Evolution все ~70 страниц сайта с сохранением структуры, текстов и функционала;

—   подняли показатели Google PageSpeed до целевых 90%+ на десктопе и мобильных за счёт оптимизации изображений и вёрстки;

—   реализовали каталог с корзиной и заявкой для аренды студий, интегрированный с amoCRM;

—   запустили онлайн-калькулятор и базу отзывов с фильтрацией по категориям услуг и автоматическим выводом на страницах;

—   дали заказчику визуальный конструктор блоков, повторяющий привычную логику Tilda, но поверх полноценной MODX-страницы с управлением SEO-метаданными, правами и структурой сайта;

—   менеджер клиента теперь может собирать и редактировать страницы сам — через понятный визуальный интерфейс, без обращения к HTML и без правок от разработчика.

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