Техническая миграция и рефакторинг UI/UX: Обновление сайта компании по тонировке стекол на Joomla 6.1.2
Данный отчет описывает проект технической модернизации корпоративного сайта компании, предоставляющей услуги тонирования стекол. Работы были выполнены в конце июля 2026 года и включали в себя перевод ресурса с устаревшей версии Joomla 3.10.12 на актуальную Joomla 6.1.2. Главной задачей было обеспечение совместимости с современным серверным окружением (PHP 8.4) при строгом сохранении существующего визуального дизайна, как того требовал заказчик. Несмотря на относительную простоту проекта по сравнению с глобальными разработками "с нуля", процесс потребовал точечного рефакторинга шаблона и аккуратного обновления компонентов для обеспечения стабильной и быстрой работы обновленной системы.
Анализ задачи и стратегия миграции
Сайт долгое время функционировал на платформе Joomla 3.x, что накладывало существенные ограничения на безопасность и производительность. Использование устаревшего кода не позволяло перевести сервер на современные версии PHP. Заказчик настаивал на сохранении привычного внешнего вида сайта, а также на продолжении использования компонента SP Page Builder (SPPB), несмотря на рекомендации наших специалистов по переходу на более легковесные нативные решения Joomla 6 для улучшения показателей скорости загрузки.
В рамках утвержденного технического задания были определены следующие этапы:
- Поэтапная миграция ядра и базы данных на Joomla 6.1.2.
- Обновление компонента SP Page Builder до последней доступной версии.
- Рефакторинг кода старого шаблона Helix 3 для совместимости с PHP 8.4 и исправление накопившихся UI-ошибок.
- Доработка функционала: оптимизация шапки сайта и внедрение новых форм заказа.
Процесс миграции: База данных и Ядро
Переход с Joomla 3.10.12 на ветку 6.x представляет собой серьезный технический шаг, требующий конвертации структур базы данных. Мы провели аккуратный экспорт и импорт таблиц MySQL, сохранив все связи материалов, меню и настроек. База данных была адаптирована под актуальные требования ядра Joomla 6.1.2. Обновление компонента SP Page Builder потребовало синхронизации шорткодов и структур сохраненных страниц, чтобы визуальное представление контента (фотогалереи работ, описания услуг) осталось неизменным.
Рефакторинг шаблона Helix 3 и адаптация под PHP 8.4
Самым трудоемким этапом стала работа с шаблоном Helix 3. Оригинальный код шаблона не поддерживал строгие требования PHP 8.4 (отсутствие неявных объявлений свойств, изменения в работе функций строк и массивов). Наши специалисты провели глубокий рефакторинг исходного кода (файлов index.php, error.php, файлов логики фреймворка), устранив все фатальные ошибки (Fatal Errors) и предупреждения (Warnings), обеспечив идеальную работу шаблона в новой сверхбыстрой серверной среде.
UI/UX доработки и устранение ошибок дизайна
Параллельно с обновлением кода были исправлены мелкие, но важные недоработки старого дизайна, улучшающие пользовательский опыт:
- Оптимизация шапки (Header): Было исправлено выравнивание элементов в верхней части сайта. Логотип, контактные телефоны и адреса электронной почты теперь корректно позиционируются по сетке Bootstrap на экранах любого размера.
- Интеграция кнопок заказа: Для повышения конверсии в слайдер на главной странице была добавлена контрастная кнопка «Узнать цену» / «Заказать замер». Аналогичная кнопка (Call-to-Action) была органично встроена в мобильное оффканвас-меню (Off-canvas), чтобы пользователи смартфонов могли оставить заявку в один клик.
- Кастомизация формы заказа: Внедрена функциональная форма заказа обратного звонка (через компонент SimpleForm2). Для формы были написаны индивидуальные CSS-стили, органично вписывающие ее во всплывающее окно (Модал). Форма была доработана: добавлен функционал выбора времени звонка (сейчас или в указанное время) с помощью радиокнопок и поля ввода времени, а также обязательный чекбокс согласия на обработку персональных данных.
Технологический стек обновления
| Компонент | Версия | Роль в проекте |
|---|---|---|
| Ядро CMS | Joomla 6.1.2 | Безопасность, производительность, новая архитектура |
| Серверная среда | PHP 8.4 | Высокая скорость обработки кода, JIT-компиляция |
| Шаблон | Helix 3 (Рефакторинг) | Сохранение привычного дизайна с современным кодом |
| Конструктор страниц | SP Page Builder | Обновлен до последней версии по требованию заказчика |
Итоги модернизации
Проект наглядно демонстрирует, что даже "несложные" обновления требуют квалифицированного инженерного подхода, особенно когда речь идет о сохранении старого дизайна (legacy design) при переходе на новейшие технологии (PHP 8.4). Главная цель была достигнута: заказчик получил визуально идентичный, но технически современный, быстрый и защищенный сайт на базе Joomla 6.1.2. Добавление новых конверсионных элементов в шапку и мобильное меню, а также кастомизация формы заказа с выбором времени, напрямую способствуют росту лидогенерации компании.
Развернуть полный вид сайта по тонировке окон на Joomla
Примечание: текущее состояние и внешний вид действующего сайта могут отличаться от представленных в данном кейсе, так как после завершения проекта заказчик самостоятельно управляет контентом.
FAQ: Вопросы по миграции сайтов и обновлению шаблонов
Почему вы рекомендовали отказаться от SP Page Builder при переходе на Joomla 6?
Несмотря на удобство для пользователя, визуальные конструкторы генерируют избыточный код (много вложенных <div>) и загружают дополнительные скрипты и стили. Это увеличивает размер страницы и негативно сказывается на скорости загрузки (особенно на мобильных устройствах). Мы рекомендуем использовать нативные возможности Joomla 6 (кастомные поля, переопределения модулей) для создания чистой, семантичной и быстрой структуры.
В чем заключалась сложность адаптации старого шаблона Helix 3 под PHP 8.4?
PHP 8.4 ввел множество строгих правил: запрет на динамическое объявление свойств классов (Dynamic Properties), изменение поведения многих встроенных функций (например, функций работы со строками). Старый код шаблона Helix 3, написанный несколько лет назад, не соответствовал этим стандартам и вызывал критические ошибки на сервере. Потребовался ручной рефакторинг логики шаблона для обеспечения его работы.
Как реализована функциональность выбора времени в новой форме заказа?
В форму был добавлен блок с радиокнопками ("Сейчас" / "В указанное время"). С помощью небольшого скрипта на Vanilla JS мы настроили логику: при выборе "В указанное время" динамически отображается дополнительное поле ввода (input) для указания желаемой даты и времени звонка. Это делает форму более интерактивной и удобной для клиента.
Почему важно было выровнять шапку сайта (Header)?
Шапка сайта — это первое, что видит пользователь. Некорректное выравнивание элементов (логотип, контакты) создает впечатление непрофессионализма и снижает доверие к компании. Правильное позиционирование с использованием CSS Flexbox или Grid обеспечивает аккуратный внешний вид на всех устройствах, от широких мониторов до экранов смартфонов.
