Главная Кейсы TradeAuto — технически перестроенный интернет-магазин автоаксессуаров на Laravel

Интернет-магазин автоаксессуаров TradeAuto с подбором товаров по автомобилю``

// Ниша: Автоаксессуары, автохимия, инструменты и товары для автомобилей
Услуги: Разработка на Laravel, системные интеграции, SEO-оптимизация, адаптивная вёрстка
3 месяца восстанавливали сайт после года неудачной разработки
17 брендов в ассортименте
2 направления обмена данными между сайтом и 1С
Перестроено
TradeAuto — технически перестроенный интернет-магазин автоаксессуаров на Laravel
Какие задачи решали во время технической перестройки TradeAuto?
После года разработки сайт так и не был готов к запуску

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

Большой каталог требовал сложного подбора по автомобилю

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

Сайт и учётная система должны были работать как единый контур

Товарные данные и остатки нужно было передавать из 1С на сайт, а оформленные заказы — возвращать в учётную систему без ручного дублирования операций.

Новая техническая основа должна была поддерживать привлечение трафика

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

Как перестроили e-commerce-систему TradeAuto?
Перенесли основную логику магазина на Laravel

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

Настроили двусторонний обмен с 1С

Из учётной системы на сайт поступают товары и актуальные остатки, а информация об оформленных заказах передаётся обратно в 1С.

Реализовали многоуровневый подбор товаров по автомобилю

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

Добавили поиск и связанные товарные подборки

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

Собрали административную часть для ежедневной работы магазина

Управление товарами, заказами и связанными данными вынесли в админ-панель, чтобы команда работала с e-commerce-процессами в одной среде.

Заложили техническую основу для SEO и рекламного трафика

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

Интерфейс большого автомагазина с разными сценариями выбора и покупки
Дизайн TradeAuto организует большой ассортимент вокруг разных сценариев подбора — от конкретной группы товаров до совместимости с автомобилем
Главную страницу построили как несколько входов в большой автомобильный каталог

Главную страницу построили как несколько входов в большой автомобильный каталог

  • Подбор автомобиля вынесен перед основными товарными секциями
  • Для щёток стеклоочистителя предусмотрен отдельный подбор по параметрам
  • Категории товаров показаны самостоятельными горизонтальными подборками
  • Новинки и специальные предложения отделены от основного ассортимента

Ассортимент TradeAuto не подчиняется одному способу выбора: для одних товаров важна совместимость с автомобилем, для других — характеристики или товарная категория. Поэтому главная страница не заставляет весь каталог работать по одному сценарию, а разводит разные способы поиска уже на старте.

Большой каталог раскрывается от товарного направления к конкретной подкатегории

  • Основные группы товаров расположены в вертикальном списке
  • Активная категория выделена отдельным состоянием
  • Подкатегории показаны рядом с названиями и изображениями товаров
  • Несколько уровней ассортимента открываются в одном каталожном меню

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

На странице категории подкатегории остаются отдельным уровнем выбора

  • Смежные группы показаны горизонтально над товарной выдачей
  • Текущий раздел зафиксирован в хлебных крошках и заголовке страницы
  • Сортировка вынесена перед основным списком товаров
  • Переключатель вида расположен рядом с сортировкой
Подбор по автомобилю разложили на последовательные зависимые параметры

Подбор по автомобилю разложили на последовательные зависимые параметры

  • Марка задаёт первый уровень совместимости

    После выбора бренда автомобиля пользователь переходит к доступным для него моделям, а не работает со всем каталогом сразу.

  • Модель сужает перечень подходящих вариантов

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

  • Год выпуска уточняет совместимость товара

    Отдельный параметр учитывает различия между поколениями и годами производства одной модели.

  • Результат подбора отделён от обычной навигации каталога

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

Карточка товара объединяет покупку с проверкой характеристик автотовара

Карточка товара объединяет покупку с проверкой характеристик автотовара

  • Фотографии товара занимают отдельную большую зону Основное изображение дополнено галереей, чтобы детали комплекта можно было просмотреть до характеристик.
  • Название и артикул идентифицируют конкретную позицию Полное название содержит тип товара и совместимость с автомобилем, а артикул отделяет нужную модификацию от похожих позиций.
  • Цена и действие покупки вынесены рядом с основной информацией Коммерческий блок остаётся на первом экране карточки, поэтому после проверки товара пользователь сразу переходит к заказу.
  • Условия получения товара показаны до оформления заказа Информация о доставке, оплате и доступных способах получения расположена непосредственно на товарной странице.

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

Мобильную версию перестроили вокруг постоянного доступа к ключевым действиям

