Hydrophob.ua — сайт-каталог

О проекте

Hydrophob.ua — многостраничный сайт-каталог бренда с отдельной вступительной страницей выбора магазина. Проект представляет направления защиты автомобилей, одежды и обуви, строительных материалов и позволяет перейти от знакомства с продукцией к заказу. Основой интерфейса стала адаптивная вёрстка по PSD-макетам, перенесённая на OpenCart с сохранением собственной структуры страниц.

Что сделано

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

Каталог реализован как общее пространство выбора и просмотра товаров: фасетные фильтры, переключение позиций, галерея с увеличением изображений и товарные отзывы. Ссылка на конкретный товар открывает тот же интерфейс с заранее выбранной позицией. На компьютере стрелки пролистывают миниатюры группами, а мобильные товарные ленты показывают две полные карточки. Состояние кнопок добавления синхронизировано с корзиной.

Вместо пошагового оформления OpenCart создана одна страница заказа. Она собирает контактные данные, способ доставки и оплаты и создаёт заказ в системе. Валидация возвращает ошибки для отдельных полей: интерфейс подсвечивает их и показывает общее сообщение. В админке вопросы и ответы FAQ, а также тексты обзора категорий редактируются через повторяемые поля.

Технические решения

Проект прошёл путь от секционной PHP-структуры с JSON-данными до OpenCart с реальными данными каталога. Для основных страниц используются собственные шаблоны, общие шапка, подвал и мини-корзина; стандартные Bootstrap, jQuery и Font Awesome на этих страницах не загружаются. Отдельная карточка товара делегирует отображение контроллеру каталога, поэтому выбор позиции и её подробный просмотр используют одну реализацию.

Поиск городов и отделений службы Нова пошта работает через публичное API с кешированием ответов. Способы доставки и тарифы задаются в модуле, который охватывает службы Нова пошта, Укрпошта и Meest, курьерскую доставку и самовывоз. Основные товарные изображения подготавливаются в WebP размером 1200 пикселей, а галерея и увеличенный просмотр — 1600 пикселей.

SEO и производительность

Для украинской и русской версий настроены языковые адреса, hreflang и перенаправления со старых языковых параметров. Добавлены читаемые адреса поиска, Open Graph, метаданные Twitter, структурированные данные Organization и WebSite, а также FAQPage в блоке вопросов. Шаблоны SEO-метаданных и общий режим индексации доступны в админке; страница 404 имеет noindex.

Видео загружаются только после появления соответствующего блока в области просмотра через IntersectionObserver. Видеоотзывы сжаты и подготовлены с faststart для начала воспроизведения без загрузки всего файла. Для ряда крупных фотографий созданы отдельные мобильные кадрирования WebP. Адаптив дополнен увеличенными областями нажатия и отдельной компоновкой кабинета на телефоне.

Результат — сайт на OpenCart с собственным сценарием просмотра каталога, информационными разделами и оформлением заказов. Визуальная подача с видео и крупными товарными фотографиями объединена с управляемым контентом и функциями магазина.