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 із власним сценарієм перегляду каталогу, інформаційними розділами й оформленням замовлень. Візуальна подача з відео та великими товарними фотографіями поєднана з керованим контентом і функціями магазину.