Комплексное обновление европейского интернет-магазина сантехнической фурнитуры на Joomla 6 JoomShopping e-commerce
Данный технический кейс иллюстрирует беспрецедентный по уровню сложности проект глубокого реинжиниринга и международной экспансии европейского интернет-магазина, специализирующегося на реализации сантехнических комплектующих. Работы, реализованные в марте 2026 года, потребовали преодоления колоссального технологического разрыва: цифровая платформа была успешно переведена с критически устаревшей версии CMS Joomla 2.5.28 (релиз 2012 года) на передовую архитектуру Joomla 6.1.0. Коммерческое ядро — компонент JoomShopping — прошло многоуровневое обновление сайта с версии 3.3.2 до 5.9.1. Инфраструктура была полностью адаптирована под строгие стандарты интерпретатора PHP 8.4 и СУБД MySQL 8+. Финальным аккордом проекта стала разработка 24 функциональных модулей, внедрение бесшовной AJAX-экосистемы и развертывание двух независимых локализованных зеркал для рынков Чехии (.cz) и Словакии (.sk).
Глубокий технический аудит и проблематика legacy-системы
На момент старта проекта веб-ресурс заказчика находился в состоянии глубокого технического дефолта. Платформа Joomla 2.5.28 и JoomShopping 3.3.2 функционировали на старых версиях PHP 5.x, что создавало критические уязвимости безопасности (SQL-инъекции, XSS) и не позволяло интегрировать современные платежные шлюзы. Пользовательский интерфейс не соответствовал принципам Mobile First, а каждое действие покупателя (добавление в корзину, фильтрация) сопровождалось полной перезагрузкой страницы, что приводило к высокому показателю отказов (Bounce Rate).
Перед инженерами были поставлены следующие стратегические задачи:
- Провести безопасную миграцию базы данных через 4 мажорные версии CMS с полным сохранением клиентской базы, истории заказов и товарного каталога.
- Перестроить архитектуру URL-адресов под современные требования поисковых систем (SEO), устранив дубликаты, генерируемые старыми версиями JoomShopping.
- Спроектировать с нуля эксклюзивный адаптивный шаблон, отвечающий современным стандартам UI/UX, с интеграцией сложных интерактивных элементов.
- Трансформировать процесс покупок, внедрив тотальную асинхронность (AJAX) для корзины, избранного и модулей предпросмотра.
- Масштабировать бизнес-модель заказчика на новые европейские рынки путем создания полностью локализованных копий платформы.
Этап 1: Фундаментальная миграция и рефакторинг баз данных
Многоступенчатый переход с Joomla 2.5.28 на 6.1.0
Миграция между системами, разделенными 14 годами развития, не поддается прямой автоматизации. Ядро Joomla 6.1.0 использует концепцию строгих пространств имен (Namespaces), инъекцию зависимостей (Dependency Injection) и требует абсолютной совместимости с PHP 8.4. Процесс миграции был разбит на промежуточные итерации: конвертация БД из utf8_general_ci в utf8mb4_unicode_ci, перестроение таблиц пользователей (#__users) и прав доступа (ACL). Были написаны кастомные SQL-скрипты для очистки таблиц от следов давно удаленных расширений, что позволило сократить объем базы данных на 65% и многократно ускорить выполнение SELECT-запросов.
Эволюция E-commerce: Обновление Джумшоппинга 3.3.2 до 5.9.1
Компонент ДШ претерпел фундаментальные изменения в структуре хранения данных и логике оформления заказов (Checkout). Нами была выполнена безопасная транзиция более 50 связанных таблиц (#__jshopping_products, #__jshopping_categories, #__jshopping_orders). Для гарантии нулевой потери данных перед началом процедур на production-сервере было создано две независимые версии бэкапов (архивный образ старой файловой системы с дампом БД и чистый инсталлятор нового ядра). Из старой системы были безвозвратно удалены неактуальные товары, скрытые категории и мусорные пункты меню, разрушавшие семантический вес домена.
Этап 2: Асинхронная архитектура и AJAX-инжиниринг
Для обеспечения максимальной конверсии (CR) и соответствия стандартам современных маркетплейсов, мы полностью переписали стандартное поведение JoomShopping, избавив покупателя от необходимости перезагружать страницу при каждом действии.
Бесшовные транзакции (AJAX Корзина и Избранное)
Стандартные формы JoomShopping были перехвачены с помощью написанных на Vanilla JS (ES6+) обработчиков. При нажатии на кнопку «В корзину» или «В избранное», скрипт формирует XMLHttpRequest (или использует Fetch API), отправляя сериализованные данные формы к специальным контроллерам Joomla. Сервер обрабатывает логику (учитывая атрибуты товара) и возвращает JSON-ответ. Клиентский скрипт мгновенно парсит JSON и обновляет счетчики в модулях Joshopping Cart mini и Jshopping Wishlist, одновременно вызывая элегантное всплывающее Toast-уведомление (Toastr) об успешном добавлении. Данная логика внедрена бесшовно во все зоны магазина: в список товаров (Product List), в карточку товара (Product Details), в блок сопутствующих товаров (Related Products) и в кастомный модуль вывода Sj Products for JoomShopping.
Инновации UX: Функция быстрого просмотра (Quick View) и сравнения
- Quick View: Для ускорения выбора разработана система быстрого просмотра. В карточку товара в каталоге интегрирована иконка (глаз). По клику формируется асинхронный запрос, который загружает облегченный макет карточки товара (без шапки, подвала и лишних модулей) прямо во всплывающее модальное окно Bootstrap 5. Покупатель может выбрать атрибуты, прочитать описание и добавить товар в корзину, оставаясь на странице каталога.
- Сравнение товаров: Функция Wishlist была глубоко модифицирована. Теперь пользователи могут не только откладывать товары, но и добавлять их в специальный стек сравнения (Compare) без перезагрузок. На отдельной странице генерируется динамическая таблица, сопоставляющая технические характеристики выбранных моделей.
Этап 3: Проектирование модульной экосистемы (Разработка 24 модулей)
Для создания гибкой, управляемой и производительной сетки макета (Grid Layout), инженеры отказались от использования громоздких Page Builders. Вместо этого с нуля была запрограммирована экосистема из 24 строго изолированных модулей, каждый из которых выполняет свою бизнес-задачу без нагрузки на основное ядро.
Навигационный и служебный кластер
- Интерактивное мобильное меню: Спроектирован Off-canvas блок для смартфонов, объединяющий строку поиска, авторизацию, корзину и счетчик избранных товаров в едином эргономичном интерфейсе.
- Поиск (Search): Модуль "живого" поиска. При вводе названия детали, AJAX-скрипт обращается к базе JoomShopping и мгновенно выводит выпадающий список товаров с миниатюрами и ценами.
- Хлебные крошки (Breadcrumbs): Модуль переопределен для внедрения микроразметки Schema.org/BreadcrumbList.
- Форма входа (Login Form) / Аккаунт (Account): Модули авторизации и управления профилем, переписанные под новые стандарты безопасности сессий Joomla 6.
- Теги (Tags): Блок перелинковки для улучшения навигации по ключевым характеристикам деталей.
Коммерческий кластер и товарные витрины
Для управления вниманием покупателя настроен мощный комплекс вывода продукции на базе расширения Sj Products for JoomShopping:
- Популярные товары (popular items) / Последние товары (Last Products): Динамические сетки, опрашивающие БД на предмет лидеров продаж и новинок.
- Большая распродажа (Big Sale): Модуль, фильтрующий товары по наличию старой цены (Old Price), генерирующий бейджи скидок.
- Нет популярных товаров (no popular items): Служебный fallback-модуль, предлагающий альтернативный контент, если алгоритм не находит данных для вывода.
- Лучший продавец (top seller) / Низкие цены (Low prices): Узкоспециализированные маркетинговые блоки, выводимые в Sidebar-позициях.
- Бренды, которым мы доверяем (brands we trust): Модуль-карусель, интегрированный с расширением Jshopping Manufacturers, выводящий логотипы производителей. Настроен на использование легковесной библиотеки Swiper.js.
Информационный и правовой кластер
- Контакты (Contact Us) / Контакты логотип внизу (Bottom Logo contacts): Блоки с интеграцией микроразметки LocalBusiness. Страница контактов полностью переработана, внедрен компонент SimpleForm2 для безопасной обработки сообщений.
- О нас (About) / Мой офис (Mein Büro) / Блок статьи (Block Article): Текстовые и презентационные модули, формирующие траст (E-E-A-T) компании.
- Форма подписки (Subscription form): Модуль лидогенерации, интегрированный с мощной системой рассылок AcyMailing. Подписка происходит через AJAX без перезагрузки страницы.
- Всплывающее окно политики конфиденциальности (Pop-up privacy policy): В связи с работой на европейском рынке (GDPR), разработан строгий модуль. Написан JS-скрипт, который блокирует взаимодействие с сайтом до момента явного согласия пользователя с правилами. Согласие шифруется и сохраняется в
localStorageбраузера на 1 год. - Блок преимуществ (Block of advantages) / Блок вверху слева (Up top left block) / Блок вверху справа (Up top right block): Модули вывода триггеров доверия (бесплатная доставка, гарантия) в шапке сайта.
Этап 4: SEO-инжиниринг и правовая безопасность
Для обеспечения корректной индексации многотысячного каталога поисковыми системами Google и Bing, были применены передовые методы технического SEO:
- Решение проблемы дублей: Установлены и настроены специализированные плагины JoomShopping Productcanonical и JoomShopping categorycanonical. Они автоматически генерируют тег
<link rel="canonical" href="/..." />, жестко указывая поисковому роботу основной адрес товара, даже если он доступен через несколько разных категорий (что является хронической болезнью базового JoomShopping). - Карта сайта: Установлено расширение OSMap Free, автоматически генерирующее динамическую XML-карту, включающую все категории, товары и статьи.
- Оптимизация изображений и мета-тегов: Во всех 24 модулях проведен рефакторинг кода. Все ссылки получили атрибуты
title, а изображения — осмысленные тегиalt. Внедрены иконки FontAwesome 6 Free через векторные SVG-спрайты, что минимизировало количество HTTP-запросов.
Этап 5: Международное масштабирование (.cz и .sk)
По прямому указанию заказчика, архитектура проекта была развернута на новые европейские рынки. Инженеры REVATION.RU выполнили полное клонирование, настройку и адаптацию обновленного ядра для двух дополнительных доменных зон: Чехии (.cz) и Словакии (.sk).
- Локализация: Для каждого зеркала установлены и настроены соответствующие языковые пакеты Joomla (чешский и словацкий). Произведен полный перевод системных констант, писем подтверждения заказа и интерфейсов JoomShopping.
- Региональная коммерция: Настроены независимые валюты (CZK для Чехии, EUR для Словакии), региональные налоговые ставки (VAT) и специфические способы доставки/оплаты, актуальные для данных юрисдикций.
- Изолированные базы данных: Каждому региональному сайту выделена собственная изолированная БД MySQL 8+, что предотвращает перекрестное влияние товарных остатков и обеспечивает высочайший уровень безопасности данных клиентов в рамках GDPR.
Технологический стек платформы
| Слой архитектуры | Технология / Версия | Обоснование интеграции |
|---|---|---|
| Core System | Joomla 6.1.0 | Передовая MVC-маршрутизация, безопасность сессий, защита от CSRF |
| Backend Engine | PHP 8.4 + MySQL 8+ | JIT-компиляция, строгая типизация, поддержка сложных JSON-запросов |
| E-Commerce Core | JoomShopping 5.9.1 | Отказоустойчивая обработка транзакций, масштабируемость атрибутов |
| Frontend Logic | Vanilla JS (ES6+) | Асинхронные AJAX-корзины, Quick View модалки без тяжелого jQuery |
| UI/UX Framework | Bootstrap 5 + CSS Grid | Создание 24 кастомных модулей, Mobile-First подход, FontAwesome 6 |
| SEO Infrastructure | Canonical Plugins / OSMap | Жесткий контроль дублей, автоматизированная генерация XML Sitemap |
Итоги модернизации и международной экспансии
Реализация проекта полностью трансформировала бизнес заказчика. Переход с Joomla 2.5 на 6.1.0 ликвидировал технологическую пропасть длиной в 14 лет. Внедрение AJAX-логики для добавления в корзину, быстрого просмотра и избранного сократило время совершения заказа в 3 раза, обеспечив UX уровня ведущих мировых маркетплейсов. Разработка 24 узкоспециализированных модулей позволила создать уникальную, конверсионную витрину. Решение проблемы канонических ссылок (Productcanonical) обеспечило взрывной рост позиций в Google. Развертывание локализованных версий для рынков Чехии и Словакии позволило заказчику моментально начать международную экспансию.
Развернуть полный вид обновленного сайта европейского интернет-магазина сантехнической фурнитуры
Примечание: текущее состояние и внешний вид действующего сайта могут отличаться от представленных в данном кейсе, так как после завершения проекта заказчик самостоятельно управляет контентом.
FAQ: Вопросы по миграции Joomla 2.5, JoomShopping и AJAX-архитектуре
В чем феноменальная сложность миграции с Joomla 2.5.28 сразу на Joomla 6.1.0?
Между этими версиями лежат четыре поколения архитектуры. В Joomla 2.5 использовался устаревший класс JRequest, глобальная константа DS, старый механизм хэширования паролей (MD5) и драйвер mysql (вместо mysqli или PDO). Прямое обновление невозможно. Нам потребовалось развернуть несколько промежуточных тестовых сред (Joomla 3.10 -> Joomla 4.4 -> Joomla 5.x), последовательно конвертируя базу данных, обновляя структуру таблиц и переписывая хэши паролей пользователей, чтобы финальный дамп бесшовно импортировался в Joomla 6.1.0.
Как технически реализована AJAX-корзина без перезагрузки страницы в JoomShopping 5.9.1?
Стандартный JoomShopping отправляет POST-запрос с перезагрузкой. Мы перехватили событие submit формы добавления в корзину с помощью addEventListener. Скрипт сериализует данные формы (ID товара, количество, выбранные атрибуты) и отправляет их через fetch() к контроллеру cart/add. Контроллер JoomShopping обрабатывает данные и возвращает JSON-ответ со статусом. Наш клиентский скрипт парсит JSON, находит в DOM элемент с ID #jshop_quantity_products и мгновенно обновляет цифру, параллельно вызывая красивое Toast-уведомление, не прерывая сессию пользователя.
Что делает плагин JoomShopping Productcanonical и почему он критически важен для SEO?
В JoomShopping один и тот же товар может находиться в нескольких категориях. В результате генерируются дубли страниц с разными URL (например, /category-1/product и /category-2/product). Поисковики штрафуют за это. Установленный плагин Productcanonical автоматически вычисляет "главную" категорию товара и добавляет в секцию <head> тег rel="canonical". Это указывает боту Google, какой URL считать единственно верным, консолидируя весь ссылочный вес.
Как работает функция Quick View (Быстрый просмотр) с технической точки зрения?
Возле каждого товара выводится иконка "Глаз". К ней привязан атрибут data-link, содержащий URL карточки товара с добавлением системного суффикса ?tmpl=component. При клике JavaScript открывает модальное окно Bootstrap 5 и динамически создает внутри него <iframe> или подгружает HTML через AJAX. Суффикс ?tmpl=component приказывает Joomla отрендерить только "голое" тело карточки товара (без меню, шапки и модулей), обеспечивая мгновенную загрузку интерфейса предпросмотра.
Почему для создания сетки использовались 24 модуля, а не конструкторы страниц (SP Page Builder и т.д.)?
Конструкторы генерируют колоссальный объем избыточного <div>-кода и подключают мегабайты лишних CSS/JS библиотек, что уничтожает оценку Google PageSpeed. Разработка 24 изолированных, строго типизированных нативных модулей Joomla 6 позволила нам контролировать каждый байт выводимого HTML. Эти модули напрямую и максимально быстро обращаются к БД MySQL 8+ через ORM Joomla, обеспечивая загрузку интернет-магазина менее чем за 1 секунду.
Как реализовывалась локализация и масштабирование на домены .cz и .sk?
Мы применили стратегию мультирегионального развертывания (Multi-regional deployment). Вместо использования тяжелых мультиязычных плагинов на одном ядре (которые часто ломают SEO), мы развернули три физически независимые копии портала. Каждому домену (.eu, .cz, .sk) назначена своя база данных и свой языковой пакет. Это позволило менеджерам в Чехии и Словакии независимо управлять ценообразованием в кронах и евро, устанавливать локальные методы доставки и вести независимое SEO-продвижение в национальных поисковиках.
Что представляет собой модуль «Мой офис (Mein Büro)»?
Это персонализированный дашборд (dashboard) для B2B-клиентов. Модуль проверяет сессию (авторизован ли пользователь). Если да, он обращается к таблицам заказов JoomShopping и выводит краткую сводку: количество активных заказов, статус текущей доставки, баланс и ссылку на скачивание инвойсов в PDF. Это радикально повышает удобство работы для оптовых закупщиков.
Как реализована защита GDPR во всплывающем окне политики конфиденциальности?
В странах ЕС действуют жесткие штрафы за сбор данных без согласия (GDPR). Разработанный модуль Pop-up privacy policy блокирует экран модальным окном (Backdrop). При нажатии "Согласен", написанный нами Vanilla JS скрипт записывает хэшированный токен согласия в window.localStorage браузера и устанавливает метку времени (Timestamp) на 365 дней. При повторных визитах скрипт за миллисекунды проверяет хранилище и не тревожит пользователя, при этом все формы на сайте (AcyMailing, SimpleForm2) легально допущены к сбору данных.
В чем преимущество интеграции иконок FontAwesome 6 Free?
Устаревшие шаблоны использовали картинки-спрайты или тяжелые шрифтовые файлы для иконок корзины, лупы, стрелок. В новом шаблоне мы интегрировали SVG-версию FontAwesome 6. Мы подключаем только те векторные контуры, которые реально используются в макете. SVG-иконки весят байты, рендерятся без "замыливания" на 4K-дисплеях и их цвет легко меняется через CSS (свойство fill: currentColor) при наведении курсора.
Как работает модуль «бренды, которым мы доверяем»?
Данный модуль интегрирован с системной таблицей #__jshopping_manufacturers. Он динамически извлекает логотипы производителей сантехнической фурнитуры. На фронтенде данные передаются в легковесную библиотеку инициализации каруселей (Swiper.js). Модуль настроен так, что на мобильных устройствах он показывает 2 логотипа, на планшетах 4, а на ПК — 6, обеспечивая идеальную адаптивность (Responsive Design) без участия программиста при добавлении новых брендов.
Как работает интеграция формы подписки с AcyMailing?
Модуль «Subscription form» вынесен в футер. При вводе email, AJAX-запрос направляется напрямую к API компонента AcyMailing. На стороне сервера происходит валидация синтаксиса адреса и проверка наличия подписчика в базе. Компонент автоматически формирует и отправляет Double Opt-In письмо (подтверждение подписки) на указанный адрес, что является обязательным требованием европейского законодательства против спама.
