Інтеграція виджета виробору пункту видачи на карті
Виджет вибору ПВЗ на карті — обов'язковий елемент оформлення замовлення для інтернет-магазинів, які пропонують самовивіз. Покупець бачить всі доступні точки видачи на карті, може фільтрувати за типом (постамат/ПВЗ), режимом роботи та відстанню від поточного місцезнаходження.
Джерела даних про ПВЗ
Точки видачи поступають з кількох джерел:
-
CDEK API —
GET /v2/deliverypoints?city_code={id}&type=PVZ - DHL, BoxBerry, 5Post — власні API кожного провайдера
- Яндекс.Доставка — endpoint для отримання списку ПВЗ
- Власні точки магазину — зберігаються в БД
Агрегація: всі точки об'єднуються в єдиний формат та зберігаються в таблиці pickup_points. Оновлення — scheduled job кожні 6–12 годин.
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
)
Карта: Яндекс.Карти vs Google Maps vs Leaflet
Yandex.Maps JS API 3.0 — найкращий вибір для російськи користувачів, точніше визначає адреси. Безплатний ліміт 1000 запитів/добу, потім платно.
Leaflet + OpenStreetMap — безплатно, без обмежень, гірший геокодинг в РФ. Хороший для корпоративних сайтів з невеликим трафіком.
Google Maps — висока вартість для РФ, деякі функції обмежені.
Реалізація кластеризації
При 2000+ точок на карті браузер тормозить. Потрібна кластеризація.
// Yandex.Maps
import { Clusterer } from '@yandex/ymaps3-clusterer';
const clusterer = new Clusterer({
clusterize: (coordinates, zoom) => {
return zoom < 12;
}
});
Для Leaflet — плагін leaflet.markercluster.
Фільтри та пошук
Фільтри на UI:
- Тип: постамат / ПВЗ з сотрудником
- Режим роботи: сейчас відкритий / 24 години
- Сервіси: примірочна / оплата картою / наложений платіж
- Максимальна вага посилки
Пошук по адресі реалізується через геокодирование — вводит адрес, получает координати, карта центрується, підсвічуються найближчі точки.
Передача даних у замовлення
Після вибору точки форма замовлення зберігає:
{
"pickup_type": "pvz",
"pickup_point_id": 1234,
"pickup_provider": "cdek",
"pickup_external_id": "MSK001",
"pickup_address": "Москва, ул. Арбат, 5"
}
Ці дані передаються в API служби доставки при створенні відправлення.
Мобільна адаптація
На мобільних пристроях карта часто конкурує з прокруткою сторінки. Рішення: кнопка "розгорнути карту" → карта відкривається на повний екран через CSS position: fixed. Або — bottom sheet з картою поверх контенту.
Визначення міста користувача
За замовчуванням карта центрується на місто, яке визначається через:
- IP-геолокація (api.sypexgeo.net або ipgeolocation.io)
- Геолокація браузера (з дозволу користувача)
- Адреса доставки з попереднього замовлення (для авторизованих)
Строк розробки: 3–5 робочих днів для виджета з агрегацією кількох провайдерів, кластеризацією та фільтрами.