Falstem.ru — корпоративный сайт производителя ограждений (MODX)

Контекст и задача

falstem.ru — действующий корпоративный сайт компании ФАЛСТЕМ (производство периметральных ограждений: сварные панели 2D/3D, ворота, калитки, опоры, противоподкопные решения), работающий на MODX Revolution 2.8.8-pl (PHP/MySQL). Сайт уже существовал; задачи носили характер развития и доработки live-продакшена в несколько итераций (март–июнь 2026).

Ключевые направления: (1) отказ от привязки форм обратной связи к стороннему Bitrix24 (формы были реализованы только как внешний JS-embed Bitrix24, без локального бэкенда); (2) редизайн шапки и секции «Преимущества» по новым макетам Figma; (3) запуск нового типа контента — «отраслевые решения» — начиная с сегмента ТЭК. Работы велись прямо на продакшн-сервере с жёстким требованием бэкапов перед каждым изменением.

Что я сделал

Роль — независимый fullstack-разработчик (2026, AI-augmented), бэкенд PHP/MODX + фронтенд. Это не greenfield, а смешанный engagement на существующем сайте:

• Миграция форм (Bitrix24 → нативный MODX). Воспроизвёл вёрстку формы «один в один», но перевёл обработку на связку FormIt + FetchIt (Fetch API, без jQuery) с серверной валидацией, хуком сохранения заявок FormItSaveForm (просмотр в админке), email-уведомлениями и SMTP. Внедрил feature-flag use_native_contact_form (по умолчанию OFF) с условным переключением между нативной формой и старым Bitrix24-embed — для безопасного выката и мгновенного отката. Чекбокс согласия по 152-ФЗ сохранён.
• Редизайн (rework). Pixel-perfect вёрстка новой шапки (заложено многоуровневое меню) и секции «Преимущества» по макетам Figma; адаптив проектировал самостоятельно (мобильных макетов не было).
• Новый раздел (greenfield внутри сайта). Спроектировал переиспользуемую архитектуру «страница-решение» (шаблоны solutionPage/solutionSection, 4 TV включая 2 MIGX-клона, 11 чанков-секций, CSS-секция, init Swiper) и развернул раздел ТЭК: папка-обзор + 6 страниц с динамическим сайдбаром, галереей и FAQ.
• Аудит и поддержка. Аудит хардкода, наведение порядка в путях/версионировании ассетов, управление видимостью секций главной, добавление слайдеров (Swiper), серия UX-правок форм/модалок (спиннеры, z-index, отображение ошибок).

Решение и подход

• Стек MODX и консистентность. Все решения опираются на существующие конвенции сайта: pdoTools (pdoResources/pdoField/getImageList), MIGX для повторяющихся блоков (галерея, FAQ), Swiper по data-slider, jQuery-спойлеры по data-spoller, Fancybox-модалка #modal, токены :root.
• Параметрическая архитектура раздела. Вместо вёрстки одной страницы заложен шаблон с TV/MIGX и секциями-чанками; сайдбар-навигация строится динамически по solution_category через pdoResources (самоисключение текущей страницы), крошки — через pdoField. Это рассчитано на масштабирование (в меню запланировано ~40 пунктов по 7 категориям).
• Безопасный деплой на проде. Изменения MODX применялись идемпотентными PHP-скриптами по stdin (getObject→update/newObject), без оставления исполняемых файлов в webroot; перед каждой группой изменений — бэкапы затрагиваемых таблиц БД и файлов (вне webroot + локальная копия), с заранее описанной процедурой отката.
• Нетривиальные места. Тонкости MIGX-конфигов при клонировании TV (input_properties.configs); вложенные friendly-URL через uri_override без слома относительных путей ассетов; переход на link_tag_scheme=abs; устранение grid-коллапса на мобильном (minmax(auto,1fr) раздувал колонку до 2²⁵px) переходом на minmax(0,1fr)+min-width:0; покраска SVG-иконок из спрайта через color (а не fill) при currentColor.

Результат

• Раздел ТЭК доведён до состояния «готов»: 6 страниц + обзор, сквозная проверка 7 URL (все HTTP 200), галереи/FAQ/сайдбары наполнены, 0 относительных ассетов на вложенных URL (источник: PROGRESS-otraslevye-resheniya.md).
• Нативная форма реализована и подключена с feature-flag-переключателем; заявки сохраняются в админке, настроены SMTP-уведомления (источник: apply_form_migration.php). Публичная проверка live-сайта подтвердила работающие формы обратной связи.
• Оптимизация медиа: фото галереи «заводы» 2796 КБ → 691 КБ без потери размеров (источник: PROGRESS).
• Серия HTML-отчётов по итерациям (редизайн шапки, аудит хардкода, секции, слайдеры, формы).
• Бизнес-метрики (заявки, конверсия, SEO-эффект) — не зафиксированы (уточнить у автора).

Стек и обоснование

MODX Revolution (PHP/MySQL) — платформа существующего сайта; работа велась в её парадигме (шаблоны/чанки/сниппеты/TV в БД). pdoTools и MIGX — штатный способ выборки ресурсов и повторяющихся блоков. FormIt + FetchIt выбраны для форм как актуальная связка 2026 года (серверная валидация + лёгкая отправка через Fetch API без jQuery), FormItSaveForm — «коробочное» хранение заявок (аналог CPT). Swiper 11 + Fancybox + jQuery — уже используемые на сайте библиотеки фронтенда. Figma REST API — для точного извлечения макетов.

Роль ИИ в проекте

Проект — выраженный пример AI-augmented разработки с несколькими инструментами и зрелым процессом:

Инженерные вызовы

• Работа на живом продакшене без стейджинга: решено идемпотентными скриптами по SSH/stdin, обязательными бэкапами БД/файлов вне webroot и пофазными чекпоинтами.
• Миграция форм без видимого бэкенда (был только JS-embed): клонирование DOM формы 1:1, адаптация под FetchIt (data-error-узлы), feature-flag для отката.
• Масштабируемость нового раздела: параметрический шаблон вместо одноразовой вёрстки.
• Тонкости MODX/MIGX, friendly-URL и CSS grid (см. «Решение и подход»).
• Дисциплина безопасности: вынос открытых по HTTP дампов БД из webroot; отказ хранить доступы в файлах репозитория.