Інтернет-магазин автоаксесуарів TradeAuto з підбором товарів за автомобілем
Послуги: Розробка на Laravel, системні інтеграції, SEO-оптимізація, адаптивна верстка
Інтернет-магазин мав багато технічних помилок і функцій, які працювали некоректно або не працювали взагалі. Замість точкових виправлень перебудували технічну частину на Laravel, зберігши наявний дизайн.
Для частини товарів недостатньо звичайних категорій: сумісність залежить від марки, моделі та року випуску автомобіля. Цю логіку потрібно було врахувати у фільтрах і пошуку.
Товарні дані та залишки потрібно було передавати з 1С на сайт, а оформлені замовлення — повертати в облікову систему без ручного дублювання операцій.
Структуру та сторінки магазину одразу підготували до SEO-просування й рекламних кампаній, щоб технічна перебудова не закінчувалася лише відновленням працездатності сайту.
Каталог, користувацькі сценарії, замовлення та адміністративну частину зібрали на новій технічній основі замість подальшого латання проблемного старого рішення.
Із облікової системи на сайт надходять товари та актуальні залишки, а інформація про оформлені замовлення передається назад у 1С.
Фільтрація враховує марку, модель і рік випуску, тому користувач може звузити каталог до сумісних позицій без ручного перегляду великої кількості товарів.
Пошук працює як окремий шлях до потрібної позиції, а рекомендовані товари продовжують сценарій вибору всередині каталогу.
Керування товарами, замовленнями та пов’язаними даними винесли в адмінпанель, щоб команда працювала з e-commerce-процесами в одному середовищі.
Структуру каталогу й сторінок підготували так, щоб магазин можна було системно просувати в пошуку та використовувати як посадкову платформу для рекламних кампаній.
Головну сторінку побудували як кілька входів у великий автомобільний каталог
- Підбір автомобіля винесений перед основними товарними секціями
- Для щіток склоочисника передбачений окремий підбір за параметрами
- Категорії товарів показані самостійними горизонтальними добірками
- Новинки та спеціальні пропозиції відокремлені від основного асортименту
Асортимент TradeAuto не підпорядковується одному способу вибору: для одних товарів важлива сумісність з автомобілем, для інших — характеристики або товарна категорія. Тому головна сторінка не змушує весь каталог працювати за одним сценарієм, а розводить різні способи пошуку вже на старті.
Великий каталог розкривається від товарного напряму до конкретної підкатегорії
- Основні групи товарів розташовані у вертикальному списку
- Активна категорія виділена окремим станом
- Підкатегорії показані поруч із назвами та зображеннями товарів
- Кілька рівнів асортименту відкриваються в одному каталожному меню
Така структура потрібна для асортименту, де поруч існують автомобільні аксесуари, автохімія, інструменти, дефлектори, ковпаки та десятки інших груп. Користувач спочатку звужує товарний напрям, а вже всередині нього переходить до потрібного типу продукції.
На сторінці категорії підкатегорії залишаються окремим рівнем вибору
- Суміжні групи показані горизонтально над товарною видачею
- Поточний розділ зафіксований у хлібних крихтах і заголовку сторінки
- Сортування винесене перед основним списком товарів
- Перемикач вигляду розташований поруч із сортуванням
Підбір за автомобілем розклали на послідовні залежні параметри
-
Марка задає перший рівень сумісності
Після вибору бренду автомобіля користувач переходить до доступних для нього моделей, а не працює з усім каталогом одразу.
-
Модель звужує перелік відповідних варіантів
Наступне поле залежить від попереднього вибору, тому сценарій рухається від загальної марки до конкретнішої конфігурації автомобіля.
-
Рік випуску уточнює сумісність товару
Окремий параметр враховує відмінності між поколіннями та роками виробництва однієї моделі.
-
Результат підбору відокремлений від звичайної навігації каталогу
Користувач отримує окремий шлях до відповідних позицій без переходу через десятки товарних категорій.
Картка товару поєднує покупку з перевіркою характеристик автотовару
- Фотографії товару займають окрему велику зону Основне зображення доповнене галереєю, щоб деталі комплекту можна було переглянути до характеристик.
- Назва й артикул ідентифікують конкретну позицію Повна назва містить тип товару та сумісність з автомобілем, а артикул відокремлює потрібну модифікацію від схожих позицій.
- Ціна та дія покупки винесені поруч з основною інформацією Комерційний блок залишається на першому екрані картки, тому після перевірки товару користувач одразу переходить до замовлення.
- Умови отримання товару показані до оформлення замовлення Інформація про доставку, оплату та доступні способи отримання розташована безпосередньо на товарній сторінці.
Для автотоварів назви часто містять марку, модель, покоління або роки випуску автомобіля, тому сторінка має одночасно вирішувати дві задачі. Дати достатньо даних для перевірки потрібної позиції та не відсунути саму покупку на другий план. Нижче основного блока користувач може перейти до детальнішої інформації й пов’язаних товарів.
Мобільну версію перебудували навколо постійного доступу до ключових дій
-
Пошук залишили у верхній частині екрана
Поле займає майже всю ширину, тому перехід до конкретного товару не потребує відкривати додаткове меню.
-
Каталог винесли в окрему велику кнопку
Основний шлях до асортименту відокремлений від компактного меню та залишається помітним навіть на вузькому екрані.
-
П’ять основних розділів закріпили в нижній навігації
Головна, каталог, кошик, обране та кабінет доступні під час перегляду довгих товарних і сервісних сторінок.
-
Товарну видачу зберегли у двоколонковій сітці
На екрані одночасно видно кілька позицій з фотографіями, назвами, цінами та кнопками покупки без переходу до однієї картки в ряд.
Контактну сторінку розділили за типом клієнта та форматом звернення
- Роздрібні звернення винесені в окремий блок Покупцям показані прямі контакти менеджера, який працює з питаннями замовлення, підбору, доставки, оплати та обміну.
- Оптових клієнтів розподілили між менеджерами за регіонами Для кожного менеджера вказані контакти та перелік областей, за які він відповідає, тому B2B-клієнт одразу бачить потрібний канал зв’язку.
- Месенджери розмістили безпосередньо біля контактів менеджерів Viber, Telegram і WhatsApp доступні поруч із відповідними контактними картками без окремого пошуку способу зв’язку.
- Самовивіз винесли в окрему сервісну секцію Адреса, графік роботи та карта проїзду зібрані в одному блоці для клієнтів, які забирають замовлення самостійно.
Нижче контактів, регіонального розподілу менеджерів і даних для самовивозу розташована універсальна форма з вибором теми звернення. Так сторінка охоплює різні моделі роботи TradeAuto — роздрібні покупки, оптову співпрацю, дропшипінг і питання щодо отримання замовлень без змішування всіх контактів в один список.
TradeAuto працює на ринку автоаксесуарів багато років, тому технічна перебудова охопила вже сформований каталог, клієнтські сценарії та операційні процеси.
Великий активний асортимент потребував стабільної синхронізації товарних даних і залишків між сайтом та обліковою системою.
Марка, модель і рік випуску послідовно звужують вибір до позицій, що відповідають конкретному автомобілю.
Для роздрібних та оптових покупців передбачені різні контакти й сценарії взаємодії з командою TradeAuto.
Покупці можуть обрати Нову пошту, Укрпошту, точки видачі ROZETKA або безкоштовний самовивіз.
На сайті представлені онлайн-оплата, оплата за реквізитами та післяплата при отриманні.
// Від проблемного магазину до стабільної e-commerce-системи на Laravel
TradeAuto уже мав сформований асортимент, клієнтську базу та звичний для покупців інтерфейс, але технічна частина сайту працювала нестабільно. Частина функцій давала помилки, окремі сценарії не працювали взагалі. Тому завдання не зводилося до виправлення кількох багів. Ми зберегли чинний дизайн, але фактично перебудували e-commerce-логіку на Laravel, щоб магазин отримав нову технічну основу без повного перезапуску візуальної частини.
Ключовим обмеженням став масштаб каталогу. В TradeAuto продаються товари з різною логікою вибору: одні шукають за категорією або характеристиками, інші залежать від конкретного автомобіля. Для таких позицій звичайної рубрикації недостатньо, тому в систему заклали залежність між маркою, моделлю та роком випуску. Це дало змогу працювати з великим асортиментом без перетворення каталогу на суцільний список схожих товарів.
Окремий шар проєкту сформувала автоматизація обліку. Сайт і 1С зв’язали двостороннім обміном. Товарні дані та залишки надходять в інтернет-магазин з облікової системи, а оформлені замовлення передаються назад. Завдяки цьому e-commerce-частина не існує окремо від внутрішніх процесів компанії, а працює в одному інформаційному контурі з обліком.
Навколо каталогу зібрали повний набір робочих сценаріїв великого магазину: пошук, рекомендовані товари, особистий кабінет, обране, кошик, доставка, оплата та окремі контакти для роздрібних і оптових клієнтів. При цьому інтерфейс не перевантажували новою візуальною концепцією — оновлену функціональність вписали в уже знайому користувачам структуру TradeAuto.
Технічну перебудову одразу виконали з урахуванням подальшого залучення трафіку. Структуру каталогу, категорій і сторінок підготували до SEO-просування та рекламних кампаній, щоб нова платформа працювала не лише стабільніше, а й підтримувала маркетингові задачі магазину. Для e-commerce з великим асортиментом це принципово: технічні помилки, некоректні сторінки або нестабільні фільтри безпосередньо обмежують можливості просування.
У результаті TradeAuto отримав технічно перебудований інтернет-магазин на Laravel, який зберіг знайомий дизайн, але вже спирається на нову серверну логіку, автоматизований обмін із 1С та складний підбір товарів за автомобілем. Команда Kliox отримала цінний досвід перетворення проблемного сайту на стабільну e-commerce-систему для інтернет-магазину з великим автомобільним асортиментом.
// Рішення для автоматизації великого інтернет-магазину
Модуль резервує залишок автоматично при оформленні замовлення, синхронізує з 1С і кількома складами в реальному часі та сповіщає менеджера коли пора поповнювати запаси
Розумний пошук з виправленням помилок, синонімами, морфологією і автопідказками — покупець знаходить потрібний товар за 2–3 секунди замість блукання по каталогу
Модуль генерує унікальні SEO-сторінки для пріоритетних комбінацій фільтрів каталогу — «купити червоні кросівки Nike розмір 42» стає окремою сторінкою що ранжується в пошуку
