B2B-сайт Darsy Box

клиент

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

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

задача

Разработать B2B-сайт Darsy Box по готовому дизайну и перенести сложную визуальную концепцию в работающий digital-продукт.

Проект объединял большой товарный каталог, анимацию, интерактивные элементы и интеграцию с 1С. При этом сайт должен был оставаться быстрым и стабильным даже в высокий сезон, когда нагрузка на каталог и количество обращений кратно растут.

Перед нами стояло несколько ключевых задач:

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

скрипт-парсер для 1C

Каталог — это сердце оптовых продаж. Чтобы покупатель быстро находил нужные товары, на сайте должен работать умный фильтр. Но база 1С клиента отдавала данные специфично: все характеристики товаров (состав, материал, особенности брендирования) валились сплошным текстом в одно общее поле «Реквизиты», а не в отдельные свойства. 

Если выводить эту строку в каталог как есть, фильтров для товаров вообще не будет. Клиентам придется листать каталог до конца и отвлекаться на то, что им вообще не подходит.  

Можно было заставить контент-менеджера вручную открывать тысячи товаров и раскидывать свойства по правильным ячейкам. Но мы против жестокого обращения с людьми, поэтому написали специальный скрипт-парсер. Теперь когда из 1С прилетает то самое текстовое полотно, наш алгоритм разбивает его по точкам с запятой и сам аккуратно распределяет значения по свойствам в Битриксе. 

Клиент работает в своей 1С как привык, а на сайте работает идеальная фильтрация.

кастомный фильтр

Бывало ли у вас такое, что вы долго настраиваете фильтры, чтобы быстро найти товар, но ни одного такого товара нет? Так вот это — худшее для любого ecom-проекта.

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

интерактивные подсказки

Корпоративные подарки состоят из множества мелочей: блокнотов, кружек, ручек и сладостей. Если перечислять их сухим списком под фото — магия подарка моментально исчезнет. Наш клиент это понимал и предложил сделать интерактивные подсказки (tooltips) прямо на детальных фотографиях.

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

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

автоматизированное создание КП

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

Раньше это оборачивалось общением пользователя с менеджерами Darsy Box — нужно было прислать презентацию или коммерческое предложение, чтобы клиенту Darsy Box было с чем идти к боссу. Менеджеры тратили время на отправку заготовленных каталогов и базовые консультации. И самое обидное — после этого клиент мог просто не вернуться.

Мы решили эту проблему одной кнопкой. Добавили прямо в карточку товара автоматическую генерацию PDF. Один клик, и сайт на лету собирает красиво оформленное коммерческое предложение. Внутри все разбито по блокам: фотографии набора, подробный состав, варианты брендирования и актуальные цены.

Пользователям больше не нужно ничего уточнять — он сам скачивает готовый файл и пересылает боссу. А отдел продаж Darsy Box теперь получает не абстрактный вопрос «а что у вас есть?», а теплый лид, который уже все согласовал и готов оформить оптовый заказ.

Pixel Perfect вёрстка

Darsy Box — это прежде всего эстетика. Поэтому для клиента было принципиально важно сохранить магию дизайна до мельчайших деталей. Каждая плашка, отступ и микроанимация должны были совпадать с макетом до пикселя (Pixel Perfect), в том числе и на устройствах Mac.

Например, блок «7 шагов создания подарка» мы пересобирали вручную под четыре разных разрешения экрана — от 1600px до мобильных. Горизонтальный скролл с выпрыгивающими маскотами ломался из-за особенностей браузеров, а нам была нужна идеальная плавность на любом устройстве.

автоматический ресайз фото

Но красивый B2B-каталог — это еще и тяжелые фотографии весом по несколько мегабайт. Мы не стали просить клиента вручную сжимать их перед загрузкой. Вместо этого внедрили автоматический ресайз. Битрикс сам берет тяжелое фото, на лету оптимизирует его и выдает пользователю легкую копию.

результаты

Мы не просто перенесли красивую картинку на Битрикс, а создали пуленепробиваемую систему, которая выдержит любой наплыв B2B-клиентов в сезон новогодних распродаж.

• 1 клик требуется ЛПР-у, чтобы получить идеально сверстанное коммерческое предложение в PDF прямо из карточки товара.
• 100% автоматизация обновления каталога. Скрипт сам забирает «грязные» данные из 1С и распределяет их по фильтрам, исключая человеческий фактор и ошибки.
• В 3-4 раза снижен вес страниц. Тяжелые фото подарков автоматически оптимизируются на сервере, чтобы интерактивный маскот и 3D-анимации работали без фризов на любых устройствах.
• Только приятные впечатление от поиска товара. Умная фильтрация всегда подгоняет значения к реальному наличию, гарантируя, что клиент обязательно найдет нужный товар.

над проектом работали

Руководитель проекта 3  ●  Менеджер проекта 2  ●  Бизнес-аналитик  ●  Арт-директор  ●  Ux/Ui-дизайнер 2

Front-end разработчик 3  ●  Back-end разработчик 3  ●  SEO-специалист