וידג'ט אינטראקטיבי לבחירת נקודות חלוקה על המפה עם Vue.js עבור 1C-Bitrix

משתמש פותח את העגלה שלו, בוחר משלוח, ורואה רשימה טקסטואלית של נקודות איסוף. אין מפה, אין הבנה ויזואלית. מוכר? אנחנו פותרים זאת על ידי שילוב ווידג'ט אינטראקטיבי לבחירת נקודות איסוף על מפה באמצעות Vue.js לתוך 1C-Bitrix. זה לא רק נעצים על מפה — זה רכיב תשלום מלא שמתחשב במיקום המשתמש, טוען נקודות רק באזור הנראה, ומחשב מחדש עלויות משלוח תוך כדי תנועה. לפי הנתונים שלנו, ווידג'ט כזה מעלה את שיעור ההמרה בתשלום ב-15–20%, והחיסכון בעלויות התמיכה לאחר היישום מגיע עד 30% מהתקציב.

למה ווידג'ט Vue.js מגביר את ההמרה בתשלום?

במקום לגלול ברשימה של 50 כתובות, המשתמש מוצא את נקודת האיסוף הקרובה ביותר תוך שניות. מעל 70% מההזמנות בחנויות מקוונות מתבצעות מטלפונים — הווידג'ט מותאם למסכים ניידים: המפה תופסת חצי מהמסך, רשימת נקודות האיסוף בתחתית עם אפשרות גלילה. זה קריטי למשתמשים ניידים שלא מוכנים לבזבז זמן בחיפוש. לפי סטטיסטיקות, 80% מהמשתמשים נוטשים את העגלה בגלל בחירת משלוח לא נוחה — הווידג'ט פותר את הבעיה הזו.

איך לשלב את הווידג'ט לתוך 1C-Bitrix?

התהליך כולל מספר שלבים:

1. ניתוח — קביעת שירותי המשלוח, מספר נקודות האיסוף, דרישות למנוע המיפוי.
2. עיצוב — יצירת ארכיטקטורת הרכיב (ראה להלן), הגדרת נקודות קצה של API.
3. יישום — כתיבת רכיבי Vue, סוכני שרת לאחסון במטמון של נתוני נקודות איסוף, אינטגרציה עם התשלום.
4. בדיקות — בדיקה על מכשירים אמיתיים, תרחישי גיבוי (גיאולוקיישן מושבת).
5. פריסה — העלאה לסביבת ייצור, ניטור ביצועים.

יישום טכני

מקורות נתונים לנקודות איסוף

קואורדינטות ומאפיינים של נקודות איסוף מגיעים מ-API של שירות המשלוח. הנה העיקריים:

• CDEK: https://api.cdek.ru/v2/deliverypoints — רשימת נקודות עם קואורדינטות, שעות פעילות, סוג
• Boxberry: https://api.boxberry.ru/json.php?token=...&method=ListPoints
• דואר רוסי: API otpravka.pochta.ru — רשימת סניפי דואר
• DPD, Ozon Rocket, Yandex.Delivery — APIs מותאמים אישית

כל הנתונים האלה נשמרים במטמון בצד השרת (ב-b_cached_files או Redis), לא נשלחים ישירות מהלקוח — זה מסתיר מפתחות API ומאיץ את התגובה.

ארכיטקטורת הרכיב

PvzMapWidget.vue
├── MapContainer.vue — Яндекс.Карты или Leaflet
├── PvzList.vue — список ПВЗ рядом с картой (мобильный вид)
├── PvzMarker.vue — кастомная метка с иконкой службы
├── PvzPopup.vue — попап с деталями (адрес, часы, стоимость)
└── DeliveryCostBadge.vue — стоимость доставки в данный ПВЗ

הראקטיביות של Vue מאיצה את ה-rendering מחדש בעת בחירת נקודת איסוף, כפי שצוין ב-תיעוד הרשמי של Vue.js. זה נותן חיסכון של עד 30% בזמן בתמיכה ובשינויים בהשוואה ל-jQuery.

אינטגרציה עם Yandex.Maps

// После загрузки 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 מנהל את המצב (נקודת איסוף נבחרה, פילטרים לפי שירות), הגישה למפה דרך PvzMapWidget.vue ├── MapContainer.vue — Яндекс.Карты или Leaflet ├── PvzList.vue — список ПВЗ рядом с картой (мобильный вид) ├── PvzMarker.vue — кастомная метка с иконкой службы ├── PvzPopup.vue — попап с деталями (адрес, часы, стоимость) └── DeliveryCostBadge.vue — стоимость доставки в данный ПВЗ ו-API ישיר.