Мобильную версию перестроили вокруг постоянного доступа к ключевым действиям

  • Поиск оставили в верхней части экрана

    Поле занимает почти всю ширину, поэтому переход к конкретному товару не требует открывать дополнительное меню.

  • Каталог вынесли в отдельную большую кнопку

    Основной путь к ассортименту отделён от компактного меню и остаётся заметным даже на узком экране.

  • Пять основных разделов закрепили в нижней навигации

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

  • Товарную выдачу сохранили в двухколоночной сетке

    На экране одновременно видно несколько позиций с фотографиями, названиями, ценами и кнопками покупки без перехода к одной карточке в ряд.

Контактную страницу разделили по типу клиента и формату обращения

Контактную страницу разделили по типу клиента и формату обращения

  • Розничные обращения вынесены в отдельный блок Покупателям показаны прямые контакты менеджера, который работает с вопросами заказа, подбора, доставки, оплаты и обмена.
  • Оптовых клиентов распределили между менеджерами по регионам Для каждого менеджера указаны контакты и перечень областей, за которые он отвечает, поэтому B2B-клиент сразу видит нужный канал связи.
  • Мессенджеры разместили непосредственно возле контактов менеджеров Viber, Telegram и WhatsApp доступны рядом с соответствующими контактными карточками без отдельного поиска способа связи.
  • Самовывоз вынесли в отдельную сервисную секцию Адрес, график работы и карта проезда собраны в одном блоке для клиентов, которые забирают заказ самостоятельно.
Общую форму оставили для обращений вне готовых сценариев

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

TradeAuto в цифрах
19+
лет работы бизнеса учитывает новая e-commerce-платформа

TradeAuto работает на рынке автоаксессуаров много лет, поэтому техническая перестройка охватила уже сформированный каталог, клиентские сценарии и операционные процессы.

10 000+
товаров содержит каталог TradeAuto

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

3
параметра формируют подбор товаров по автомобилю

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

2
клиентских направления учтены в сервисной структуре

Для розничных и оптовых покупателей предусмотрены разные контакты и сценарии взаимодействия с командой TradeAuto.

3
действия от поиска нужного товара до заказа

Основной сценарий сократили до трёх последовательных действий: найти подходящий товар, выбрать его и оформить покупку.

3
формата оплаты предусмотрены для заказов

На сайте представлены онлайн-оплата, оплата по реквизитам и наложенный платёж при получении.

// От незавершённого проекта к готовому интернет-магазину для запуска рекламы

К Kliox TradeAuto пришёл после года разработки в другой команде. Интернет-магазин уже имел дизайн и значительную часть функциональности, но до стабильного запуска так и не дошёл. Отдельные сценарии работали с ошибками, часть функций оставалась незавершённой, а клиент уже планировал запускать рекламное продвижение. Продолжать бесконечные точечные доработки не было смысла, поэтому мы взяли проект на этапе, когда нужно было быстро разобраться в чужой реализации, определить критические проблемы и фактически перестроить техническую часть без нового дизайна.

Одной из ключевых проблем было взаимодействие магазина с 1С. Интеграция не обеспечивала нужный обмен данными: возникали проблемы с передачей товаров, остатков и заказов, а часть операций приходилось контролировать вручную. Мы перестроили этот контур как двустороннюю систему: товарные данные и актуальные остатки поступают из 1С на сайт, а оформленные заказы передаются обратно в учётную систему. В результате магазин перестал существовать отдельно от внутреннего учёта компании.

Вторым сложным уровнем стал сам каталог. TradeAuto работает с ассортиментом более 10 000 позиций, причём разные категории требуют разной логики. Часть товаров покупатель ищет по обычным характеристикам, а для автомобильных аксессуаров критична совместимость с конкретной машиной. Поэтому в каталоге объединили несколько механик подбора, а для товаров, зависящих от автомобиля, построили последовательность марка → модель → год выпуска. Отдельно проработали крупнейшую категорию «Колпаки» — для неё используются собственные правила фильтрации, сортировки и рекомендаций.

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

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

Финальной задачей было подготовить магазин к нормальной работе с трафиком. Структуру каталога, категорий, фильтров и страниц перестроили с учётом SEO и рекламных кампаний, чтобы после технического восстановления сайт можно было использовать как полноценный канал продаж. Для Kliox этот кейс стал примером ситуации, когда ценность работы заключалась не в создании интернет-магазина с чистого листа, а в том, чтобы забрать проблемный проект после года незавершённой разработки, разобрать его по системам и довести до стабильного рабочего запуска.

// Решения для автоматизации большого интернет-магазина

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

