Інтернет-магазин кліматичного обладнання
Коли лідер ринку кліматичної техніки вирішує створити сучасний інтернет-магазин, результатом стає масштабний проєкт на перетині ритейлу та B2B-сектору. Саме таке рішення створила наша команда для Cooper&Hunter Україна — провідного виробника кліматичного обладнання, який щодня забезпечує комфорт у тисячах домівок і бізнесів у всій країні. Це не просто інтернет-магазин на Laravel з онлайн-каталогом і кнопкою «Купити», а повноцінна платформа для взаємодії виробника, дилерів, монтажників і кінцевих споживачів.
Читайте наш кейс про розробку інтернет-магазину на Laravel, де продумана UX-логіка, зрозуміла структура та приємний інтерфейс поєднуються в єдину екосистему, здатну автоматизувати роботу великої компанії — від продажу до сервісного обслуговування техніки.
Дивіться також:
B2B інтернет-магазин запчастин для турбокомпресорівПро клієнта та проєкт — інтернет-магазин на Laravel
Cooper&Hunter (C&H) — американський бренд кліматичного обладнання, представлений у більш ніж 50 країнах світу, зокрема в Україні. Компанія виробляє побутові та промислові кондиціонери, системи вентиляції, теплові помпи й іншу продукцію.
На українському ринку бренд працює через розгалужену мережу офіційних дилерів і сертифікованих монтажних організацій. Зростання бізнесу та необхідність контролю якості обслуговування привели до потреби в єдиній онлайн-платформі. Замість розрізнених інструментів для продажів, обліку монтажних робіт і сервісного обслуговування компанія вирішила створити інтегровану систему, що об’єднала б усіх учасників процесу. Так, проєкт передбачав створення інтернет-магазину на Laravel з великим каталогом і багаторівневою системою доступу для споживачів, дилерів і монтажників.
Завдання зі створення інтернет-магазину на Laravel
Перед командою Webnauts постало комплексне завдання розробити мультимовний інтернет-магазин на Laravel — з унікальним дизайном, адаптивною версткою та зручним функціоналом для покупців, і не тільки.
Крім каталогу з глибокою структурою, розширеною фільтрацією та детальними картками товарів ми мали реалізувати персональний кабінет для кожної групи користувачів, а саме:
- споживачів — з історією замовлень, відстеженням гарантій, поданням звернень і оцінкою монтажу;
- монтажників — з календарем планових робіт, особистим рейтингом і чатом для звернень;
- дилерів — для контролю заявок, ведення клієнтської бази та створення нарядів у різних регіонах.
Це мав бути приклад сайту на Laravel, де публічна частина поєднується з потужною адмінпанеллю, що дозволяє менеджерам управляти товарами, замовленнями та монтажами, створювати розсилки та координувати комунікацію між усіма користувачами системи.
Дизайн інтернет-магазину й адмінпанелі
UX/UI дизайн публічної частини сайту
Дизайн інтернет-магазину C&H побудований на принципах мінімалізму та функціональності. Біло-синя колірна схема відповідає корпоративному стилю бренду, де акцентний синій використовується для кнопок, активних станів і решти важливих елементів.
Каталог обладнання звертає на себе додаткову увагу за допомогою ховер-анімації. Наведення курсора викликає складне багаторівневе меню та підсвічує його завдяки контрастному затемненню решти інтерфейсу. Такий інтерактивний прийом створює візуальну ієрархію, покращуючи навігацію каталогом і юзабіліті сайту загалом.
Каталог організовано за типами обладнання: побутові та промислові кондиціонери, електричні обігрівачі, системи вентиляції тощо. Сторінку категорії складає сайдбар з фільтрами й основна область з картками та сортуванням обладнання.
Потужна система фільтрації товарів з множинним вибором технічних параметрів реалізована через компактні випадні списки з чекбоксами.
Орієнтуватися на сторінці допомагає зручна навігація з хлібними крихтами, лічильник вибраних товарів і пагінація сторінок.
Товарна сітка складається з карток, які містять фото, заголовки, ціни й іконки з ключовими характеристиками та «вподобайкою» для швидкого додавання моделі до списку бажань.
Кожна сторінка товару містить галерею зображень, детальні характеристики та вкладки з документацією.
Особистий кабінет користувача
Особистий кабінет покупця має класичну структуру з історією замовлень, списком вибраних товарів, повідомленнями та зверненнями.
Розділ «Монтажі» дозволяє керувати сервісним і плановим обслуговуванням обладнання. Тут можна зареєструвати придбану техніку, відстежувати гарантійні терміни, замовити профілактику й оцінити роботу монтажників.
Інтерфейс особистого кабінету дилера розширений розділом «Монтажники», що дає змогу керувати базою фахівців і проєктантів. У розділі «Монтажі» користувач може створювати наряди, відстежувати звернення та контролювати виконання замовлень клієнтів.
Створення наряду реалізовано через покрокову форму з вибором типу робіт, доступного монтажника, адреси об’єкта та даних про обладнання.
Система керування замовленнями в особистому кабінеті монтажника побудована навколо календаря з візуалізацією запланованих робіт. Кожен наряд завершується затвердженням роботи від клієнта за допомогою SMS-повідомлення.
Обліковий запис монтажника — це місце, де зберігаються не лише плановані виїзди, а й будівельні ліцензії. Тут також можна спілкуватися в чаті з клієнтами та відстежувати власний рейтинг за відгуками.
Адміністративна панель інтернет-магазину
Адмінка сайту виглядає як проста таблиця з меню та додатковими функціями. Відображення й експорт, сортування та фільтрація даних, а також вбудований пошук і кнопка «Додати» неабияк спрощують адміністрування та модерацію системи.
Керування контентом інтернет-магазину
Кастомна панель адміністратора дозволяє легко редагувати все, що стосується каталогу — сторінки категорій і товарів, вкладки з технічними характеристиками та властивостями.
Керування каталогом реалізовано через систему вкладок: основні, медіа, властивості, живлення, габарити, специфікація та коди можливих помилок для кожної моделі, причому 4 мовами.
На окрему увагу заслуговує вбудований візуальний конструктор на основі готових блоків, який дозволяє адміністратору самостійно «збирати» секції товарних сторінок — компонувати зображення та додавати тексти різними мовами.
Верифікація та моніторинг даних
Адмінпанель інтернет-магазину забезпечує централізоване управління B2B-екосистемою Cooper&Hunter. Суперадміністратор верифікує дані користувачів, керує правами доступу та відстежує ключові метрики — статуси ліцензій, поточні роботи та нові звернення.
Адміністратор може швидко додавати користувачів через модальне вікно, створювати розсилки для різних цільових груп і керувати даними завдяки функціям фільтрації, сортування та експорту в Excel.
Профіль користувача зберігає всю необхідну для партнерства інформацію: реєстраційні дані проєктантів, історії співпраці з дилерами та рівні сертифікації монтажників.
Верстка сайту інтернет-магазину
Основний стек для створення сайту інтернет-магазину
Клієнтська частина інтернет-магазину побудована на Nuxt 3 — сучасному фреймворку з підтримкою серверного рендерингу (SSR), який впливає на швидкість завантаження каталогу з сотнями товарів, і своєю чергою — на SEO-оптимізацію сайту.
Фреймворк Vue 3 став основою для створення інтерактивного інтерфейсу, а Composition API забезпечив чистоту та спростив підтримку коду.
Для надійності та масштабованості сайту ми застосували TypeScript. Це надмножина JavaScript, що забезпечує статичну типізацію та безпечний рефакторинг коду, мінімізуючи помилки ще під час розробки, а не виконання програми.
Адаптивна верстка та користувацький досвід
Розмітка сторінок виконана мовою HTML5 із дотриманням усіх семантичних стандартів, які забезпечують якісну індексацію та коректне відображення сайту на будь-яких пристроях.
Усі стилі сторінок організовані за допомогою мови CSS і препроцесора SCSS. Модульна структура з окремими файлами для змінних, міксинів і компонентів дозволяє легко підтримувати стиль і в разі потреби кастомізувати дизайн інтерфейсу.
Плагін Vue-screen автоматично відстежує розмір екрана й адаптує інтерфейс інтернет-магазину під поточний пристрій. Так, у мобільній версії сайту меню переміщується вниз, товари перегруповуються у дві колонки, а бічна панель із фільтрами ховається за кнопкою.
До речі, довгі списки численних фільтрів оснащені кастомними скролбарами. Реалізовані за допомогою плагіна Simplebar-vue, вони повністю відповідають фірмовому дизайну магазину.
Пагінацію каталогу забезпечує бібліотека Vue-awesome-paginate зі зручною навігацією: покрокове гортання через стрілки чи прямий перехід за номером сторінки, що генерується залежно від кількості товарів.
Інтерактивний UI
Компонент Vue-splide реалізує функцію слайдера для зручного гортання зображень і відео в галереї товарної картки.
Так звані «lightbox», або спливні модальні вікна створені за допомогою JavaScript-бібліотеки Fancybox. Користувачі можуть швидко переглядати товари та форми в повноекранному режимі поверх основного контенту сторінки.
Npm-пакет Vue3 dropzone дозволяє користувачам завантажувати зображення та файли через drag-and-drop. У такий спосіб монтажники можуть додавати ліцензії та фотозвіти, а споживачі — чеки та гарантійні талони.
Datepicker на базі Vue3 дозволяє вибирати дати в онлайн-формах, наприклад, під час створення нового об’єкта чи наряду для встановлення/профілактики обладнання.
Завдяки цій бібліотеці також реалізовано календар монтажника, що підтримує вибір діапазону дат і блокує недоступні дні для сервісних виїздів.
Стан програми та збереження даних
За управління станом онлайн-магазину відповідає бібліотека Pinia, яка допомагає централізовано керувати даними — користувачами, замовленнями, фільтрами тощо. Плагін Pinia Persisted State дозволяє зберігати дані між сесіями, наприклад, токени авторизації чи вибрану мову інтерфейсу.
Валідація форм на сайті
Бібліотека VeeValidate забезпечує валідацію всіх форм на сайті з підтримкою мультимовності. Реєстрація користувачів, оформлення замовлення, заявка на монтаж — кожна форма має багаторівневу перевірку даних з миттєвим зворотним зв’язком під час введення.
Для парсингу та перевірки телефонних номерів у різних форматах використовується бібліотека libphonenumber-js.
Мультимовність інтернет-магазину
Мультимовність інтернет-магазину реалізована через офіційний плагін Vue I18n. Система автоматично визначає мову браузера й адаптує користувальницький інтерфейс під українську чи англійську локаль.
Комунікація та API
Коли користувач додає товар у кошик або ж оформлює замовлення, сайт інтернет-магазину надсилає цю інформацію на сервер і отримує миттєву відповідь. Це можливо завдяки кастомному хуку useFetch, який окрім обміну даними захищає персональну інформацію користувачів, обробляє помилки мережі та показує індикатори завантаження. SSR-сумісність інструменту забезпечує правильну індексацію сторінок у пошукових системах.
Миттєве оновлення інформації без перезавантаження сторінки можливе завдяки технології WebSocket. Вона дозволяє обмінюватися повідомленнями з клієнтами та монтажниками через чат інтернет-магазину. Система також використовує WebSocket для оновлення статусів замовлень і монтажів у реальному часі.
Якість коду та стандарти
Перед запуском інтернет-магазину код пройшов автоматичну перевірку через ESLint — інструмент, який гарантує нульову толерантність до синтаксичних помилок, відсутність вразливостей безпеки та дотримання єдиного стилю коду.
У поєднанні з інструментом автоматичного форматування коду Prettier ми привели проєкт до єдиного стандарту, що дозволяє легко розширювати функціонал інтернет-магазину в майбутньому.
Розробка інтерфейсу адмінпанелі
Архітектура адміністративного інтерфейсу
Адмінпанель інтернет-магазину Cooper&Hunter теж побудована на базі фреймворку Nuxt 3, але тепер у режимі SPA (single page application). Така архітектура оптимальна для закритого інтерфейсу, де швидкість роботи важливіша за SEO-оптимізацію. Панель працює як односторінковий застосунок з миттєвими переходами між розділами без перезавантаження браузера, а Vue 3 з Composition API забезпечує модульну структуру компонентів — з таблицями товарів, формами редагування, модальними вікнами тощо.
Управління станом і збереження даних
Pinia виступає центральним сховищем для всіх даних адмінпанелі — користувачів, налаштувань, прав доступу тощо. Плагін Pinia Persisted State і тут зберігає дані між сесіями, наприклад, токени авторизації адміністраторів або вибрані фільтри таблиць.
Робота з даними та файлами
Vuefinder реалізує повноцінний файловий менеджер адмінки з drag-and-drop інтерфейсом. Адміністратори використовують його для масового завантаження CSV-файлів з характеристиками товарів.
Бібліотека SheetJS використана в проєкті для взаємодії з Excel-таблицями в обох напрямках. Імпорт даних дозволяє оновити каталог з сотнями товарів за секунди, тоді як експорт — вивантажити звіти з продажів або монтажів у зручному форматі.
Сповіщення в реальному часі
Бібліотека Socket.IO забезпечує двосторонній зв’язок між клієнтом і сервером у реальному часі. Адміністратори бачать сповіщення про важливі події й оновлення без перезавантаження сторінки — нові замовлення, реєстрації монтажників або зміни статусів.
Візуальні компоненти та стилізація
Бібліотека Floating UI керує всіма спливними елементами — підказками, контекстними меню, модальними вікнами та випадними списками.
Зручну пагінацію таблиць з великим обсягом даних забезпечує бібліотека Vue Awesome Paginate за допомогою нумерації та навігаційних кнопок.
Застосувати фірмові кольори в дизайні інтерфейсу через color picker допомогла npm-бібліотека Vue-color-kit.
Бібліотека simplebar-vue створює кастомні скролбари відповідно до дизайну, а модуль nuxt-icon забезпечує єдину систему іконок, оптимізовану для Nuxt.
Препроцесор SASS (SCSS) організує стилі в модульну систему зі змінними (кольори, відступи, шрифти) та міксинами, що дозволяє швидко адаптувати інтерфейс під фірмовий стиль.
Валідація даних у формах
Бібліотека VeeValidate у зв’язці з конструктором схем Yup створює потужну систему валідації даних. Email-адреси, телефонні номери та паролі перевіряються автоматично під час спроби входу в адмінку.
Компонент Vue datepicker з підтримкою локалізації дозволяє вибрати дати для планування монтажів, визначення періоду співпраці та терміну дії сертифікатів.
Мультимовність адмінпанелі
Модуль @nuxtjs/i18n забезпечує повну локалізацію адміністративного інтерфейсу й інтегрується з уже згаданим плагіном Vue I18n. Менеджери можуть легко перемикатися між українською й англійською версіями та редагувати переклади ще двома мовами.
Робота з серверними запитами
Для спрощення роботи з API ми створили кастомну обгортку useFetch над стандартним Nuxt. Вона автоматично обробляє авторизацію, серверні помилки та клієнтські запити.
Бібліотека QS виконує серіалізацію та парсинг складних параметрів URL-запитів. Наприклад, коли адміністратор фільтрує товари за десятками характеристик одночасно, система коректно форматує всі дані для API та розбирає відповіді сервера для відображення в інтерфейсі.
Інструменти автоматизації та контролю якості розробки
Статичну типізацію коду адмінки в комбінації з плагіном @typescript-eslint забезпечує TypeScript, а єдиний стиль підтримують ESLint і Prettier. Stylelint з конфігураціями Standard SCSS і Recess Order забезпечує правильну структуру стилів ще на етапі написання проєкту.
Також адмінпанель використовує набір перевірених бібліотек, які автоматизують рутинні операції:
- Lodash надає готові функції для роботи з даними (масивами, об’єктами та рядками): сортування таблиць, фільтрація списків і пошук товарів працюють швидко через оптимізовані алгоритми.
- @vueuse/core та @vueuse/nuxt надають готові функції для типових задач програмування: відстеження розміру екрана, робота з локальним сховищем і керування клавіатурними скорочуваннями.
Для швидкої розробки та моніторингу продуктивності ми додатково застосували:
- @nuxt/devtools — панель відладки Nuxt-застосунку в реальному часі: з інспекцією компонентів, аналізом продуктивності та моніторингом API-запитів.
- @nuxt/image — модуль для автоматичної оптимізації зображень, який генерує адаптивні розміри під різні пристрої, конвертує в формати WebP/AVIF і застосовує lazy-loading у міру скролінгу сторінки.
- PostCSS — інструмент, який обробляє CSS через плагіни для кросбраузерності (Autoprefixer), мінімізації (cssnano) та очищення (PurgeCSS) коду від невикористаних стилів.
- Yarn 4 — менеджер пакетів з Plug’n’Play для стабільної збірки та швидкого встановлення залежностей у великих JavaScript-проєктах, як от онлайн-магазин Cooper&Hunter.
Бекенд розробка сайту на Laravel
Архітектура системи
Серверна частина побудована на PHP-фреймворку Laravel 10 з використанням PostgreSQL як основної бази даних. Архітектура застосунку розділена на модулі, як от авторизація, адмінка, онлайн-чат, Telegram-бот, push-сповіщення, завантаження файлів, пошук та збереження адрес, а також API для вебу та мобільних.
Платформа Docker забезпечує ізольоване середовище розробки та розгортання програми. Кожен сервіс — вебсервер, база даних і черги завдань — працює в окремому контейнері з налаштованою мережевою взаємодією.
Обробка файлів
Пакет pion/laravel-chunk-upload дозволяє завантажувати багато файлів частинами — фотозвіти в онлайн-чаті, специфікації обладнання чи гарантійні талони в особистому кабінеті користувача. У разі збою з’єднання (наприклад, через нестабільний інтернет), система зберігає вже завантажені файли та дозволяє продовжити процес без втрати прогресу.
Пакет maatwebsite/excel (тепер відомий як Laravel Excel) обробляє Excel-файли для масового імпорту й експорту даних. Адміністратори можуть оновити весь каталог через завантаження таблиці з сотнями товарів або вивантажити звіти з продажів у зручному форматі.
Комунікація в реальному часі
WebSockets на Node.js забезпечують роботу чату між монтажниками та клієнтами. Кожне звернення має окрему кімнату чату з історією повідомлень і можливістю надсилання зображень.
Firebase Cloud Messaging відповідає за push-сповіщення в мобільних додатках. Монтажники отримують повідомлення про нові заявки, клієнти — про зміну статусу замовлення.
Сторонні інтеграції
Український картографічний сервіс Visicom API забезпечує пошук і нормалізацію адрес під час створення нарядів на монтаж, щоб уникнути дублювання записів.
Для створення Telegram-боту ми застосували набір інструментів irazasyed/telegram-bot-sdk, а для сповіщень про нові замовлення та монтажі інтегрували Telegram Bot API. Менеджери магазину можуть отримувати повідомлення й обробляти замовлення прямо в Telegram без необхідності входу в адмінпанель.
Інтеграція з українським сервісом TurboSMS дозволяє надсилати підтвердження на мобільний у разі реєстрації чи зміни статусу замовлення.
Результати створення інтернет-магазину на Laravel
Cooper&Hunter отримав не просто мультимовний інтернет-магазин на Laravel, а повноцінну екосистему для управління бізнесом. Платформа об’єднала понад 500 товарів, тисячі покупців, а також сотні дилерів і монтажників. Серед ключових досягнень проєкту: реалізація особистих кабінетів, онлайн-чат підтримки та кастомна адмінпанель.
Створення адміністративної частини сайту на Laravel дає змогу менеджерам масово імпортувати/експорувати товари, легко керувати контентом через візуальний конструктор сторінок, а також автоматизувати бізнес-процеси — від обробки замовлення до створення наряду на монтаж. Інтеграція сайту з Telegram-ботом додатково спрощує роботу менеджерів онлайн-магазину.
До того ж інтернет-магазин Cooper&Hunter зможе легко адаптуватися під нові вимоги бізнесу. Модульна архітектура на Docker і PostgreSQL повністю готова до розширення функціоналу, зростання каталогу та високих навантажень у майбутньому.
Комментарии