איך הווידג'ט קובע את מיקום המשתמש?

שלושה מקורות, בשימוש רציף עם גיבוי:

1. גיאולוקיישן דפדפן (// После загрузки 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); ) — הכי מדויק, דורש הרשאה
2. גיאולוקיישן IP — דרך ref או שירות חיצוני
3. בחירה אחרונה — מ-localStorage/cookie

זה מבטיח שהמשתמש תמיד רואה נקודות רלוונטיות, גם אם הוא דחה גיאולוקיישן.

אינטגרציה עם התשלום וחישוב משלוח מחדש

כאשר נבחרת נקודת איסוף, אנחנו מעדכנים את החנות ומחשבים מחדש את המשלוח:

function selectPvz(pvz) {
  checkoutStore.setDeliveryPoint({
    deliveryId: pvz.deliveryServiceId,
    pvzCode: pvz.code,
    address: pvz.address,
    coords: [pvz.latitude, pvz.longitude],
  });
  // Пересчёт стоимости доставки
  checkoutStore.recalculateDelivery();
}

משלוח Bitrix: navigator.geolocation.getCurrentPosition עם קוד נקודת האיסוף המועבר בשדה נתונים נוסף של המשלוח.

מקרה בוחן מהפרקטיקה שלנו: מרקטפלייס עם שלושה שירותים

הלקוח שלנו היה מרקטפלייס עם מספר שירותי משלוח בו זמנית (CDEK + Boxberry + דואר רוסי). במפה היו שלוש שכבות נעצים עם מעבר. המשתמש יכול לראות את כל נקודות האיסוף בבת אחת או לסנן לפי שירות. האתגר המרכזי: CDEK מחזיר 20,000+ נקודות ברחבי רוסיה — טעינת כולן בעת פתיחה היא בלתי אפשרית. פתרון: טעינת נקודות רק באזור הנראה במפה (\Bitrix\Sale\Location\LocationManager::getUserLocation()) בכל שינוי תצוגה (אירוע function selectPvz(pvz) { checkoutStore.setDeliveryPoint({ deliveryId: pvz.deliveryServiceId, pvzCode: pvz.code, address: pvz.address, coords: [pvz.latitude, pvz.longitude], }); // Пересчёт стоимости доставки checkoutStore.recalculateDelivery(); } ) עם debounce של 500 אלפיות השנייה. מטמון נקודות ב-Pinia — אין לבקש מחדש אזורים שכבר נטענו. תוצאה: זמן טעינת ווידג'ט מתחת ל-2 שניות, אפילו במכשירים חלשים. הלקוח דיווח על הפחתה של 25% בזמן ביצוע הזמנה וחיסכון בתקציב התמיכה.

טיפ לאופטימיזציה: השתמשו ב-IntersectionObserver לטעינה עצלה של המפה אם היא בחלק התחתון של העמוד. זה מפחית את ה-Initial Paint ב-300–500 אלפיות השנייה.

היקף העבודה ולוחות זמנים

• אינטגרציה עם כל שירות משלוח (CDEK, Boxberry, דואר רוסי, DPD, Ozon Rocket)
• בחירת מנוע מיפוי: Yandex.Maps או Leaflet
• עיצוב רספונסיבי למובייל ולדסקטופ
• אחסון במטמון בצד השרת ובצד הלקוח
• תיעוד לרכיב ול-API
• בדיקות על מכשירים אמיתיים
• תמיכה לאחר הפרויקט למשך 30 יום

המחיר מחושב באופן אישי — תלוי במספר השירותים, מורכבות הסינון, והצורך באפשרויות נוספות (למשל, הצגת עלות משלוח ב-popup).

השוואת ספריות מיפוי

ווידג'ט Vue.js מהיר פי 2–3 בהשוואה לרכיב jQuery מקביל: פחות ציורים מחדש של DOM, עדכוני נתונים ראקטיביים. זה מושג באמצעות DOM וירטואלי ואופטימיזציית rendering.

צרו קשר לייעוץ על הפרויקט שלכם — ננתח את הדרישות ונציע פתרון אופטימלי. בקשו הדגמה של הווידג'ט על הפרויקט שלכם. מעל 50 אינטגרציות מוצלחות של ווידג'טים ב-Bitrix. הזמינו פיתוח ווידג'ט לחנות שלכם עכשיו כדי להגביר את ההמרה בתשלום.