Интеграция виджета выбора пункта выдачи на карте
Покупатель добавляет товары в корзину, переходит к оформлению — и застревает на выборе пункта выдачи. Карта загружается долго, маркеры наложены друг на друга, непонятно, где ближайший постамат. Такое поведение съедает до 20% конверсии на этапе самовывоза. Наша задача — объединить данные СДЭК, BoxBerry, DHL, 5Post и Яндекс.Доставки в единый виджет, который работает без тормозов даже при 5000+ точках.
Мы проектируем схему под PostgreSQL с геоиндексами, настраиваем кластеризацию для производительности и адаптируем интерфейс под мобильные экраны. В результате пользователь за 10–15 секунд находит подходящий ПВЗ, а магазин получает +5–10% к конверсии на этапе самовывоза. Город пользователя определяется через IP-геолокацию, что позволяет сразу показать ПВЗ в его регионе.
Проблемы, которые решаем
- Фрагментация данных: каждая служба доставки отдаёт точки в своём формате. Нужно унифицировать и обновлять их по расписанию.
- Производительность при большом количестве маркеров: без кластеризации браузер подвисает уже на 1000 точках.
- Мобильная адаптация: карта на маленьком экране конкурирует с прокруткой.
- Точность геокодирования: не все сервисы корректно работают в РФ, особенно для адресов в регионах.
Как агрегировать данные нескольких служб доставки?
Каждый провайдер предоставляет API для получения списка ПВЗ. Для СДЭК это GET /v2/deliverypoints?city_code={id}&type=PVZ, для BoxBerry — собственный эндпоинт с авторизацией. Мы создаём интеграционные модули для каждого источника, маппим поля в единую схему:
pickup_points ( id, provider, external_id, name, address, city_id, lat, lng, working_hours (jsonb), max_weight, max_dimensions (jsonb), has_fitting_room, has_cash, has_card, is_active, updated_at ) Обновление данных запускается по Cron через scheduled job раз в 6–12 часов. При падении одного провайдера — точки остаются из последнего успешного снэпшота. Согласно рекомендациям Яндекс.Карт, кластеризация доступна с версии 3.0 и позволяет группировать маркеры при масштабе ниже 12.
Сравнение картографических сервисов
| Сервис | Бесплатный лимит | Качество геокодирования в РФ | Кластеризация | Стоимость при превышении |
|---|---|---|---|---|
| Яндекс.Карты JS API 3.0 | 1000 запросов/сутки | Отличное | Встроенный Clusterer | По тарифу, зависит от объёмов |
| Leaflet + OpenStreetMap | Безлимитно | Среднее (хуже для регионов) | Плагин leaflet.markercluster | Бесплатно |
| Google Maps | 200$ / месяц грант (в РФ недоступен) | Хорошее (санкции) | Библиотека MarkerClusterer | Высокая |
Яндекс.Карты мы выбираем для российских интернет-магазинов с трафиком до 300 000 посетителей в месяц — оптимально по качеству и бюджету. Leaflet — для корпоративных порталов с низкой нагрузкой. Google Maps использовать не рекомендуем из-за юридических и финансовых рисков.
Сравнение подходов к обновлению данных ПВЗ
| Метод | Частота | Надёжность |
|---|---|---|
| Pull-запросы к API провайдеров | 6–12 часов | Высокая (точки из последнего снэпшота) |
| Webhook-уведомления от провайдеров | В реальном времени | Средняя (не все провайдеры поддерживают) |
| Ручной импорт через админку | По требованию | Низкая (человеческий фактор) |
Рекомендуем комбинировать pull-запросы с ручным импортом для экстренного обновления.
Почему кластеризация критична при большом количестве ПВЗ?
Если на карте 2000+ маркеров, браузер начинает тормозить — FPS падает до 5–10. Пользователь не может ни выбрать точку, ни приблизить карту. Решение — группировка маркеров при масштабе меньше 12. Для Яндекс.Карт используем Clusterer:
import { Clusterer } from '@yandex/ymaps3-clusterer'; const clusterer = new Clusterer({ clusterize: (coordinates, zoom) => zoom < 12 }); Для Leaflet — плагин leaflet.markercluster с аналогичной логикой. Результат: даже на 10 000 точках карта работает плавно. Кластеризация улучшает FPS в 10 раз по сравнению с отображением всех маркеров.
Фильтры и поиск
Фильтрация ПВЗ по типу (постамат или ПВЗ с сотрудником), режиму работы (сейчас открыто, 24 часа), дополнительным сервисам (примерочная, оплата картой) и максимальному весу посылки (слайдер от 1 до 30 кг). Поиск по адресу реализуем через геокодирование — вводит адрес, получает координаты, карта центрируется, подсвечиваются ближайшие точки. Для Яндекса используем ymaps.geocode, для Leaflet — Nominatim (OSM).
Мобильная адаптация
На мобильных устройствах карта часто конкурирует с прокруткой страницы. Решение: кнопка "развернуть карту" — карта открывается на полный экран через CSS position: fixed. Либо — отдельная bottom sheet с картой поверх контента. Дополнительно: добавляем «липкий» поиск и кнопку "рядом со мной" через геолокацию браузера.
Что входит в работу
- Архитектура данных: проектирование и нормализация таблицы pickup_points под PostgreSQL (с индексами по lat/lng для быстрой геопространственной выборки).
- Интеграция провайдеров (СДЭК, BoxBerry, DHL, 5Post, Яндекс.Доставка, собственные точки).
- Разработка карты (Яндекс.Карты или Leaflet) с кластеризацией, фильтрами и геокодированием.
- Мобильная адаптация (fullscreen/bottom sheet).
- Передача данных в заказ (JSON-схема для API).
- Документация (api-спецификация, схема БД, инструкция по обновлению ПВЗ).
- Поддержка 1 месяц после запуска (исправление багов, консультации).
Процесс работы
- Аналитика — изучаем требования, список провайдеров, ожидаемое количество точек.
- Проектирование — создаём схему БД, API-контракты, прототип интерфейса.
- Реализация — пишем интеграционные модули, виджет карты, backend-агрегатор.
- Тестирование — проверяем на 5000+ мок-точках, замеряем Core Web Vitals (LCP < 2.5s, CLS < 0.1).
- Деплой — развёртываем на продакшен-сервер (Docker + Nginx + PostgreSQL), настраиваем мониторинг.
Сроки и стоимость
Ориентировочный срок разработки виджета с агрегацией 3–5 провайдеров, кластеризацией и фильтрами — от 3 до 8 рабочих дней. Точная стоимость рассчитывается индивидуально после анализа требований. Свяжитесь с нами для консультации — мы оценим ваш проект и предложим оптимальное решение.
Закажите интеграцию виджета — получите готовое решение для вашего интернет-магазина.