Модернизация сайта строительных и отделочных работ: Переход на Joomla 5.2

В апреле 2025 года был реализован проект по комплексному техническому обновлению и редизайну корпоративного сайта компании, специализирующейся на механизированной штукатурке стен, стяжке полов и отделочных работах в Москве и Подмосковье. Главной задачей была миграция ресурса с безнадежно устаревшей платформы Joomla 3.9 на актуальную Joomla 5.2.0 с полным сохранением структуры URL-адресов и SEO-показателей. Параллельно с миграцией был разработан новый адаптивный шаблон, воссоздающий визуальную концепцию сайта-донора (референса), предоставленного заказчиком.

Исходные данные и инженерные задачи

Старая версия Joomla 3.9 несла в себе множество технических ограничений, включая несовместимость с PHP 8.x, отсутствие нативной поддержки современных CSS-фреймворков и наличие уязвимостей безопасности. В рамках проекта были выполнены следующие работы:

Полная выгрузка, очистка и конвертация базы данных (ETL) с Joomla 3.9 на структуру Joomla 5.x. Сохранены все ID материалов и алиасы для предотвращения появления ошибок 404 (Not Found).
Настройка серверного окружения VDS/VPS для работы на PHP 8.2.
Разработка нового фронтенда (шаблона) "с нуля" без использования громоздких визуальных конструкторов, опираясь на референсный дизайн заказчика.
Сохранение пользовательских скриптов (например, кастомного калькулятора штукатурных работ) и настройка конфигурации .htaccess и robots.txt.

Архитектура фронтенда и навигация

Для создания быстрого и адаптивного интерфейса был использован передовой фреймворк Helix Ultimate в связке с Bootstrap 5.3.3. Это позволило создать сложную структуру шапки сайта (Header) и реализовать концепцию Mobile First.

Структура шапки (Header)

Шапка сайта состоит из нескольких логических уровней, спроектированных для максимальной информативности:

Top Bar (#sp-premenu): Темная навигационная панель с вспомогательным меню (О нас, Наши объекты, Цены, Аренда, Видео). Внедрены кастомные стили (background-color: #121212, hover-эффект цвета #F3B661).
Header Info (#sp-prehead): Блок, содержащий логотип компании, виджет графика работы с интеграцией рейтинга Яндекс.Карт (через iframe) и блок быстрых контактов. В контактном блоке реализованы кнопки с функцией copyToClipboard для быстрого копирования телефона и Email, а также ссылки на модальные окна вызова замерщика и калькулятора.
Main Navigation (#sp-header): Основное навигационное меню (Mega Menu). Для раздела «Штукатурка стен» настроен широкий выпадающий контейнер (sp-dropdown-mega), разбитый на колонки col-sm-3, что позволяет структурировать подвиды услуг (ручная, механизированная, под обои, под покраску). В этой же панели интегрирован модуль поиска.

Интеллектуальный поиск (Smart Search)

Вместо стандартного поиска Joomla внедрен компонент Умного поиска (com_finder) с поддержкой OpenSearch. В <head> добавлены директивы application/opensearchdescription+xml, позволяющие искать по сайту прямо из адресной строки браузера.
Визуально поиск реализован в виде скрытого модального окна (#search-modal-274). При клике на иконку лупы JavaScript-обработчик добавляет класс active, открывая поверх интерфейса крупную поисковую форму с интегрированной библиотекой Awesomplete (для автодополнения запросов).

Интерактивные элементы и контентные блоки

Слайдер Hero-секции

В блоке #sp-slider реализован кастомный слайдер (без использования тяжелых сторонних плагинов). Он содержит текстовые блоки с преимуществами (slider-text) и соответствующие им изображения (slider-images). Навигация осуществляется через стилизованные точки (pagination-dot). Выводятся три ключевых направления: "Штукатурка стен", "Качественные отделочные работы", "Ремонт помещений под ключ".

Сетка услуг (Custom CSS Grid)

В секции #sp-position1 спроектирована нестандартная модульная сетка (.custom-blocks), состоящая из 5 блоков (Штукатурные работы, Электромонтажные работы, Стяжка полов, Малярные работы, Ремонт ванных комнат). Блоки чередуют цветовые схемы (block-yellow и block-dark) и содержат маркированные списки с перечислением конкретных видов работ. Для каждого блока внедрена кнопка "Подробнее" с отцентрованным позиционированием (согласно п.21 доп. работ).

Видеогалерея и интеграция карт

Видео-блок (#sp-position2): Разработана легковесная галерея .video-gallery. Вместо прямой загрузки iframe-плееров, замедляющих рендеринг страницы, используются обложки-заглушки (video-placeholder) с фоновыми изображениями. Видео подгружается только при взаимодействии пользователя.
Гео-блок (#sp-position4): Секция "Наши объекты на карте" разделена на две части (left-part и right-part). Слева интегрирована интерактивная Яндекс.Карта через API конструктора. Справа встроен официальный виджет отзывов Яндекса (yandex.ru/maps-reviews-widget), подтверждающий репутацию компании.

Инструменты лидогенерации и обратной связи

Для сбора заявок от клиентов интегрирован компонент QuickForm3 (QF3) версии 3.3.05.

Скрипты форм (qf3.js) и стили (call_me_form.css) загружаются только по требованию.
Формы обратного звонка и "Вызов замерщика" открываются в модальных окнах (через класс qf3modal) по всему сайту: в шапке, в подвале, в плавающем блоке .footer-position.
Настроены прямые ссылки на популярные мессенджеры (WhatsApp и Telegram) в блоке быстрой связи (footer-contacts-phone).
Внедрен QR-код (vCard) в подвале сайта (открывается через плагин JCE Mediabox jcepopup), позволяющий заказчикам мгновенно сохранить все �