Проблема или задача: в магазине нашего клиента реализован расчет сроков и стоимости доставки. Доставка осуществляется курьерскими службами (СДЭК, Boxberry, DPD), Почтой России и транспортными компаниями (Деловые Линии, ПЭК, GTD, Энергия). Но выбор пунктов выдачи в них осуществлялся из большого списка с адресами, что сложно. Пришло время сделать для их выбора удобную карту.
Курьерских служб и транспортных компаний, предоставляющих доставку в ПВЗ, может доходить до 7, а стоимость и сроки доставки в разные ПВЗ могут отличаться. И, разумеется, каждая компания предоставляет свои виджеты и карты. Но нам принципиально не подходило решение с 7-ю разными картами, ибо оформление заказа должно быть максимально простым и удобным.
Долгое время выбор ПВЗ был реализован через раскрывающиеся списки. При оформлении заказа выводились варианты доставки и список доступных пунктов выдачи:
Поэтому было очевидно — нужна карта со всеми пунктами выдачи заказов.
Варианты решений
Вариантов реализации было немного:
- Использовать встроенные возможность CMS InSales;
- Использовать агрегаторы доставки и сторонние модули;
- Реализовать собственную карту ПВЗ.
Для того, чтобы использовать встроенную карту нужно было вручную создавать все точки на карте.
На сайте реализован нестандартный калькулятор доставки, гибко управлять ценами при таком способе стало бы невозможно.
Использовать агрегаторы служб доставки мы не могли, т.к. все процессы передачи заказа курьерским службам автоматизированы. При оформлении заказа адрес структурируется, подбирается почтовый индекс, код пункта выдачи — данные должны поступать в заказ в определенном формате. Использовать для этого сторонние модули достаточно сложно, т.к. не всегда можно адаптировать их функционал под себя.
Решили создавать свою карту пунктов выдачи. Карта должна включать:
- поиск и смену населенного пункта;
- поиск по адресу;
- точки всех доступных пунктов выдачи на карте;
- вывод стоимости и сроков доставки для каждой компании;
- фильтры по службам доставки;
- фильтры по функции наложенного платежа.
Особенности реализации
Работу над картой начали с создания прототипов и отрисовки дизайна. Если карту в десктопном варианте было нарисовать не сложно, то для мобильных устройств нужно было позаботиться об удобстве: поместить в небольшой экран и карту, и фильтры и информацию о пунктах выдачи, включая отметки о доступных опциях.
После того, как были созданы прототипы и отрисован дизайн мы приступили к реализации программной части.
С технической точки зрения, функционал был полностью понятен: какие ПВЗ отображать, какую информацию выводить, когда блокировать кнопки и как записывать адрес выбранного ПВЗ.
Но вся сложность, как и всегда, была в деталях.
После реализации и тестирования стало понятно: в одном адресе может умещаться 2 и даже 3 пункта выдачи. Но точка на карте одна, а информация о ПВЗ занимает довольно много места:
Получалось, что нужно уместить информацию о 2-х ПВЗ сразу в одной карточке, при этом не потеряв удобство использования в мобильной версии.
Решение оказалось простым — вкладки.
Это решение отвечало нашим запросам, в т.ч. в мобильной версии использование таких вкладок было удобным:
После решения этой проблемы мы реализовали большое количество нюансов:
- скрыли стандартные элементы и функции карты;
- настроили визуальное отображение точек (иконки), группировку с секторами;
- стилизовали все внутренние элементы (шрифты, кнопки, чекбоксы) и т.д.
Эффект от проведенных работ
После долго тестирования карта стала доступна всем пользователям сайта.
Теперь при оформлении заказа клиент может просмотреть сразу все доступные пункты выдачи на одной карте:
На карте все ПВЗ сгруппированы, разделены по цвету или отмечены иконками компаний, клиент сразу видит стоимость и сроки доставки:
Доступна фильтрация по службам доставки:
В мобильной версии карта отображается корректно и работает управление жестами:
При этом фильтры в мобильной версии работают полноценно:
Клиент не пугается интерфейсов, быстро делает выбор.
Корректная логика работы элементов позволила минимизировать неправильное использование карты, а значит менеджеры сталкиваются с меньшим количеством проблем при обработке заказов.