Модуль резервирует остаток автоматически при оформлении заказа, синхронизирует с 1С и несколькими складами в реальном времени и уведомляет менеджера, когда пора пополнять запасы

Умный поиск по каталогу интернет-магазина

Умный поиск с исправлением ошибок, синонимами, морфологией и автоподсказками — покупатель находит нужный товар за 2–3 секунды вместо блуждания по каталогу

Автогенерация SEO-страниц фильтров каталога

Модуль генерирует уникальные SEO-страницы для приоритетных комбинаций фильтров каталога — «купить красные кроссовки Nike размер 42» становится отдельной страницей, которая ранжируется в поиске

Другие e-commerce-проекты Kliox для каталогов, продаж и автоматизации
Sayvi Studio — e-commerce-платформа на Next.js и Laravel
Sayvi Studio — e-commerce-платформа на Next.js и Laravel
Интернет-магазин объединил историю семейного бренда, продажу авторских книг и творческих наборов и отдельные сценарии работы для Украины и Европы.
Prospera — корпоративный сайт IT-интегратора
Prospera — корпоративный сайт IT-интегратора
Единая точка входа для B2B-клиентов: от знакомства с компетенциями Prospera и выбора решения до консультации и заказа оборудования
Petronas Shop — интернет-магазин масел и автохимии
Petronas Shop — интернет-магазин масел и автохимии
Каталог масел и технических жидкостей, подбор товаров, корзина, оплата, доставка и контентная часть в едином интернет-магазине
Объединили QR-меню, оформление заказов, оплату и кабинеты заведений в одной системе
Объединили QR-меню, оформление заказов, оплату и кабинеты заведений в одной системе
Отдельное кафе или сеть из нескольких заведений управляет меню, ценами и заказами через общую платформу
KIEVMINER — интернет-магазин на WordPress и WooCommerce
KIEVMINER — интернет-магазин на WordPress и WooCommerce
Каталог на 200 товаров, сравнение моделей, оформление заказов, ремонт, прошивки и инструкции в одном сайте
Переработали UX/UI-дизайн и frontend действующего интернет-магазина Kaban
Переработали UX/UI-дизайн и frontend действующего интернет-магазина Kaban
Большой каталог, промоблоки, товарные страницы, корзина и мобильная версия в едином интерфейсе для быстрого выбора и оформления покупки
GOU — интернет-магазин украинского бренда, который выдерживает пиковый трафик из Instagram
GOU — интернет-магазин украинского бренда, который выдерживает пиковый трафик из Instagram
Next.js на фронтенде, Laravel в админ-панели, поиск через Algolia, оплата Monobank и фискализация Checkbox — в одной системе для каталога, акций и заказов
Как мы создали сервис онлайн-записи для List.in.ua
Как мы создали сервис онлайн-записи для List.in.ua
SaaS-платформа для онлайн-записи: календарь, клиентская база, команда, статистика, страница компании и бронирование с мобильного и десктопа
Создание e-commerce платформы для продажи одежды, разработка интернет-магазина студией Kliox
Создание интернет-магазина для онлайн-продажи одежды
UX/UI-дизайн и разработка интернет-магазина одежды с интеграциями каталога, оптимизацией быстродействия и SEO
Создание интернет-магазина одежды Zentaro
Создание интернет-магазина одежды Zentaro
Оптимизировали код и пересобрали онлайн-магазин одежды под философию бренда — от UX-логики каталога до бэкенда на Laravel и фронтенда на Next.js
Создание интернет-магазина климатической и отопительной техники
Создание интернет-магазина климатической и отопительной техники
Обновили дизайн и собрали платформу магазина техники для отопления и климата — от структуры каталога до бэкенда на Laravel и фронтенда на Next.js с интеграцией CRM
Создание сайта для сети частных детских бассейнов
Создание сайта для сети частных детских бассейнов
UX/UI-дизайн и разработка сайта для сети детских бассейнов: онлайн-запись на занятия, личный кабинет и автоматическая обработка заявок
Создание сайта для заказа индивидуальных чехлов
Создание сайта для заказа индивидуальных чехлов
UX/UI-дизайн и разработка сайта с онлайн-конструктором мобильных чехлов: клиент загружает фото, добавляет текст и стикеры и заказывает собственный дизайн без похода в магазин
Создание сайта для премиального автошоурума UMBRA
Создание сайта для премиального автошоурума UMBRA
UX/UI-дизайн и разработка сайта для премиального автошоурума: подбор авто по параметрам, быстрая заявка и автоматическая передача лида в CRM
Создание e-commerce платформы для винного дома Domaine Éternel
Создание e-commerce платформы для винного дома Domaine Éternel
UX/UI-дизайн и разработка e-commerce платформы для винного дома с историей: каталог выдержанных вин, автоматическая обработка заказов и базовая SEO-структура
Создание сайта доставки мясных блюд Дикий жар
Создание сайта доставки мясных блюд Дикий жар
UX/UI-дизайн, разработка, автоматизация заказов и рост ключевых бизнес-показателей.
Создание сайта ювелирного магазина Amelie Jewels
Создание сайта ювелирного магазина Amelie Jewels
UX/UI-дизайн, разработка интернет-магазина, адаптивная верстка, оптимизация быстродействия, базовая SEO-оптимизация
Создание премиального интернет-магазина Bosfor Collection
Создание премиального интернет-магазина Bosfor Collection
UX/UI-дизайн, Разработка интернет-магазина (backend и frontend), Интеграция с составом и CRM
Создание e-commerce платформы для цветочного бизнеса – разработка интернет-магазина студией Kliox
Создание платформ электронной коммерции для цветочного бизнеса
UX/UI-дизайн и разработка интернет-магазина цветов на WooCommerce с интеграциями, оптимизацией быстродействия и SEO
Розробка інтернет-магазину одягу — компанія Kliox
Разработка интернет-магазина одежды под ключ
UX/UI-дизайн, разработка интернет-магазина на WooCommerce, интеграция платежных систем и служб доставки, оптимизация быстродействия, базовая SEO-оптимизация
Підтримка, доопрацювання та інтеграція з 1С сайту від Kliox
Поддержка и доработка сайта детских товаров «BabyKroha»
UX/UI-дизайн и разработка нового интернет-магазина детских товаров вместо устаревшего: интеграция с 1С, оптимизация быстродействия и перенос каталога
Розробка інтернет магазину на woocommerce від - kliox
Разработка интернет-магазина товаров для тяжелой атлетики
UX/UI-дизайн и разработка интернет-магазина спортивного оборудования под ключ: каталог тренажёров и снаряжения, выбор магазина сети на карте, интеграция с 1С
Як ми розробили онлайн магазин диванів - кейс від kliox
Как мы разработали онлайн-магазин продажи диванов
UX/UI-дизайн, разработка интернет-магазина, интеграция с CRM и 1С, автоматизация учета товаров, оптимизация быстродействия
Розробка системи оптимізації замовлень | kliox
Как мы разработали систему оптимизации заказов “Niche”
UX/UI-дизайн, разработка и интеграция системы заказов, автоматизация процессов, аналитика продаж, оптимизация быстродействия
Як ми створили сайт, що автоматизував замовлення та доставку
Разработка сайта «KINAI» для онлайн-заказа и доставки пиццы и роллов
Онлайн-сервис для заказа суши и пиццы: меню с фото, корзина, оформление и контроль статуса в личном кабинете.
Розробка дизайну для сайту суш | kliox
Как мы создали дизайн, усиливающий бренд BANZAI
Целостная визуальная система для доставки суши и роллов, которая одинаково работает на сайте, в упаковке и рекламных материалах.
Технічна підтримка інтернет магазину | kliox
Как мы усовершенствовали и поддерживаем сайт «Kopiyka»
UX/UI-дизайн и разработка интернет-магазина для офлайн-сети: каталог на десятки тысяч товаров, интеграция с 1С и платформа под высокие нагрузки
Як ми збільшили трафік у 10 разів | seo | кейс kliox
Как мы увеличили трафик в 10 раз🚀
Как мы увеличили трафик в 10 раз
Як ми створили новий сайт для Prokrov на wordpress
Как мы создали сайт для “Prokrov”
Landing Page на WordPress и WooCommerce для презентации кровельных материалов, приёма заявок и оформления заказов.
Розробка сайту на WordPress під ключ
Как мы создали новый сайт для “Auto Tuning”
Масштабный e-commerce-проект для большого ассортимента и ежедневной работы магазина Auto Tuning.
Как мы обновили сайт, продающий для “Roofmarket”
Как мы обновили сайт, продающий для “Roofmarket”
WordPress разработка под ключ, SEO-оптимизация, UI/UX-дизайн
Розробка інтернет магазину на woocommerce
Как мы сделали новый сайт для “RealBarrier”
Разработка сайта на WooCommerce, SEO-оптимизация, UI/UX-дизайн
Нужен стабильный интернет-магазин для большого каталога?
Предлагаем решение на Laravel, объединяющее каталог, подбор товаров, интеграцию с 1С, автоматизацию остатков, SEO и рекламу

Некорректный номер телефона

Онлайн расчёт