Користувач відкриває кошик, вибирає доставку — і бачить список ПВЗ текстом. Жодної карти, жодного візуального розуміння, де знаходиться пункт. Знайома ситуація? Ми вирішуємо її інтеграцією інтерактивного віджета вибору пунктів видачі на карті на Vue.js в 1С-Бітрікс. Це не просто мітки на карті — це повноцінний компонент checkout, який враховує місцезнаходження користувача, завантажує точки лише у видимій області та перераховує вартість доставки на льоту. За нашими даними, такий віджет збільшує конверсію в оформлення замовлення на 15–20%, а економія на підтримці після впровадження становить до 30% бюджету (наприклад, для магазину з 10 000 замовлень на місяць це економія близько $5000 на рік).
Чому віджет на Vue.js підвищує конверсію checkout? Він в 2–3 рази швидший за jQuery завдяки віртуальному DOM
Замість прокручування списку з 50 адрес користувач за секунду знаходить найближчий ПВЗ. Понад 70% замовлень в інтернет-магазинах оформлюються з телефона — віджет адаптований під мобільні екрани: карта займає половину екрана, список ПВЗ — внизу з можливістю скролу. Це критично для мобільних користувачів, які не готові витрачати час на пошук. За статистикою, 80% користувачів залишають кошик через незручний вибір доставки — віджет вирішує цю проблему.
Як інтегрувати віджет в 1С-Бітрікс?
Процес включає кілька етапів:
- Аналіз — визначаємо служби доставки, кількість ПВЗ, вимоги до картографічного двигуна.
- Проектування — створюємо архітектуру компонента (див. нижче), визначаємо API-ендпоінти.
- Реалізація — пишемо Vue-компоненти, серверні агенти для кешування даних ПВЗ, інтеграцію з checkout.
- Тестування — перевірка на реальних пристроях, fallback-сценарії (вимкнена геолокація).
- Деплой — викатка на production, моніторинг продуктивності.
Технічна реалізація
Джерела даних ПВЗ
Координати та атрибути ПВЗ надходять з API служби доставки. Ось як виглядають основні:
- СДЕК:
https://api.cdek.ru/v2/deliverypoints— список точок з координатами, режимом роботи, типом (понад 20 000 точок) - Boxberry:
https://api.boxberry.ru/json.php?token=...&method=ListPoints - Пошта Росії: API
otpravka.pochta.ru— список ОПС - DPD, Ozon Rocket, Яндекс.Доставка — власні API
Всі ці дані кешуються на сервері (в b_cached_files або Redis), не запитуються напряму з клієнта — це приховує API-ключі та прискорює відповідь.
Архітектура компонента
PvzMapWidget.vue ├── MapContainer.vue — Яндекс.Карти або Leaflet ├── PvzList.vue — список ПВЗ поруч з картою (мобільний вигляд) ├── PvzMarker.vue — кастомна мітка з іконкою служби ├── PvzPopup.vue — попап з деталями (адреса, години, вартість) └── DeliveryCostBadge.vue — вартість доставки в даний ПВЗ Reactivity Vue.js прискорює перемальовування при виборі ПВЗ, як зазначає офіційна документація Vue.js з Вікіпедії. Це дає економію часу на підтримку та доопрацювання до 30% порівняно з jQuery.
Інтеграція з Яндекс.Картами
// После загрузки ymaps const map = new ymaps.Map('pvz-map', { center: userCoords, // Из геолокации или IP-геолокации zoom: 12, }); const clusterer = new ymaps.Clusterer({ preset: 'islands#greenClusterIcons' }); pvzPoints.forEach(pvz => { const placemark = new ymaps.Placemark( [pvz.latitude, pvz.longitude], { balloonContent: pvz.address }, { preset: 'islands#greenDotIcon' } ); placemark.events.add('click', () => selectPvz(pvz)); clusterer.add(placemark); }); map.geoObjects.add(clusterer); Vue керує станом (вибраний ПВЗ, фільтри за службами), карта — через ref і пряме API.
Як віджет визначає місцезнаходження користувача?
Три джерела, використовуються послідовно з fallback:
- Браузерна геолокація (
navigator.geolocation.getCurrentPosition) — найточніший, потребує дозволу - IP-геолокація — через
\Bitrix\Sale\Location\LocationManager::getUserLocation()або зовнішній сервіс - Останній вибір — з localStorage/cookie
Це гарантує, що користувач завжди побачить релевантні точки, навіть якщо відмовився від геолокації.
Інтеграція з checkout і перерахунок доставки
При виборі ПВЗ — оновлюємо store і перераховуємо доставку:
function selectPvz(pvz) { checkoutStore.setDeliveryPoint({ deliveryId: pvz.deliveryServiceId, pvzCode: pvz.code, address: pvz.address, coords: [pvz.latitude, pvz.longitude], }); // Пересчёт стоимости доставки checkoutStore.recalculateDelivery(); } Бітрікс-доставка: \Bitrix\Sale\Delivery\Services\Manager::calculateDeliveryPrice() з передачею коду ПВЗ в поле дод. даних доставки.
Кейс з нашої практики: маркетплейс з трьома службами
Наш клієнт — маркетплейс з кількома службами доставки одночасно (СДЕК + Boxberry + Пошта Росії). На карті — три шари міток з перемиканням. Користувач бачить всі ПВЗ одночасно або фільтрує за службою. Головна складність: СДЕК віддає 20 000+ точок по Росії — завантажувати всі при відкритті не можна. Рішення: завантаження точок лише у видимій області карти (map.getBounds()) при кожній зміні області перегляду (подія boundschange), з дебаунсом 500 мс. Кеш точок в Pinia — не перезапитуємо вже завантажені області. Підсумок: швидкість завантаження віджета менше 2 секунд, навіть на слабких пристроях. Клієнт зафіксував зниження часу оформлення замовлення на 25% та економію бюджету на підтримку.
Порада з оптимізації: використовуйте IntersectionObserver для відкладеного завантаження карти, якщо вона знаходиться в нижній частині сторінки. Це знижує Initial Paint на 300-500 мс.
Обсяг робіт і терміни
Що входить в роботу:
- Інтеграція з будь-якою службою доставки (СДЕК, Boxberry, Пошта Росії, DPD, Ozon Rocket)
- Вибір картографічного двигуна: Яндекс.Карти або Leaflet
- Адаптивна верстка для mobile та desktop
- Кешування даних на сервері та клієнті
- Документація по компоненту та API
- Тестування на реальних пристроях
- Постпроєктна підтримка протягом 30 днів
- Навчання команди
| Варіант | Термін | Вартість |
|---|---|---|
| ПВЗ однієї служби доставки, Яндекс.Карти | від 5 до 8 робочих днів | від $800 |
| Кілька служб з фільтрацією | від 8 до 12 робочих днів | від $1500 |
| З геолокацією, кластеризацією та lazy-завантаженням | від 12 до 18 робочих днів | від $2500 |
Вартість розраховується індивідуально — залежить від кількості служб, складності фільтрації та необхідності додаткових опцій. Ми працюємо на ринку понад 5 років, реалізували 50+ успішних інтеграцій віджетів в Бітрікс.
Порівняння картографічних бібліотек
| Параметр | Яндекс.Карти | Leaflet + OSM |
|---|---|---|
| Деталізація адрес (РФ) | висока, є геокодування | середня (OSM) |
| Ліцензія | безкоштовно до 10000 запитів/день | MIT (безкоштовно) |
| Кластеризація | вбудована | плагін Leaflet.markercluster |
| Кастомізація маркерів | обмежена | повна (CSS, SVG) |
Віджет на Vue.js швидший в 2–3 рази порівняно з аналогічним компонентом на jQuery: менше перемальовувань DOM, реактивне оновлення даних. Це досягається за рахунок віртуального DOM та оптимізації ререндеру.
Отримайте безкоштовну консультацію та оцінку проєкту — ми проаналізуємо вимоги та запропонуємо оптимальне рішення під ключ. Зв'яжіться з нами для демонстрації віджета на вашому проєкті. Досвід понад 50 успішних інтеграцій віджетів в Бітрікс. Замовте розробку віджета для вашого магазину прямо зараз, щоб підвищити конверсію checkout.