Інтеграція віджета вибору пункту видачі на карті
Покупець додає товари в кошик, переходить до оформлення — і застрягає на виборі пункту видачі. Карта завантажується довго, маркери накладені один на одного, незрозуміло, де найближчий поштомат. Така поведінка з'їдає до 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 робочих днів. Точна вартість розраховується індивідуально після аналізу вимог. Зв'яжіться з нами для консультації — ми оцінимо ваш проект і запропонуємо оптимальне рішення.
Замовте інтеграцію віджета — отримайте готове рішення для вашого інтернет-магазину.