Виджет оформления заказа с единой картой ПВЗ

Контекст

О проекте

Клиент NDA

Сфера E-commerce

Задача

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

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

Основные требования:

→ Объединить ПВЗ нескольких служб доставки на одной карте
→ Подключить СДЭК, Почту России и Яндекс Доставку в одном интерфейсе
→ Быстро обновлять пункты выдачи при изменении области карты
→ Добавить поиск ближайших ПВЗ
→ Синхронизировать карту и список пунктов выдачи
→ Встроить выбор ПВЗ непосредственно в оформление заказа
→ Исправить проблемные участки устаревшего кода
→ Устранить зависания при загрузке компонентов страниц
→ Закрыть обнаруженные проблемы безопасности

Как решали

Вызовы и решения

Показываем не только результат, но и задачи, которые пришлось решить по ходу проекта

Три службы доставки — одна карта

Проблема

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

Решение

Данные СДЭК, Почты России и Яндекс Доставки приведены к единой структуре и отображаются на одной карте с визуальным разделением по службам.

Быстрое обновление большого количества ПВЗ

Проблема

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

Решение

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

Синхронизация карты и списка

Проблема

Пользователь должен одинаково удобно выбирать ПВЗ как визуально на карте, так и через список ближайших точек.

Решение

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

Устаревший код существующего сайта

Проблема

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

Решение

Переработана загрузка компонентов и устранены конфликтующие участки frontend-кода, что позволило стабилизировать переходы и обновление страниц.

Безопасность существующего проекта

Проблема

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

Решение

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

Итог проекта

Результаты

Ключевые показатели и эффект от реализованного решения.

3 службы ПВЗ

на одной интерактивной карте

< 1 сек

обновление новых ПВЗ на карте

Оформление заказа

выбор доставки встроен в единый процесс

Без зависаний

исправлены проблемы с загрузкой и обновлением страниц

Функциональность

Что реализовали

Ключевые модули и возможности, которые вошли в итоговое решение

✓ Модуль оформления заказа

✓ Единая карта ПВЗ

✓ Интеграция со СДЭК

✓Интеграция с Почтой России

✓Интеграция с Яндекс Доставкой

✓ Поиск ПВЗ по городу

✓ Поиск ближайшей ближайшего пункта выдачи

✓ Кластеризация маркеров на карте

✓ Синхронизация списка ПВЗ и карты

✓ Оптимизация загрузки компонентов

✓ Исправление устаревшего кода

✓ Исправления безопасности

Визуальная часть

Проект в деталях

Интерфейсы и ключевые экраны проекта — без обрезки, в исходных пропорциях.

Процесс работы

01

Аудит существующего оформления заказа

Разобран текущий сценарий оформления заказа, загрузка компонентов и проблемные участки существующего frontend.

02

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

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

03

Карта и поиск

Реализованы интерактивная карта, список ПВЗ, поиск, фильтрация и кластеризация ПВЗ.

04

Оптимизация

Оптимизировано обновление ПВЗ и загрузка компонентов, чтобы интерфейс реагировал без заметных задержек.

05

Стабилизация

Исправлены конфликтующие части устаревшего кода и проблемы безопасности существующего проекта.

Стек проекта

Технологии

Инструменты, которые использовали для реализации этого решения

JavaScript REST API Яндекс Карты API интеграции служб доставки

Хотите так же?

Расскажите о проекте — предложим решение за 24 часа

Быстрая связь:

@websolux websolux@mail.ru