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

Производитель периметральных ограждений (ЮФО) · Производство ограждений / промышленность; сегмент ТЭК (НПЗ, заводы, подстанции, производственные зоны)

Fullstack-разработчик (бэкенд PHP/MODX + фронтенд), независимый подряд

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

PHP

MySQL

MODX Revolution

pdoTools

MIGX

FormIt

FetchIt

JavaScript

jQuery

Swiper

Fancybox

HTML

CSS

адаптивная вёрстка

Задача

ФАЛСТЕМ производит ограждения для промышленных объектов — заводов, нефтеперерабатывающих предприятий, электроподстанций. Сайт компании работал, но заявки с него уходили через встроенный виджет стороннего сервиса: собственной обработки форм не было, и заявка попадала сначала к чужому подрядчику, а уже потом к менеджеру.

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

Что сделано

Перевёл формы обратной связи с чужого виджета на собственную обработку: заявка проверяется на сервере, сохраняется в админке и уходит письмом, согласие на обработку данных сохранено. Оставил переключатель, чтобы вернуться к прежнему варианту одним движением, если что-то пойдёт не так.

Спроектировал шаблон «страница-решение» и собрал на нём раздел отраслевых решений: обзорная страница и шесть страниц по типам объектов, с галереей, вопросами-ответами и боковой навигацией, которая достраивается сама при добавлении новых страниц.

Сверстал новую шапку с многоуровневым меню и секцию «Преимущества» точно по макетам. Мобильную версию спроектировал сам — макетов под неё не было.

Сжал фотографии галереи, не трогая их размеры на странице.

Нашёл и закрыл проблему, оставшуюся от прошлых работ: резервные копии базы данных лежали в открытой части сайта и скачивались по прямой ссылке.

Итог

Фотографии галереи весят 691 КБ вместо 2796 КБ при том же размере изображений. Раздел отраслевых решений открыт: обзор и шесть страниц, все адреса отвечают. Заявки с сайта больше не зависят от стороннего сервиса — приходят на почту и хранятся в админке, где их видит менеджер. Резервные копии базы, лежавшие в открытом доступе, вынесены за пределы сайта.

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

Стек 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.

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

Платформа задана сайтом. MODX Revolution (PHP/MySQL) — то, на чём сайт уже работал, поэтому все решения делались в его парадигме: шаблоны, чанки, сниппеты и TV живут в БД, а не в файлах. pdoTools и MIGX — штатные для MODX способы выбирать ресурсы и описывать повторяющиеся блоки (галерея, FAQ), и отход от них означал бы чужеродный код в проекте, который дальше поддерживают другие.

Формы: FormIt + FetchIt. Актуальная для 2026 года связка — серверная валидация на стороне MODX плюс отправка через Fetch API без jQuery. FormItSaveForm даёт хранение заявок «из коробки», то есть менеджер видит их в админке без отдельной разработки.

Фронтенд — то, что уже подключено. Swiper 11, Fancybox и jQuery на сайте были; добавлять к ним параллельные библиотеки ради одного раздела значило бы утяжелять страницу без выигрыша.

Figma REST API — чтобы снимать размеры и цвета из макета точными значениями, а не на глаз со скриншота.

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

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