B2B интернет-магазин запчастей для турбокомпрессоров
Современный рынок автосервиса требует от поставщиков оперативности и эффективности. Поэтому компания «Агромаркет» решила оптимизировать B2B продажи запчастей для турбокомпрессоров с помощью современной онлайн-платформы. Точнее сказать, двух интернет-магазинов, чтобы учесть специфику украинского и европейского рынков, где работает «Агромаркет». Онлайн-магазины B2B должны были отвечать не только бизнес-потребностям, но и региональным, языковым и другим особенностям каждого региона. Laravel и другие современные фреймворки стали надёжным фундаментом для воплощения амбициозного проекта с тройным «мульти» — мультирегионального, мультиязычного и мультивалютного B2B интернет-магазина с интеграциями сторонних систем и сервисов.
О компании и техническом задании для сайта
Харьковская компания «Агромаркет» является официальным дистрибьютором китайского производителя E&E TURBO и обеспечивает оптовую поставку турбокомпрессоров и запчастей к ним. Для компаний, занимающихся ремонтом автомобильной техники, важна не только качественная продукция, но и высокий уровень сервиса. Поэтому с расширением географии на рынки Польши и других европейских стран «Агромаркет» почувствовал потребность в эффективном решении для удобного обслуживания B2B-клиентов и бесперебойного снабжения компонентов.
Итак, перед компанией Webnauts встала задача разработать современные интернет-магазины, ориентированные на украинский и европейский бизнес, которые бы имели:
- личные профили клиента и менеджера;
- структурированный каталог с быстрым поиском и фильтрацией;
- удобные товарные карточки с функцией «Сообщить о наличии»;
- товарную корзину с возможностью редактирования содержимого;
- быстрое оформление заказа с функцией сохранения данных клиента.
Масштаб проекта поражал: две отдельных B2B площадки с собственными доменами, языками и валютами, нуждались в интеграции со службами доставки и системой складского учёта ShopStore для отслеживания имеющихся товаров в реальном времени.
Дизайн интернет-магазина для B2B-сегмента
Имея чёткое видение функционала, мы разработали практичный дизайн, сочетающий в себе гротескный шрифт Montserrat, чёткие минималистические изображения и приятные читабельные таблицы. Синий акцентный цвет выделяет ключевые элементы интерфейса — кнопки, цены и шапки таблиц, а сдержанная микроанимация при наведении курсора фокусирует внимание пользователя на самом главном.
Структура интернет-магазина
Навигационное меню
Компактное мега-меню сайта E&ETURBOS имеет горизонтальное расположение в хедере и обеспечивает быстрый доступ к главным разделам:
- Каталог — развёрнутый список кликабельных категорий товаров.
- Новинки — мгновенный фильтр новых поступлений в один клик.
- Поиск — поле, позволяющее быстро найти товар по №ТКР или названию детали.
- Профиль — удобный доступ к разделам личного кабинета пользователя.
- О компании — переход к подробной информации о поставщике.
- Языки — выбор отображения сайта на украинском, английском, польском, немецком, французском или испанском.
- Корзина — быстрый переход к странице заказа.
Навигационное меню авторизованного пользователя предусматривает дополнительный пункт:
- Валюты — отражение цен в гривнах и долларах для украинского рынка, и злотых и евро — для европейского.
Каждая внутренняя страница сайта (каталога, категории либо товара) содержит вверху так называемые «хлебные крошки» — навигационные цепочки из текстовых ссылок, позволяющие отслеживать путь и текущее расположение посетителя сайта. Они улучшают не только навигацию пользователя, но и индексацию страниц интернет-магазина. Это способствует поисковой оптимизации сайта и повышает его видимость и рейтинг в выдаче Google.
Листая каждую страницу, внизу появляется ещё один навигационный помощник — кнопка «Вверх», мгновенно возвращающая пользователя на первый экран.
О компании
Раздел интернет-магазина, посвященный бренду E&ETURBOS, содержит несколько ключевых страниц:
- О нас — идеально структурированное описание деятельности и истории компании.
- Контакты — способы связи с главным офисом компании и карта товарных складов интернет-магазина.
- Коммерческое предложение — преимущества сотрудничества с компанией и выгоды для потенциальных клиентов.
- Правила сотрудничества — подробные условия и принципы взаимовыгодного партнёрства с E&ETURBOS.
Грамотно структурированная и хорошо визуализированная информация о бренде способствует доверию B2B-клиентов и помогает быстро оценить потенциал сотрудничества с интернет-магазином. А форма обратной связи в конце каждой страницы сайта позволяет пользователям оперативно сконтактировать с компанией на любом этапе знакомства с брендом.
Каталог продукции
Товарный каталог представляет собой плитку категорий на главной странице B2B-магазина, который обеспечивает мгновенный доступ клиентов к широкому ассортименту E&ETURBOS — от мельчайших запчастей до готовых турбокомпрессоров.
Страница категории доступна в двух режимах просмотра — списка и плитки товарных карточек, которые содержат название, фото, цену, складские остатки, степпер для выбора количества желаемого товара и кнопок «Добавить в корзину» либо «Сообщить о наличии».
Кроме того, страница категории оснащена полезными функциями поиска, фильтрации и навигации, таких как:
- поле ввода товара по №ТКР или названию детали,
- общее и доступное количество товарных позиций в категории,
- переключатель для мгновенного отображения имеющейся на складе продукции,
- прямая пагинация страниц с выбором количества отображаемых товаров.
Страница товара. Вся ключевая информация о товаре удобно вместилась на одном экране: компактная фотогалерея дополняется подробным описанием запчасти – названием, ценой, категорией, характеристиками, а также актуальными остатками на складах и возможностью добавить нужное количество единиц в корзину с автоматическим расчётом итоговой суммы.
Ниже видим список кликабельных компонентом запчасти, каждый из которых сопровождается названием, фото, ценой, кодом производителя, количеством товарных позиций на складе и кнопками «Добавить в корзину» либо «Сообщить о наличии». Прокрутив страницу вниз, пользователь может увидеть нескучную таблицу совместимости запчасти с разными моделями турбин, авто и т. п.
Check out страница
Процесс оформления заказа в E&ETURBOS максимально понятен: вместо утомительной формы в несколько этапов – единственная страница, сочетающая в себе простоту и функциональность. Она состоит из двух ключевых частей:
- содержимого заказа — списка товаров с количеством и ценой, в том числе итоговой;
- формы заказа, которая подтягивает персональные данные заказчика и приоритетный склад для быстрой доставки благодаря предварительной регистрации на сайте. Всё, что следует сделать, так это выбрать вариант оплаты и заполнить данные получателя посылки.
Ускорить процесс оформления заказов в будущем помогает функция сохранения данных получателя в качестве шаблона.
Примечание. Именно так видит интернет-магазин авторизованный пользователь. Для посетителей, которые не прошли авторизацию, E&ETURBOS, по сути, остаётся сайтом-каталогом. Чтобы получить полный доступ к актуальным ценам и преимуществам личного кабинета, пользователю необходимо пройти несложную регистрацию:
Личный кабинет пользователя
Профиль клиента
Клиентский кабинет интернет-магазина E&ETURBOS имеет 4 основных раздела:
- История заказов в виде раскрывающегося списка с резюме, статусами, ТТН или т. п.
- Настройка реквизитов компании и получателей, приоритетных складов и пароля для входа.
- Рассылка с сообщениями о скидках и акционных предложениях.
- Сообщить о наличии — раздел для отслеживания нужных товаров, появившихся на складе.
Почти каждая колонка разделов-таблиц имеет функции фильтрации либо сортировки данных, а удобный поиск позволяет быстро найти заказ по номеру либо ТТН. Навигационное меню кабинета клиента дополняется переключателем валют, информационными уведомлениями и состоянием счёта.
Профиль менеджера
Для эффективного администрирования интернет-магазина личный кабинет менеджера E&ETURBOS дополняется 5 разделами:
- Компании и Клиенты — раскрывающиеся списки B2B-клиентов, содержащие не только контакты, но и данные о статусах, финансах и закреплённых менеджерах.
- Менеджеры и Руководители склада — таблицы с информацией о менеджерах и руководителях складов интернет-магазина.
- Сообщения — раздел для обработки обращений пользователей, получаемых через форму обратной связи на сайте.
Профиль менеджера позволяет легко добавить новую компанию и быстро найти нужный заказ.
Вёрстка интернет-магазина запчастей E&E TURBO
Для воплощения дизайна в онлайн-магазин E&ETURBOS мы выбрали надёжную технологическую основу — JavaScript-фреймворк Vue.js и его проверенные инструменты:
- Nuxt 3 — фреймворк для создания программ на Vue.js.
- Pinia — библиотека для удобного хранения и обмена данными, и создания HTTP-запросов.
- qs — библиотека для удобного парсинга и формирование URL-запросов со сложными параметрами.
- quill — мощный WYSIWYG-редактор для форматирования текста
- vue-in-viewport-mixin — библиотека для реализации нескончаемого скролла и отслеживания видимых частей интерфейса.
- vue3-lottie — библиотека для анимации загрузки сайта, или прелоадера.
- vuejs-paginate-next — компонент для реализации постраничной навигации и пагинации контента.
- @vuepic/vue-datepicker — компонент для удобного выбора даты на сайте.
- @splidejs/vue-splide — компонент для реализации слайдеров для демонстрации изображений.
Данные технологии позволили нам создать удобный и эффективный интерфейс, который обеспечивает приятный пользовательский опыт благодаря интуитивной навигации, плавным анимациям и быстродействию B2B-платформы E&ETURBOS. Адаптивная вёрстка интернет-магазина обеспечивает корректное отображение и удобство использования сайта независимо от размера экрана, будь то компьютерные мониторы либо мобильные устройства.
Интернет-магазин на Laravel, а точнее два
B2B сайты для оптовой продажи запчастей в Украине и Европе нуждались в масштабируемом и эффективном решении. Поэтому для реализации серверной части онлайн-магазинов мы выбрали Laravel 10 — гибкий PHP-фреймворк с надёжной архитектурой, которая будет расти вместе с E&ETURBOS.
Читайте также:
Разработка интернет-магазина и e-commerce сайтов на LaravelМультирегиональность
Интернет-магазины E&ETURBOS расположены в национальных доменах регионов, где они работают: .ua в Украине и .eu — в Европейском Союзе.
Технически B2B сайты делят один сервер, однако каждый имеет свою базу данных, управляемую с помощью системы PostgreSQL.
Обрабатывать огромные объёмы данных и выполнять длительные вычисления в фоновом режиме, такие как экспорт/импорт товаров или расчёт цен и скидок, позволяет JS-технология Web Worker.
Планировать выполнение заданий на сервере в автоматическом режиме помогает встроенная функция Cron, в частности, ежедневно очищать логи и историю поиска, парсить Google-таблицы, рассылать email-листы клиентам, импортировать данные из системы складского учёта и службы доставки товаров.
Автоматизировать наполнение сайтов новыми товарами помогла PHP-библиотека maatwebsite/excel, а ускорить разработку, упростить тестирование и развёртывание программ — технология контейнеризации Docker.
Системная интеграция сайта
Синхронизация интернет-магазина с привычными системами и другими посторонними сервисами позволила автоматизировать рутинные задачи и оптимизировать рабочие процессы компании «Агромаркет». Благодаря Laravel реализованные интеграции могут дополняться новыми способами доставки и оплаты по мере развития бизнеса без ущерба для производительности сайтов.
Интеграция сайта с системой складского учёта
Актуальность цен и наличие товаров критически важны для B2B-клиентов онлайн-магазина запчастей. Чтобы удовлетворить потребности бизнеса и оптимизировать работу менеджеров, мы интегрировали сайт с системой складского учёта ShopStore. Двухсторонний обмен данными обеспечивает автоматическое обновление ассортимента запчастей интернет-магазина в реальном времени.
Интеграция со службой доставки
Доставка товаров E&ETURBOS осуществляется через сеть отделений Новой Почты. При оформлении заказа клиенты могут легко выбрать нужное отделение доставки из списка благодаря интеграции сайта с API Новой Почты.
Интеграция с сервисами Google
Благодаря интеграции сайта с Google-сервисами мы обеспечили парсинг и загрузку товаров на сайт через Google Sheets API и добавили геолокацию главного офиса компании через Google Maps API.
Интеграция с мессенджером Telegram
Для более удобного взаимодействия клиентов и менеджеров мы интегрировали B2B-сайты E&ETURBOS з Telegram-ботом. Чтобы сообщения о заказах поступали в любимый мессенджер, мы использовали PHP-библиотеку irazasyed/telegram-bot-sdk и подключили сайт через Telegram Bot API.
Мультиязычность и мультивалютность
Локализация B2B-магазинов E&ETURBOS не ограничивается региональными доменами. С помощью пакета spatie/laravel-translatable мы адаптировали контент интернет-магазинов к потребностям пользователей из разных стран. Так, украинский онлайн-магазин стал доступен пользователям на соловьином и английском языках, а европейский — ещё на четырёх: польском, немецком, французском и испанском.
Благодаря настройке мультивалютности интернет-магазин E&ETURBOS стал для B2B-клиентов ещё более доступным. Онлайн-магазин в Украине можно просматривать в гривнах и долларах, а в Европе – в евро, долларах и злотых. Благодаря синхронизации сайта с системой складского учёта ShopStore цены в интернет-магазине всегда соответствуют актуальным курсам валют.
Админ панель интернет-магазина
Интернет-магазин на Laravel отличается не только гибкостью разработки, но и неслыханным удобством администрирования. Благодаря библиотеке Laravel Nova, положенной в основу E&E TURBOS, поддержка сайтов на Laravel максимально простая и быстрая.
Так, панель администрирования позволяет легко управлять контентом интернет-магазина — от настройки полей до создания новых страниц. Админка сайта позволяет создавать и редактировать страницы и блоки на разных языках, например категории и характеристики товаров.
Кроме того, администратор может:
- мгновенно добавлять страны, компании и склады;
- управлять валютами и способами доставки и оплаты;
- управлять сообщениями на сайте и извещать менеджеров о важных событиях;
- вести базу менеджеров и пользователей, подписавшихся на email-рассылку.
Админ панель Laravel Nova обеспечивает не только удобное управление контентом, но и гибкое масштабирование B2B-платформы в соответствии с новыми потребностями пользователей и рынка автосервисных услуг.
Выводы, или чем хорош интернет-магазин на Laravel
Кейс E&ETURBOS демонстрирует, как современная B2B-платформа на Laravel может стать полноценным инструментом для развития бизнеса в международном масштабе. Каждая деталь интернет-магазина — от удобной навигации до автоматизации B2B-продаж, разработана с учётом реальных потребностей компаний, которые занимаются ремонтом турбин.
И, наконец, нам приятно видеть, как IT-технологии помогают украинскому бизнесу преодолевать границы. Теперь запчасти для турбокомпрессоров находят своих клиентов по всей Европе, а поставщик вместо рутинных операций может сосредоточиться на развитии бизнеса и даже разработке новых продуктов, к примеру мобильном приложении E&ETURBOS:
Комментарии