dropsauto.by

Интернет-магазин автохимии Dropsauto.by

Компания Drops — крупнейший оптовый поставщик автохимии на территории Беларуси.

Изначально проект был задуман как интернет-магазин только для юридических лиц и партнеров компании. Но в процессе переговоров мы предлагали множество IT-решений и идей для реализации, которые понравились клиенту. В итоге мы делали крупнейший в своем сегменте интернет-магазин, который должен был автоматизировать бизнес для B2B сегмента, сформировать их взгляд на продукцию, бренды и собрать заинтересованную аудиторию среди физических. Зацепить их планировали широким ассортиментом, полезными обзорами и бесплатными консультациями на сайте.

Влад
Программист
Проект полностью реализован как SPA, использована связка Laravel + Vue.js + Nuxt.js. Такой выбор был сделан неспроста – за плечами богатый опыт разработки бэкенда на Laravel, а Nuxt.js позволяет получить максимально комфортный опыт при разработке и управлении состоянием фронтенда. До этого у нас было только несколько небольших проектов на Nuxt.js, а хотелось попробовать себя в реализации крупного с использованием этой связки.
Подогревал интерес еще и тот факт, что в Беларуси мы были одними из первых. В итого данное решение полностью оправдало себя как со стороны разработки, так и итогового результата. Все были удовлетворены работой с фреймворком, управлением состоянием, скоростью работы сайта и поисковыми позициями.
SPA – это прекрасный инструмент для реализации потребностей разработчиков и удовлетворения пользователей.
Подробный технический обзор читайте в блоге: https://websecret.by/blog/razrabotka/opyt-razrabotki-spa-na-vuejs-+-nuxt

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

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

Каталог товаров для физических лиц и дилеров компании выглядит по-разному. Первые заинтересованы в следующих моментах:

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

Дилерам важнее:

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

Интеграция с 1С позволяет в реальном времени показывать актуальные остатки и цены.

Для более чем 1000 позиций в каталоге проработаны дерево и иконки.

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

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

  • календарь доставок в регион дилера
  • цена с учетом персональных настроек пользователя
  • актуальные остатки товара
  • аналоги товара
  • товары, которые покупают вместе (причем сразу рассчитывается цена и можно добавить весь комплект в корзину)
  • абсолютно индивидуальное описание каждого товара и его характеристик
  • советы специалиста по применению конкретного товара
  • связанные статьи, видеообзоры

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

Как всегда особое внимание мы уделили прорисовке абсолютно всех состояний и мелких элементов.

Благодаря тому, что сайт построен как SPA, при изменении количества товаров или ассортимента корзина обсчитывает все в реальном времени и мгновенно.
А чтобы повысить средний чек, использовали классический способ cross-sale – прямо в корзине показываем самые популярные товары за последнее время.

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

Для оптовиков реализована довольно сложная логика закупок: в зависимости от места и способа доставки, а также размера оплаты применяются разные алгоритмы расчета стоимости товаров. Например, система выбирает: рассчитывать ли индивидуальную скидку, скидку от объема или другую.

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

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

На момент запуска проекта клиент не планировал осуществлять доставку физическим лицам, т.к. работал только с юридическими.
Он являлся первым и крупнейшим поставщиком автохимии в Беларуси. И все товары были широко представлены на АЗС и в магазинах страны.
Поэтому мы разработали интерактивную карту с розничными точками партнеров, на которой обычный покупатель видел, где можно купить то, что ему необходимо.

Проект получился довольно долгий и непростой. На него ушло более 1100ч в сумме.

Но это того стоило. Клиент остался очень доволен и продолжает сотрудничество и развитие проекта с нами до сих пор.  

Да-да, это именно мы те клиенты, кто хотел и готовил сайт по рецепту:

  • Топовый фреймворк от космолёта Laravel – 1 кг
  • Вёрсточка в стиле Onliner – 400 г
  • Нотки Lamoda – 250 г
  • Это Вы забыли, а мы так хотим – 100 г
  • Random creative – 20 г
  • Всё фигня, надо переделать – 1 черпачок
  • Шаблон из коллекции 10 лучших сайтов всех времён и народ – щепотка
  • Нервы – по вкусу

И это при том, что мы подготовили огромное кол-во вводных ТЗ и документации :) В итоге? Мы благодарим команду Веб Секрет за идеи, опыт, терпение и понимание. Конечно, не без косяков с обеих сторон, но мы довольны результатом и будем продолжать сотрудничество в последующих проектах. Пожалуй, это хорошее начало, и уже сегодня у нас есть масса идей и реальных задач, которые можно реализовать именно с Веб Секрет.

Егор Фарейторов
Руководитель отдела маркетинга
Отзыв от клиента

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

Уверены, что новые веб-инструменты помогут развитию и вашего бизнеса. Свяжитесь с нами, чтобы вместе разработать лучшее решение.