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

Контекст

О проекте

Клиент NDA

Сфера E-commerce

Задача

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

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

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

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

Как решали

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

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

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

Проблема

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

Решение

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

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

Проблема

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

Решение

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

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

Проблема

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

Решение

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

Legacy-код существующего сайта

Проблема

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

Решение

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

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

Проблема

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

Решение

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

Итог проекта

Результаты

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

3 службы

ПВЗ на одной интерактивной карте

< 1 сек

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

1 checkout

выбор доставки встроен в оформление заказа

Legacy fix

стабилизация и исправление проблемного кода

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

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

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

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

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

✓ СДЭК

✓ Почта России

✓ Яндекс Доставка

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

✓ Поиск ближайшей точки

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

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

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

✓ Исправление legacy-кода

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

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

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

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

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

01

Аудит существующего checkout

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

02

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

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

03

Карта и поиск

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

04

Оптимизация

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

05

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

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

Стек проекта

Технологии

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

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

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

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

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

@websolux websolux@mail.ru