Виджет для сервиса доставки Catapulto

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

Клиент: Catapulto — компания агрегатор курьерской доставки в России. Сервисом ежедневно пользуются тысячи корпоративных и частных клиентов, отправляя почту и грузы по России и всему миру. Catapulto объединяет операторов курьерской доставки и транспортных компаний.

Виджет, который мы разрабатали, включает следующий функционал:

отображение всех возможных вариантов тарифов и доставки;
выбор способа доставки (курьерской службой или до пункта выдачи);
выбор транспортной компании;
выбор ПВЗ.

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

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

Для более точного управления виджетом можно передать множество других параметров:

как следует выводить дату — в виде «2 дня» или в виде «8 ноября»;
нужно ли виджету работать в виде информационного виджета и не давать возможность выбора варианта доставки;
нужно ли виджету работать с каким-то одним способом доставки и ограничить другой: курьерская доставка или доставка на пункт выдачи;
нужно ли заранее отфильтровать пункты выдачи недоступные для оплаты наличными или картой при выборе доставки на пункт выдачи;
каким способом магазин отправит заказ в транспортную компанию: при помощи курьера или самостоятельно отвезет на склад;
нужно ли сдвинуть дату доставки и на сколько дней;
нужно ли работать в режиме всплывающего окна.

Виджет может работать в следующих режимах:

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

Сразу же после инициализации и загрузки параметров виджет (если передан город назначения) запускает поиск адреса при помощи сервиса Dadata для определения точного адреса. Если же адрес не задан, виджет показывает поле для ввода адреса, предлагая ввести как можно более точный адрес.

Если вариантов доставки много, можно отсортировать по стоимости, скорости доставки или рейтингу. Рейтинг тарифа отображается звездочками. Возле логотипа транспортной компании иконка «i» показывает информацию по этому тарифу.

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

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

При выборе «Пункта выдачи заказов» открывается карта. Здесь же можно посмотреть список всех точек и краткую информацию по ним. Есть возможность фильтрации по способам оплаты. Например, клиент может выбрать варианты ПВЗ, которые принимают оплату, и отфильтровать нужный тип оплаты – картой или наличными. Таким образом, на карте будут отображаться только те ПВЗ, которые подходят клиенту по способу оплаты.

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

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

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

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

Особенности разработки:

Разработана своя библиотека на «чистом» JavaScript, чтобы не зависеть от изменений и использования популярных библиотек.
Виджет разработан с учетом стандарта ECMAScript 6.
Код виджета разделен на функциональные части, каждая отвечает за свой функционал.

Дополнительно можно использовать параметры для вывода даты, выбора режима работы виджета и другие настройки.
Виджет генерирует JavaScript события, на которые нужно подписаться для продолжения обработки заказа после работы виджетом.

Руководитель

Дмитрий Покровский

Менеджер и дизайнер

Разработчики

Сергей Постнов

Верстальщик

Даврон Акрамов

1С-Битрикс

Техническая поддержка

Интеграционное обслуживание

Модули

Дизайн

Бизнес-процессы

InSales

Разработка виджетов

Отрасль:

Логистика

Клиент:

Catapulto