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&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&ETURBOS, підтримка сайтів на Laravel максимально проста та швидка.
Так, панель адміністрування дозволяє легко керувати контентом інтернет-магазину — від налаштування полів до створення нових сторінок. Адмінка сайту дозволяє створювати та редагувати сторінки та блоки різними мовами, наприклад, категорії та характеристики товарів.
Окрім того, адміністратор може:
- миттєво додавати країни, компанії та склади;
- керувати валютами та способами доставки й оплати;
- керувати повідомленнями на сайті та сповіщувати менеджерів про важливі події;
- вести базу менеджерів і користувачів, які підписалися на email-розсилку.
Адмін панель Laravel Nova забезпечує не тільки зручне керування контентом, а й гнучке масштабування B2B-платформи відповідно до нових потреб користувачів і ринку автосервісних послуг.
Висновки, або чим чудовий інтернет-магазин на Laravel
Кейс E&ETURBOS демонструє, як сучасна B2B-платформа на Laravel може стати повноцінним інструментом для розвитку бізнесу в міжнародному масштабі. Кожна деталь інтернет-магазину — від зручної навігації до автоматизації B2B-продажів, розроблена з огляду на реальні потреби компаній, які займаються ремонтом турбін.
Урешті нам приємно бачити, як IT-технології допомагають українському бізнесу долати кордони. Відтепер запчастини для турбокомпресорів знаходять своїх клієнтів по всій Європі, а постачальник замість рутинних операцій може зосередитися на розвитку бізнесу та навіть розробці нових продуктів, як-от мобільного застосунку E&ETURBOS:
Комментарии