Комплексная модернизация и ребрендинг корпоративной платформы сайта веб-разработчика Revation на Joomla 6.1.2

Данный технический кейс представляет собой развернутый анализ процесса глубокой модернизации, архитектурного рефакторинга и полного визуального ребрендинга корпоративного веб-ресурса агентства разработки. Наш собственный проект, реализованный в августе 2026 года, является логическим продолжением концепции непрерывного совершенствования (Continuous Improvement). Если в 2025 году платформа была успешно переведена на ядро Joomla 5 с интеграцией базовых e-commerce решений, то текущий сплит работ ознаменовал переход на новейшую архитектуру Joomla 6.1.2 с абсолютной оптимизацией под компилятор PHP 8.4. Фундаментальным изменениям подверглись все уровни стека: от замены e-commerce движка (переход с J2Store на более производительный J2Commerce) до внедрения сложнейших клиентских JavaScript-модулей (10-шаговый интерактивный квиз, система динамического геотаргетинга, асинхронные формы SimpleForm2). Мы твердо убеждены, что наш корпоративный сайт как разработчика не может быть статичным — он обязан регулярно обновляться в целях безопасности, соответствия алгоритмам ПС и демонстрации передовых возможностей кодинга.

Философия непрерывного обновления (Опыт 2025 и цели 2026 года)

В веб-индустрии технологии устаревают экспоненциально. Предыдущая мажорная итерация сайта (в 2025 году) базировалась на Joomla 5 и компоненте J2Store. Эта связка отлично решала задачи того периода, позволив внедрить беспарольный вход WebAuthn и базовую AJAX-корзину. Однако с выходом стандарта PHP 8.4 и релизом Joomla 5.0, парадигма безопасности и управления памятью изменилась. Старые расширения начали демонстрировать избыточное потребление ресурсов CPU. В августе 2026 года было принято решение не просто обновить ядро (minor update), а провести масштабный реинжиниринг.

Стратегические технические задачи текущей модернизации:

• Бесшовное обновление минорных и мажорных версий (с 5.0.x до актуальной 6.1.2) с адаптацией структуры базы данных MySQL 8+ под новые индексы ядра.
• Глобальный визуальный ребрендинг: переход на обновленную дизайн-систему с использованием CSS-переменных (Custom Properties) для поддержки бесшовного переключения тем (Dark/Light mode).
• Миграция электронной коммерции: полный отказ от J2Store в пользу высокотехнологичного компонента J2Commerce с переписыванием всей логики работы мини-корзины на клиенте.
• Замена устаревших систем лидогенерации (QF3) на прогрессивный AJAX-модуль SimpleForm2 с реализацией Fetch API.
• Разработка с нуля модулей вовлечения: динамического калькулятора-брифа (Квиза на 10 шагов) и модуля умного геотаргетинга (Country/Cities) для персонализации предложений.
• Расширение систем аутентификации: интеграция Telegram Login Widget в экосистему Akeeba Social Login с сохранением строгих корпоративных гайдлайнов соцсетей.

Миграция E-commerce: От J2Store к J2Commerce

Одним из самых ресурсоемких этапов стала смена торгового движка. Компонент J2Commerce предоставляет более строгую архитектуру работы с сессиями и корзиной, полностью совместимую с JIT-компилятором PHP 8.4. Процесс миграции потребовал конвертации таблиц товаров, атрибутов и истории заказов через написание кастомных SQL-транзакций.

Инженерия Асинхронной Корзины (AJAX Mini-Cart)

Мы полностью переписали клиентскую логику обновления корзины покупок (модуль j2commerce-cart-module), отказавшись от устаревших методов jQuery (типа .html()) в пользу безопасных и производительных нативных DOM API. В исходном коде реализован уникальный слушатель событий:

• Скрипт подписывается на кастомное событие j2commerce:cart:updated. При его срабатывании инициируется HTTP-запрос через fetch() с заголовком X-Requested-With: XMLHttpRequest к системному контроллеру carts.ajaxmini.
• Контроллер возвращает сырой HTML-код корзины внутри JSON-объекта.
• Для безопасной интеграции полученного HTML в DOM-дерево используется функция replaceWithFragment(el, html), базирующаяся на методе document.createRange().createContextualFragment(html).
• В отличие от небезопасного innerHTML, метод createContextualFragment парсит строку и создает изолированный DocumentFragment, в котором корректно компилируются и выполняются все вложенные скрипты <script>, что критически важно для инициализации обработчиков внутри обновленной корзины J2Commerce.

