Задача
Заказчику требовался новый корпоративный сайт для презентации компании на внутреннем и международных рынках. Основные требования включали: разработку удобного каталога металлических дверей с индивидуальной подборкой характеристик, современный адаптивный интерфейс, интеграцию простого фильтра товаров без перезагрузки страницы, и возможность масштабирования проекта с добавлением языковых версий без значительной переработки архитектуры.
Подход
Обязательным условием было использование CMS Joomla с платформой Ksenmart для организации каталога и карточек товаров.
Проектирование интерфейса ориентировано на конечного пользователя: упрощённый выбор параметров дверей, мгновенная фильтрация и максимальная визуальная наглядность товара. Техническая вёрстка строго по макетам, с минимальным количеством сторонних библиотек для повышения скорости загрузки.
Что реализовано
CMS и архитектура
Внедрение редакторской системы для управления текстами и изображениями через админ-панель без обращения к коду.
Подготовка архитектуры сайта для последующей реализации многоязычности без переработки структуры.
Анимация и интерфейс
Добавление лёгкой анимации появления блоков при прокрутке для акцентирования внимания без ущерба производительности.
Оптимизация изображений и скриптов для высокой оценки производительности в PageSpeed Insights.
Главное меню
Создание структуры меню на базе Ksenmart, аналогично логике построения меню в Bitrix.
Реализация двойной структуры: основное меню + каталог товаров.
Адаптация для мобильных устройств: горизонтальное меню в десктопной версии преобразуется в нижнее навигационное меню с иконками в мобильной версии.
Конструкции дверей
Специальный блок на главной странице, автоматически подтягивающий данные из каталога товаров.
Возможность пользователя изучить схемы конструкций и сравнить модели без перехода в карточку товара.
Фильтр товаров
Разработка кастомного компонента фильтрации без перезагрузки страницы (AJAX-запросы).
Критерии фильтрации: цена, назначение двери, внешний и внутренний виды отделки.
Карточка товара
Галерея изображений в стилизации под дверной проём.
Динамическая зависимость вариантов внутренней отделки от выбранной внешней отделки.
Выбор рисунка двери с моментальным обновлением предпросмотра.
Интеграция сопутствующих товаров (замков) через мини-каталог внутри карточки.
Блоки конструкций дверей, форм дверей и технических характеристик подключены как самостоятельные информационные блоки.
Интерфейс и макеты проекта
Результат
-
Сайт полностью адаптивен: корректная работа на всех устройствах от 320px до 1920px.
-
Скорость загрузки: 92 балла на десктопах и 87 баллов на мобильных устройствах (по результатам Google PageSpeed).
-
Весь контент редактируем через CMS без вмешательства разработчика.
-
Удобная и быстрая фильтрация каталога без перезагрузки страниц.
-
Подготовленная структура позволяет в будущем запустить дополнительные языковые версии сайта без переделок.
-
Сайт соответствует требованиям SEO (семантическая вёрстка, микроразметка Schema.org, чистый код).
-
Оптимизированный пользовательский опыт: покупатель видит все параметры и комплектацию дверей за минимальное количество действий.
Сайт корректно отображается на всех видах устройств:
монитор компьютера, планшет и телефон
