«Сафари» — магазин автомобильных запчастей для иномарок из города Кемерово. Работает на рынке Западной Сибири больше 15 лет. Клиент обратился к нам с задачей — создать сайт-каталог, на котором можно выбрать и заказать запчасти под конкретную модель авто.
Исходные данные
У компании «Сафари» была своя CRM-система, которую написал штатный программист, а теперь поддерживает и развивает, но она не была подключена к фронтенду. Когда появилась потребность в создании сайта, который работал бы в связке с их CRM, он обратился к нам, так как перед этим мы успели поработать над другим совместным проектом.
Сфера продажи автомобильных запчастей довольно специфическая, поэтому и CRM получилась соответствующая. У товаров прописываются все характеристики: марка, модель, год выпуска и двигатель. Деталь можно выбрать, только если указать все эти параметры. По ним же менеджеры «Сафари» подбирают то, что точно подойдет покупателю. Этот функционал необходимо было отразить на сайте.
![](/uploads/ckeditor/pictures/1651/content_safari1.jpg)
![](/uploads/ckeditor/pictures/1654/content_safari-selection.jpg)
![](/uploads/ckeditor/pictures/1655/content_safari-selection2.jpg)
![](/uploads/ckeditor/pictures/1653/content_safari-order.jpg)
Особенности
Сайт предстояло сделать без бэкенда — его роль играла CRM, которую клиент вел много лет. Заказчику нужен был сайт на React, который работал бы с его CRM напрямую, без прослоек, чтобы все внесенные в базу данных изменения сразу отражались на сайте. С таким мы столкнулись впервые, но все прошло гладко.
Двухсторонняя работа
Мы разработали полноценный прототип, написали протокол API-обмена и сделали дизайн. Затем приступили к двусторонней работе над проектом. Клиент писал API в своей системе с учетом нашей разработки, а мы — в своей, чтобы забирать данные. Потом мы несколько месяцев «сращивались», вплоть до того, какие фильтры в каком разделе выводить — это определяется на стороне клиента.
Сторонняя система для поиска деталей
На сайте, фактически, работает два каталога: в одном представлены товары, которые зависят от характеристик авто (двигатели, фильтры и пр.), а в другом — универсальные товары вроде автокосметики и масел. К сайту подключен сторонний сервис, с помощью которого можно узнать заводской номер нужной детали — система сама находит ее в каталоге производителя.
Упрощение работы поискового запроса
Магазин регулярно привозит несколько тысяч самых популярных запчастей. Менеджеры заносят в БД всю необходимую для поиска информацию. Если деталь подходит для нескольких автомобилей, это тоже прописывается.
Обычно покупатели ищут запчасти не для конкретного автомобиля, а в целом для всех машин. В результате по поисковому запросу они получают несколько ненужных вариантов, что усложняет выбор.
На сайте «Сафари» можно ввести VIN-номер автомобиля, сторонний сервис проанализирует свою базу данных и выдаст каталог запчастей с номерами нужных деталей. По полученному номеру на сайте можно узнать, есть ли такая деталь в наличии, а если ее нет, то заказать.
На сайте можно зарегистрироваться и указать в личном кабинете свой автомобиль или несколько автомобилей, чтобы в поисковой выдаче появлялись только подходящие запчасти.
Итог
Описанная механика обычно внедряется на маркетплейсах автозапчастей вроде Emex или Exist, и мы постарались ее повторить. Только в нашем случае запчасти подбираются не из множества магазинов, а из одного.
На этот проект у нас ушло примерно полгода, не считая перерывов, когда свою часть работы выполнял специалист со стороны клиента. Впервые мы написали сайт без бэкенда, так что нам не приходилось ничего хранить у себя, все сразу отправлялось в базу данных заказчика.
Другие кейсы
![](https://makeagency.ru/uploads/case_item/preview_image/71/big_%C3%90_%C3%90_%C3%90_%C3%90_%C3%90_%C3%90_%C3%90_%C3%90_%C3%91_%C3%90%C2%B5%C3%90_%C3%90_%C3%91_%C3%90__%C3%90_%C3%90__%C3%90_%C3%91_%C3%90_%C3%90_%C3%90_%C3%90__%C3%91_%C3%90%C2%B5%C3%90_%C3%91_%C3%90_%C3%90%C2%BA.png)
![](https://makeagency.ru/uploads/case_item/preview_image/82/big_niitp.jpg)
![](https://makeagency.ru/uploads/case_item/preview_image/4/big_countrysport.jpg)
![](https://makeagency.ru/uploads/case_item/preview_image/57/big_Case-preview.jpg)