Интерактивная карта служб доставки

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

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

Обновление страницы оформления заказа: интеграция интерактивной карты пунктов выдачи

До внесения изменений интерфейс страницы оформления заказа на сайте Palmetta представлял собой стандартное решение: пользователю предлагалось выбрать одну из доступных служб доставки из общего списка.

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

Чтобы сделать оформление заказа более интуитивным, быстрым и современным, заказчиком было предложено концептуальное решение — объединить все службы доставки в единую интерактивную карту.

Новая система отображает все доступные точки выдачи заказов (ПВЗ и постаматы) от разных операторов одновременно. Это позволило:

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

повысить удобство — можно выбрать наиболее подходящую точку по расположению, графику работы и стоимости доставки;

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

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

Интеграция карты ПВЗ и расчёта доставки прямо в карточке товара

Обычно функционал выбора службы доставки и пункта самовывоза доступен только на этапе оформления заказа — в корзине.

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

Мы разработали кастомный компонент, который позволяет:

Выбрать город;

Выбрать службу доставки (СДЭК, Почта России и другие);

Отобразить все доступные пункты выдачи заказов и постаматы на одной карте;

Выбрать удобную точку получения;

Сразу увидеть стоимость доставки по выбранным параметрам.

Ключевое преимущество — вся информация отображается прямо в карточке товара, без необходимости перехода в корзину. Это значительно сокращает путь пользователя к покупке и ускоряет принятие решения.

Особое внимание мы уделили интеграции с различными службами доставки. Компонент спроектирован таким образом, чтобы при необходимости можно было легко подключать новых операторов — например, Яндекс.Доставку, Boxberry и другие. Это делает решение гибким и масштабируемым в зависимости от задач бизнеса.

Дополнительно реализована автоматическая передача выбранных пользователем параметров доставки из карточки товара в корзину.

Таким образом, при оформлении заказа не требуется повторный выбор, что ещё сильнее упрощает и ускоряет процесс.

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