Интернет-магазин климатического оборудования

Когда лидер рынка климатической техники решает создать современный интернет-магазин, результатом становится масштабный проект на стыке ритейла и B2B-сектора. Именно такое решение создала наша команда для Cooper&Hunter Украина — ведущего производителя климатического оборудования, который ежедневно обеспечивает комфорт в тысячах домов и бизнесов по всей стране. Это не просто интернет-магазин на Laravel с онлайн-каталогом и кнопкой «Купить», а полноценная платформа для взаимодействия производителя, дилеров, монтажников и конечных потребителей.

Читайте наш кейс о разработке интернет-магазина на Laravel, где продуманная UX-логика, понятная структура и приятный интерфейс объединяются в единую экосистему, способную автоматизировать работу крупной компании — от продажи до сервисного обслуживания техники.

О клиенте и проекте — интернет-магазине на Laravel

Cooper&Hunter (C&H) — американский бренд климатического оборудования, представленный в более чем 50 странах мира, в том числе в Украине. Компания производит бытовые и промышленные кондиционеры, системы вентиляции, тепловые насосы и другую продукцию.

На украинском рынке бренд работает через разветвленную сеть официальных дилеров и сертифицированных монтажных организаций. Рост бизнеса и необходимость контроля качества обслуживания привели к потребности в единой онлайн-платформе. Вместо разрозненных инструментов для продаж, учета монтажных работ и сервисного обслуживания компания решила создать интегрированную систему, которая объединила бы всех участников процесса. Так, проект предусматривал создание интернет-магазина на Laravel с крупным каталогом и многоуровневой системой доступа для потребителей, дилеров и монтажников.

Задача по созданию интернет-магазина на Laravel

Перед командой Webnauts стояла комплексная задача разработать мультиязычный интернет-магазин на Laravel — с уникальным дизайном, адаптивной версткой и удобным функционалом для покупателей, и не только.

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

потребителей — с историей заказов, отслеживанием гарантий, подачей обращений и оценкой монтажа;
монтажников — с календарем плановых работ, личным рейтингом и чатом для обращений;
дилеров — для контроля заявок, ведения клиентской базы и создания нарядов в разных регионах.

Это должен был быть пример сайта на Laravel, где публичная часть сочетается с мощной админ-панелью, позволяющей менеджерам управлять товарами, заказами и монтажами, создавать рассылки и координировать коммуникацию между всеми пользователями системы.

Дизайн интернет-магазина и админ-панели

UX/UI дизайн публичной части сайта

Дизайн интернет-магазина C&H построен на принципах минимализма и функциональности. Бело-синяя цветовая схема соответствует корпоративному стилю бренда, где акцентный синий используется для кнопок, активных состояний и других важных элементов.

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

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

Мощная система фильтрации товаров с множественным выбором технических параметров реализована через компактные выпадающие списки с чекбоксами.

Ориентироваться на странице помогает удобная навигация с хлебными крошками, счетчик выбранных товаров и пагинация страниц.

Товарная сетка состоит из карточек, которые содержат фото, заголовки, цены и иконки с ключевыми характеристиками и «лайком» для быстрого добавления модели в список желаний.

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

Личный кабинет пользователя

Личный кабинет покупателя имеет классическую структуру с историей заказов, списком выбранных товаров, сообщениями и обращениями.

Раздел «Монтажи» позволяет управлять сервисным и плановым обслуживанием оборудования. Здесь можно зарегистрировать приобретенную технику, отслеживать гарантийные сроки, заказать профилактику и оценить работу монтажников.

Интерфейс личного кабинета дилера расширен разделом «Монтажники», что позволяет управлять базой специалистов и проектантов. В разделе «Монтажи» пользователь может создавать наряды, отслеживать обращения и контролировать выполнение заказов клиентов.

Создание наряда реализовано через пошаговую форму с выбором типа работ, доступного монтажника, адреса объекта и данных об оборудовании.

/ 05

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

Учетная запись монтажника — это место, где хранятся не только запланированные выезды, но и строительные лицензии. Здесь также можно общаться в чате с клиентами и отслеживать свой рейтинг по отзывам.

Административная панель интернет-магазина

Админка сайта выглядит как простая таблица с меню и дополнительными функциями. Отображение и экспорт, сортировка и фильтрация данных, а также встроенный поиск и кнопка «Добавить» изрядно упрощают администрирование и модерацию системы.

Управление контентом интернет-магазина

Кастомная панель администратора позволяет легко редактировать все, что касается каталога — страницы категорий и товаров, вкладки с техническими характеристиками и свойствами.

Управление каталогом реализовано через систему вкладок: основные, медиа, свойства, питание, габариты, спецификация и коды возможных ошибок для каждой модели, причем на 4 языках.

Отдельного внимания заслуживает встроенный визуальный конструктор на основе готовых блоков, который позволяет администратору самостоятельно «собирать» секции товарных страниц — компоновать изображения и добавлять тексты на разных языках.

/ 03

Верификация и мониторинг данных

Админ-панель интернет-магазина обеспечивает централизованное управление 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 полностью готова к расширению функционала, росту каталога и высоким нагрузкам в будущем.