Проектирование интерактивного модуля брифования (10-шаговый Квиз)

Для автоматизации процесса пресейла (сбора первичных требований от заказчиков) инженерами был разработан сложный интерактивный модуль — Quiz Block Module. Это изолированное SPA-приложение (Single Page Application) внутри сайта, написанное на Vanilla JS.

Архитектура управления состояниями (State Management)

Квиз содержит 10 шагов, логика которых нелинейна. Скрипт отслеживает выбранные пользователем radio и checkbox инпуты и динамически перестраивает DOM-дерево последующих шагов:

1. Условный рендеринг: Например, на Шаге 5 («Текущий сайт и инфраструктура»), если пользователь выбирает "Есть сайт? -> Да", скрипт мгновенно удаляет атрибут style="display:none;" у блока #q5_site_details, открывая поля для ввода URL и выбора CMS.
2. Ветвление логики: Если на шаге 1 выбрано «Обновить Joomla», скрытые блоки #block_update_joomla_extras становятся активными, запрашивая информацию о текущей версии, бэкапах и установленных плагинах.
3. Расчет результатов "На лету": На финальном 10-м шаге JS-алгоритм агрегирует все собранные данные из форм (new FormData(form)), анализирует вес ответов и динамически подставляет в блок #recommendedSiteType рекомендованное решение (например, "Интернет-магазин" или "Корпоративный сайт"), а также генерирует ориентировочные сроки (#calcTime).
4. Бесшовная интеграция с SimpleForm2: Все собранные ответы (сериализованные в текстовый блок quiz_results) передаются в скрытое поле модуля mod_simpleform2 (ID 213). По клику «Отправить заявку» данные уходят на сервер через асинхронный Fetch-запрос, а форма заменяется на сообщение об успехе без обновления страницы.

Многоканальная лидогенерация: Интеграция SimpleForm2

В рамках августовского обновления 2026 года был осуществлен переход с компонента QuickForm3 (QF3) на более современное решение SimpleForm2 (SF2). SF2 обладает встроенной защитой от спама и генерирует значительно более чистый HTML-код, интегрируемый в макеты Bootstrap 5.3.8.

Кастомизация и обработка форм

В исходном коде сайта развернуто несколько экземпляров модуля SF2 (ID 206 для обратного звонка, ID 210 для обсуждения проекта, ID 213 для Квиза). Мы написали глобальный JS-обработчик для перехвата сабмита всех форм:

• Метод document.querySelectorAll('form[name^="simpleForm2_"]') собирает все формы.
• Навешивается слушатель submit с командой e.preventDefault().
• Данные инкапсулируются в объект FormData и отправляются через fetch(window.location.href, { method: 'POST' }).
• Серверный плагин обрабатывает запрос, проверяет скрытые поля (Honeypot) и капчу (Google reCAPTCHA v3), после чего возвращает JSON {message: "Успех"}.
• JS-скрипт находит контейнер .sf2-body внутри отправленной формы и заменяет его содержимое на блок .sf2-message. Эта микроинтеракция сохраняет контекст пользователя (сохраняя модальное окно открытым, но показывая результат).

Сложные элементы форм (Умный выбор времени)

В формах реализован UX-паттерн выбора времени звонка. При переключении радио-кнопки «Когда вам перезвонить?» с "Сейчас" на "В указанное время", JavaScript плавно раскрывает дополнительный контейнер .sf2-datetime-wrapper, интегрированный с легковесным плагином DatePicker для удобного выбора даты и времени встречи.

Геотаргетинг и мультирегиональность (mod_country_cities)

Корпоративный ресурс работает с клиентами по всему миру. Для обеспечения релевантности предложений внедрен модуль Country & Cities. Он использует базу данных IP-адресов (MaxMind или аналоги) для определения локации посетителя (например, Санкт-Петербург или Париж). Модуль выведен в топ-бар в формате desktop-horizontal mobile-vertical. При изменении города через выпадающий список (Drop-down), модуль устанавливает системную Cookie. Серверная часть читает эту Cookie и динамически подменяет контактные данные (телефоны .country_cities_mod_city_phone, email-адреса) и даже содержимое некоторых посадочных страниц, повышая доверие региональных заказчиков.

Многоуровневая система аутентификации: WebAuthn, OAuth и инжиниринг соцсетей

