Interactive pickup point selection widget on map with Vue.js for 1C-Bitrix

A user opens their cart, selects delivery, and sees a text list of pickup points. No map, no visual understanding. Familiar? We solve this by integrating an interactive pickup point selection widget on a map using Vue.js into 1C-Bitrix. This is not just pins on a map — it's a full checkout component that accounts for user location, loads points only in the visible area, and recalculates delivery costs on the fly. According to our data, such a widget increases checkout conversion by 15–20%, and support cost savings post-implementation reach up to 30% of the budget.

Why does a Vue.js widget boost checkout conversion?

Instead of scrolling through a list of 50 addresses, the user finds the nearest pickup point in seconds. Over 70% of online store orders are made from phones — the widget is adapted for mobile screens: the map takes half the screen, the pickup point list is at the bottom with scroll capability. This is critical for mobile users who are not willing to spend time searching. According to statistics, 80% of users abandon their cart due to inconvenient delivery selection — the widget solves this problem.

How to integrate the widget into 1C-Bitrix?

The process includes several stages:

1. Analysis — determine delivery services, number of pickup points, requirements for the mapping engine.
2. Design — create the component architecture (see below), define API endpoints.
3. Implementation — write Vue components, server agents for caching pickup point data, integration with checkout.
4. Testing — test on real devices, fallback scenarios (geolocation disabled).
5. Deployment — roll out to production, monitor performance.

Technical implementation

Data sources for pickup points

Coordinates and attributes of pickup points come from the delivery service API. Here are the main ones:

• CDEK: https://api.cdek.ru/v2/deliverypoints — list of points with coordinates, working hours, type
• Boxberry: https://api.boxberry.ru/json.php?token=...&method=ListPoints
• Russian Post: API otpravka.pochta.ru — list of post offices
• DPD, Ozon Rocket, Yandex.Delivery — custom APIs

All this data is cached server-side (in b_cached_files or Redis), not requested directly from the client — this hides API keys and speeds up response.

Component architecture

PvzMapWidget.vue ├── MapContainer.vue — Yandex.Maps or Leaflet ├── PvzList.vue — pickup point list next to the map (mobile view) ├── PvzMarker.vue — custom pin with service icon ├── PvzPopup.vue — popup with details (address, hours, cost) └── DeliveryCostBadge.vue — delivery cost to this pickup point 

Vue's reactivity speeds up re-rendering when selecting a pickup point, as noted by Vue.js official documentation. This gives up to 30% time savings in support and modifications compared to jQuery.

Integration with Yandex.Maps

// After ymaps loads const map = new ymaps.Map('pvz-map', { center: userCoords, // From geolocation or IP geolocation 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 manages the state (selected pickup point, filters by service), the map is accessed via ref and direct API.

How does the widget determine the user's location?

Three sources, used sequentially with fallback:

1. Browser geolocation (navigator.geolocation.getCurrentPosition) — most accurate, requires permission
2. IP geolocation — via \Bitrix\Sale\Location\LocationManager::getUserLocation() or external service
3. Last selection — from localStorage/cookie

This guarantees the user always sees relevant points, even if they declined geolocation.

Integration with checkout and delivery recalculation

When a pickup point is selected, we update the store and recalculate delivery:

function selectPvz(pvz) { checkoutStore.setDeliveryPoint({ deliveryId: pvz.deliveryServiceId, pvzCode: pvz.code, address: pvz.address, coords: [pvz.latitude, pvz.longitude], }); // Recalculate delivery cost checkoutStore.recalculateDelivery(); } 

Bitrix delivery: \Bitrix\Sale\Delivery\Services\Manager::calculateDeliveryPrice() with the pickup point code passed in the delivery additional data field.

Case study from our practice: a marketplace with three services

Our client was a marketplace with multiple delivery services simultaneously (CDEK + Boxberry + Russian Post). The map had three marker layers with switching. The user could see all pickup points at once or filter by service. The main challenge: CDEK returns 20,000+ points across Russia — loading all upon opening is impossible. Solution: load points only in the visible map area (map.getBounds()) on every viewport change (boundschange event) with a 500 ms debounce. Point cache in Pinia — do not re-request already loaded areas. Result: widget load time under 2 seconds, even on weak devices. The client reported a 25% reduction in order placement time and budget savings on support.

Optimization tip: use IntersectionObserver for lazy loading the map if it is in the lower part of the page. This reduces Initial Paint by 300–500 ms.

Scope of work and timelines

• Integration with any delivery service (CDEK, Boxberry, Russian Post, DPD, Ozon Rocket)
• Choice of mapping engine: Yandex.Maps or Leaflet
• Responsive layout for mobile and desktop
• Server-side and client-side data caching
• Documentation for the component and API
• Testing on real devices
• Post-project support for 30 days

Cost is calculated individually — depends on the number of services, filtering complexity, and need for additional options (e.g., displaying delivery cost in the popup).

Comparison of mapping libraries

The Vue.js widget is 2–3 times faster compared to an equivalent jQuery component: fewer DOM redraws, reactive data updates. This is achieved through virtual DOM and render optimization.

Contact us for a consultation on your project — we will analyze requirements and propose the optimal solution. Request a demo of the widget on your project. Over 50 successful widget integrations in Bitrix. Order widget development for your store now to boost checkout conversion.