Разработка карты выбора пункта выдачи для интернет-магазина

Разработка системы выбора пункта выдачи на карте для интернет-магазина

Покупатель открывает шаг доставки, видит список из 47 адресов пунктов выдачи, пытается найти нужный район в выпадающем списке и закрывает вкладку. Наш инженерный опыт показывает: без интерактивной карты до 40% пользователей бросают заказ на этом этапе. Мы — команда с 7-летним опытом в разработке e-commerce решений. С нашим решением человек сразу видит точки на карте рядом с домом, работой, по дороге — и выбирает за 5 секунд. Мы внедрили такие карты для 30+ интернет-магазинов, средний рост конверсии на этапе выбора доставки — 18%.

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

Google Analytics показывает, что страница выбора доставки — одна из самых «проседающих»: до 40% пользователей уходят, не выбрав способ. Без карты покупатель вынужден пролистывать длинный список адресов, сопоставлять с мысленной картой города и часто ошибается или бросает оформление. Типичные сложности:

• Длинные списки без визуальной привязки — названия улиц ни о чём не говорят, если человек плохо знает район.
• Отсутствие информации о загруженности — ПВЗ может быть переполнен, но в списке этого не видно.
• Невозможность сравнить несколько точек одновременно — приходится запоминать адреса и переключаться между вкладками.

Карта возвращает наглядность: маркеры показывают расположение, всплывающие подсказки — детали (режим работы, сроки, стоимость), группировка в кластеры — масштабируемость. В результате меньше брошенных корзин и экономия бюджета на ретаргетинге. Экономия на логистике достигает 20-30% за счёт снижения возвратов.

Источники данных о ПВЗ

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

СДЭК:

GET https://api.cdek.ru/v2/deliverypoints?city_code=44&weight_max=30&type=PVZ Authorization: Bearer {token} 

Boxberry:

GET https://api.boxberry.ru/json.php?token={token}&method=ListPoints&CityCode=77&prepaid=1 

Как мы кешируем справочник ПВЗ?

Список ПВЗ меняется редко — раз в сутки. Запрашивать его при каждом открытии страницы — расточительство. Мы синхронизируем данные по расписанию: каждую ночь artisan-команда загружает все точки от каждого перевозчика, очищает таблицу и вставляет актуальный набор. Пользователь получает данные из локальной БД за 10–20 мс вместо 500–2000 мс от API.

class SyncPickupPoints extends Command { public function handle(CdekService $cdek, BoxberryService $boxberry): void { $carriers = [ 'cdek' => fn() => $cdek->getAllPickupPoints(), 'boxberry' => fn() => $boxberry->getAllPickupPoints(), ]; foreach ($carriers as $carrier => $fetcher) { $points = $fetcher(); $this->info("$carrier: {$points->count()} points"); PickupPoint::where('carrier', $carrier)->delete(); PickupPoint::insert( $points->map(fn($p) => [ 'carrier' => $carrier, 'external_id' => $p['code'], 'name' => $p['name'], 'address' => $p['address'], 'city' => $p['city'], 'lat' => $p['lat'], 'lng' => $p['lng'], 'work_time' => $p['work_time'], 'max_weight' => $p['max_weight_kg'], 'cash_allowed' => $p['cash_allowed'], 'updated_at' => now(), ])->toArray() ); } $this->info('Done'); } } 

Как мы оптимизируем геопоиск?

Для поиска ближайших ПВЗ используем PostGIS. Сравните два подхода: PostGIS с пространственным индексом GIST против формулы гаверсинуса на стороне SQL. Выигрыш в скорости — 10–30 раз на наборах более 10 000 точек.

Мы выбираем PostGIS: он даёт выигрыш в скорости в 10–30 раз на больших наборах данных. Документация PostGIS утверждает, что пространственные индексы делают запросы к геоданным на порядок быстрее.

CREATE EXTENSION IF NOT EXISTS postgis; ALTER TABLE pickup_points ADD COLUMN location geography(POINT, 4326); UPDATE pickup_points SET location = ST_SetSRID(ST_MakePoint(lng, lat), 4326); CREATE INDEX idx_pickup_points_location ON pickup_points USING GIST(location); SELECT id, carrier, name, address, work_time, cash_allowed, ST_Distance(location, ST_SetSRID(ST_MakePoint(:lng, :lat), 4326)) AS distance_m FROM pickup_points WHERE max_weight >= :weight AND ST_DWithin(location, ST_SetSRID(ST_MakePoint(:lng, :lat), 4326)::geography, 10000) ORDER BY distance_m LIMIT 20; 

Рендеринг карты с кластеризацией

Отметим: когда точек много — несколько тысяч — рендерить каждую как отдельный DOM-элемент нельзя, браузер зависнет. Используем Leaflet + MarkerClusterGroup. Загрузка данных происходит только для видимой области карты (событие moveend).

import L from 'leaflet'; import 'leaflet.markercluster'; const map = L.map('pickup-map').setView([55.7558, 37.6173], 11); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); const markers = L.markerClusterGroup({ maxClusterRadius: 50, iconCreateFunction: (cluster) => { const count = cluster.getChildCount(); return L.divIcon({ html: `<div class="cluster-icon">${count}</div>`, className: '', iconSize: [40, 40], }); }, }); map.on('moveend', async () => { const bounds = map.getBounds(); const response = await fetch('/api/pickup-points?' + new URLSearchParams({ north: bounds.getNorth(), south: bounds.getSouth(), east: bounds.getEast(), west: bounds.getWest(), weight: cartWeight, })); const points = await response.json(); markers.clearLayers(); points.forEach((point) => { const marker = L.marker([point.lat, point.lng], { icon: carrierIcon(point.carrier), }); marker.bindPopup(buildPopup(point)); marker.on('click', () => selectPickupPoint(point)); markers.addLayer(marker); }); }); map.addLayer(markers); 

Что входит в работу

При заказе разработки вы получаете:

• Интеграцию с 1–5 службами доставки (API, синхронизация, кеширование)
• Геопоиск через PostGIS или альтернативный алгоритм
• Карту с кластеризацией, фильтрами и попапами
• Адаптивную вёрстку под мобильные устройства
• Определение города покупателя (геолокация + IP)
• Документацию по API и инструкцию по обновлению справочника
• 2 недели бесплатной поддержки после запуска

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

1. Аналитика — изучаем вашу форму заказа, список служб доставки, типичные сценарии покупателей.
2. Проектирование — согласовываем структуру данных, API-методы, логику фильтров.
3. Реализация — пишем код, настраиваем cron-задачи, подключаем карту.
4. Тестирование — проверяем на реальных данных, имитируем 1000+ точек.
5. Деплой и обучение — выгружаем на боевой сервер, передаём доступы и документацию.

Сроки разработки

Окончательная стоимость рассчитывается индивидуально — зависит от числа служб, сложности фильтров и необходимости переработки формы заказа. Грамотная карта ПВЗ окупается за счёт роста конверсии — вложения возвращаются в течение 3–6 месяцев. Средний срок окупаемости карты ПВЗ — 4 месяца за счёт роста конверсии.

Свяжитесь с нами, чтобы обсудить ваш проект и получить демо работающей карты. Закажите карту ПВЗ для вашего интернет-магазина — мы улучшим конверсию доставки.

Подробнее о PostGIS и Leaflet.markercluster.