В продолжение успешного опыта 2025 года, система авторизации была расширена и доработана. Базовый беспарольный вход (WebAuthn / FIDO2) через биометрию по-прежнему функционирует безупречно благодаря нативной поддержке Joomla. Модуль социальной аутентификации Akeeba Social Login получил существенное развитие.

Интеграция Telegram Login Widget

Стандартная OAuth-авторизация (Google, Yandex, VK) работает через редиректы. Однако для интеграции Telegram потребовался иной подход. Мы написали кастомный JS-инжектор:

• Скрипт ищет DOM-узел .akeeba-sociallogin-link-button-telegram a[href] (заглушку от плагина).
• Динамически создает контейнер div и элемент <script> с атрибутами src="https://telegram.org/js/telegram-widget.js?22", data-telegram-login="revation_login_bot" и data-auth-url=".../telegram-callback.php".
• Скрипт вставляется в DOM асинхронно, заменяя собой заглушку. Это предотвращает блокировку рендеринга страницы (Render-Blocking) скриптами Telegram и обеспечивает отрисовку нативного виджета, который перехватывает сессию пользователя в десктопном или мобильном клиенте Telegram.

CSS-Override для VK ID

Вендоры плагинов часто используют устаревшие HEX-коды для брендовых кнопок. В 2025 году мы решили эту проблему, и в текущей версии переписали алгоритм на более надежный. После загрузки страницы скрипт находит кнопку .akeeba-sociallogin-link-button-vk и через метод style.setProperty('background-color', '#0077ff', 'important') принудительно инжектирует актуальный фирменный синий цвет VK ID. То же самое применяется к заливке (fill) встроенной SVG-иконки. Этот подход позволяет сохранять визуальную консистентность брендбуков без необходимости взламывать (hack) файлы ядра Akeeba Social Login при каждом его обновлении.

Ребрендинг, Helix Ultimate и микроинтеракции

Визуальный ребрендинг августа 2026 года базируется на фреймворке Helix Ultimate в связке с Bootstrap 5.3.8. Мы переработали SCSS-архитектуру, переведя все ключевые цвета, отступы и типографику в переменные CSS (CSS Custom Properties, например var(--primary-color)). Это заложило базу для реализации режимов Dark/Light mode на уровне клиента без запросов к серверу.

Инновации в UI/UX

• Тег <search>: В верстку внедрен семантический HTML5-тег <search>, оборачивающий модули поиска. Это улучшает доступность (Screen Readers) и понимание структуры документа поисковыми ботами.
• Маскировка E-mail: Ядро Joomla 6.1.2 предоставляет мощный плагин скрытия почты от спам-парсеров. Все адреса оборачиваются в кастомный веб-компонент <joomla-hidden-mail>, где атрибуты first, last и text передаются в формате Base64 (например, ZmlzaGFrb3Y=). Браузер дешифрует их "на лету" с помощью JS-модуля joomla-hidden-mail.min.js, собирая кликабельную ссылку mailto:. Спам-боты видят только нечитаемый хэш.
• Yandex Reviews Iframe: Интеграция блока "Отзывы клиентов" осуществлена через безопасный iframe (API Яндекс.Карт). Мы обернули его в контейнер с микроразметкой Schema.org/ProfessionalService и AggregateRating. Сами отзывы дублируются в HTML-структуре (через Schema.org/Review) для индексации текстов поисковиками, в то время как iframe обеспечивает актуальный рейтинг 4.6 из Яндекса в реальном времени.
• Модули "Этапы работы" и "Преимущества": Сверстаны с использованием свойств display: grid и gap. Элементы списка снабжены микроразметкой ItemList и ListItem. Для эффектов переворота (Flip cards) и подсветки линий прогресса используются исключительно аппаратные CSS-анимации (свойства transform и opacity), что разгружает Main Thread браузера.

SEO-инжиниринг, OpenSearch и внешние интеграции

В конкурентной нише веб-разработки техническое SEO играет критическую роль. Платформа обладает следующим инструментарием:

