Комплексная миграция и рефакторинг сайта автосервиса: Переход на Joomla 5.2

В декабре 2024 года командой разработки Revation был реализован критически важный технический проект по комплексной миграции корпоративного портала сети сервисных центров легковых автомобилей. Ресурс был переведен с устаревшей, снятой с поддержки ветки Joomla 3.x на самую актуальную и высокопроизводительную платформу Joomla 5.2.x. Процесс потребовал масштабного рефакторинга базы данных, полной замены фронтенд-фреймворка, переписывания структуры шаблона для соответствия стандартам PHP 8.2 и внедрения передовых протоколов безопасности.

Техническая проблематика и задачи миграции

Длительная эксплуатация ресурса на Joomla 3.x привела к накоплению технического долга. Кодовая база базировалась на устаревших вызовах API (таких как JRequest, JFactory), которые полностью удалены в архитектуре Joomla 5, использующей строгую типизацию, пространства имен (Namespaces) и внедрение зависимостей (Dependency Injection). Основные задачи проекта:

Экстракция, трансформация и загрузка (ETL) базы данных MySQL с сохранением всех идентификаторов статей (com_content), пользователей и алиасов меню для предотвращения потери SEO-трафика.
Перевод фронтенда с Bootstrap 2/3 на актуальный Bootstrap 5.3.3 с отказом от тяжелых зависимостей jQuery там, где это возможно, в пользу Vanilla JS.
Внедрение беспарольной биометрической аутентификации по стандарту FIDO2.
Сохранение существующего визуального стиля (UI) с полной переработкой его внутренней структуры (HTML/CSS) для повышения баллов в Google PageSpeed Insights.
Замена несовместимых компонентов лидогенерации и email-маркетинга на актуальные версии.

Архитектура фронтенда: Helix Ultimate и Bootstrap 5

В качестве фундамента для построения пользовательского интерфейса применен фреймворк Helix Ultimate. Это позволило создать гибкую модульную сетку и обеспечить 100% адаптивность (Mobile First).

Структура макета (Layout Structure)

Макет страницы разделен на функциональные зоны, управляемые через систему макетов Helix (Layout Builder). Внедрены следующие технические параметры, зафиксированные в конфигурации шаблона:

"data":{"breakpoints":{"tablet":991,"mobile":480},"header":{"stickyOffset":"100"}}

Адаптивные брейкпоинты: Жестко заданы контрольные точки для перестроения сетки: 991px для планшетов и 480px для мобильных устройств.
Sticky Header: Активировано «липкое» меню с параметром stickyOffset: 100. Шапка сайта фиксируется в верхней части экрана только после того, как пользователь проскроллит 100 пикселей вниз, что позволяет экономить полезную площадь экрана на первом экране загрузки.
Управление стилями: CSS-код модулей изолирован. Внедрены инлайн-переопределения фоновых изображений и цветов для ключевых секций, что минимизирует количество блокирующих рендеринг внешних CSS-файлов. Например, для блока #sp-intro задано свойство background-image:url("/images/template/bg-service-parts.jpg"); background-size:cover;.

Реализовано многоуровневое навигационное меню (Mega Menu). Элементы меню (О нас, Блог, Новости) формируют выпадающие контейнеры с классом sp-dropdown-mega и фиксированной шириной style="width: 600px;". Внутри мега-меню контент распределен по колонкам col-sm-4, содержащим списки sp-mega-group-child. Данная архитектура позволяет пользователю в один клик получить доступ к любой внутренней странице сайта (Реквизиты, Акции, Диагностика, Обслуживание).

Мобильное меню (Off-Canvas)

Для смартфонов интегрировано независимое боковое меню (Off-Canvas), вызываемое через иконку «бургер» (offcanvas-toggler). Меню использует классы d-flex align-items-center для выравнивания элементов и включает интегрированный модуль умного поиска (Smart Search).

Интеграция протокола WebAuthn (Passkeys)

Одним из ключевых нововведений Joomla 5 является нативная поддержка протокола беспарольной аутентификации WebAuthn (Passkeys). Эта технология внедрена в модуль авторизации (mod_login