1. OpenSearch: Как и в предыдущих итерациях, в <head> встроен тег application/opensearchdescription+xml. Он позволяет браузерам (Chrome, Edge) кэшировать поисковый паттерн сайта. При вводе "revation.ru" в адресной строке пользователь может нажать "Tab" и искать статьи в нашем блоге напрямую из браузера, минуя загрузку главной страницы.
2. Smart Search & Awesomplete: Интеграция Awesomplete.js (v1.1.7) к системному модулю умного поиска (com_finder) обеспечивает мгновенное появление AJAX-подсказок. В отличие от jQuery UI Autocomplete, этот скрипт весит всего 2 КБ и работает асинхронно, отправляя запросы к /component/finder?task=suggestions.suggest&format=json.
3. E-commerce трекинг (Яндекс.Метрика): Код счетчика Яндекс.Метрики глубоко интегрирован с J2Commerce. Активирован параметр ecommerce:"dataLayer", позволяющий отслеживать воронку продаж (добавление в корзину, просмотр товара, покупка) и строить сквозную аналитику в дашбордах Яндекса.
4. Email-маркетинг (AcyMailing): Модуль подписки переведен на AJAX-отправку. Для защиты от спама внедрена валидация на основе регулярных выражений (acymModule['emailRegex'] = /^[a-z0-9!#$%&\'*+\/=?^_`{|}~-]+...) прямо на клиенте перед отправкой запроса к com_acym/frontusers.

Эволюция UI/UX: Глобальный визуальный ребрендинг платформы

Важнейшим этапом модернизации стал полный пересмотр графического интерфейса и отказ от устаревшей визуальной концепции в пользу современного премиального B2B-дизайна. Анализ старого макета выявил перегруженность графическим шумом, слабую визуальную иерархию и отсутствие акцентов на конверсионных маршрутах пользователя.

Архивный дизайн (версия 2025 года)

В предыдущей итерации 2025 года использовалась стандартная шаблонная компоновка. Интерфейс характеризовался избыточным применением разноформатных фоновых изображений в сетке услуг, тяжелыми тенями и неконсистентной цветовой палитрой (смешение синего в кнопках, серого в фоне и зеленого в футере). Отсутствие единого дизайн-кода и недостаток свободного пространства (Negative Space) приводили к "слипанию" контентных блоков, затрудняя быстрое сканирование информации.

Новая UI/UX концепция (версия 2026 года)

Актуальный дизайн спроектирован с фокусом на минимализм, технологичность и формирование доверия (E-E-A-T). Интерфейс полностью перерисован с учетом современных паттернов восприятия B2B-аудитории. Внедрены следующие архитектурные и визуальные изменения:

• Премиальная цветовая схема: Основой нового фирменного стиля стал глубокий темно-синий цвет (Dark Navy) в контрастном сочетании с чистыми белыми фонами. Это формирует образ надежного, дорогого и экспертного IT-агентства. Футер и навигационные панели приведены к единому строгому стилю.
• Переработка сетки (Grid) и иконографики: Тяжелые фото-превью в каталоге услуг заменены на минималистичную векторную иконографику и чистые линии. Карточный интерфейс стал легче, избавившись от лишних рамок и теней.
• Типографика и иерархия: Существенно увеличен контраст заголовков и улучшена читаемость основного текста за счет правильного интерлиньяжа. Текстовые блоки теперь четко отделены друг от друга.
• Конверсионные слои и ритм: Макет перестроен под активную лидогенерацию. В структуру посадочной страницы органично интегрированы "перебивочные" темные блоки (таймлайн этапов работы, блок квиза, форма захвата). Они визуально разбивают длинный скролл, задают правильный ритм чтения и фокусируют внимание пользователя на целевых действиях.
• Блоки Social Proof: С нуля спроектированы зоны доверия (карусель выполненных работ с аккуратными превью, интеграция виджета Яндекс.Отзывов), которые вписаны в общую строгую стилистику без визуального отторжения.

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

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

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

Заключение

Регулярное техническое обслуживание и модернизация собственного сайта — это не только вопрос имиджа как агентства по веб-разработки, но и критическая необходимость для защиты бизнес-данных. Процесс, проведенный в августе 2026 года, включал сложнейшую миграцию с J2Store на J2Commerce, апгрейд ядра с Joomla 5.0 до 6.1.2 и адаптацию кода под PHP 8.4. Мы полностью переписали клиентскую логику, внедрив передовые DOM API методы (такие как createContextualFragment) и разработали уникальный интерактивный Квиз на чистом JavaScript. Этот проект подтверждает нашу способность реализовывать высоконагруженные B2B и B2C решения, обеспечивая их бесперебойную работу, глубокую SEO-интеграцию и соответствие новейшим стандартам кибербезопасности.

FAQ: Вопросы по архитектуре сайта и его разработке