פיתוח בוחר נקודות איסוף מבוסס מפה למסחר אלקטרוני ב-1C-Bitrix

לעתים קרובות אנו נתקלים במצב: לחנות מקוונת יש מאות נקודות חלוקה, אבל הרכיב הסטנדרטי sale.order.ajax מציע רק רשימה נפתחת של כתובות. זה לא נוח למשתמש — הוא לא יכול לראות היכן נקודות החלוקה ממוקמות יחסית לכתובת שלו, ומנהלי התמיכה צריכים להסביר איך למצוא את הנקודה הנכונה. אנו מפתחים וידג'ט לבחירת נקודת חלוקה שמשתלב עם המפה. במאמר זה, נסביר את הארכיטקטורה של וידג'ט כזה, כיצד הנתונים מאוחסנים, וכיצד הוא משתלב בתהליך התשלום של ביטריקס.

הווידג'ט מאפשר למשתמשים לבחור נקודת חלוקה על המפה עם מסננים לפי שעות פעילות, סוג נקודה ומרחק. הוא מאיץ משמעותית את תהליך התשלום: לפי המדידות שלנו, זמן הבחירה מצטמצם פי 3-5 בהשוואה לרשימה (60% מהר יותר בבדיקות A/B). זה גם מפחית שגיאות — המשתמשים רואים מידע עדכני על הנקודה (לוח זמנים, אנשי קשר, תמונות), מה שמוביל ל-40% פחות משלוחים שנכשלו.

כיצד הווידג'ט מאיץ את תהליך התשלום

עם רשימה סטנדרטית, המשתמשים צריכים לקרוא כתובות ולדמיין מיקומים. המפה מספקת ייצוג חזותי, וקיבוץ (clustering) מאפשר עבודה עם אלפי נקודות ללא אובדן ביצועים. בחירת נקודת חלוקה היא לחיצה אחת. האינטגרציה עם חישוב עלות המשלוח מתרחשת באופן מיידי — הווידג'ט שולח בקשה ל-handler ומציג את המחיר וזמן המשלוח ליד הכתובת עוד לפני האישור. זה מפחית את שיעור הנטישה בכ-25%.

היכן הווידג'ט ממוקם בארכיטקטורת ביטריקס

הווידג'ט משולב בתהליך התשלום. אנו משתמשים באירוע OnBeforeSaleOrderFinalAction או בתבנית של הרכיב sale.checkout.v2 — תלוי באיזה תהליך תשלום משתמשים באתר.

הווידג'ט הוא רכיב JS נפרד ש:

1. טוען את רשימת נקודות החלוקה באמצעות בקשת AJAX ל-handler בשרת.
2. מציג את המפה (Yandex.Maps או Leaflet עם OpenStreetMap).
3. ממקם סמנים של נקודות חלוקה על המפה.
4. בלחיצה על סמן, מציג מידע על הנקודה.
5. בעת אישור הבחירה, שומר את נקודת החלוקה במאפיין ההזמנה.

אחסון נתוני נקודות חלוקה

אם נקודות החלוקה מגיעות משירות משלוחים (CDEK, Boxberry, דואר רוסי), הנתונים מסונכרנים מעת לעת. מבנה:

CREATE TABLE custom_pvz_points ( id SERIAL PRIMARY KEY, provider VARCHAR(50) NOT NULL, -- 'cdek', 'boxberry', 'pochta' external_id VARCHAR(100) NOT NULL, name VARCHAR(255) NOT NULL, address TEXT NOT NULL, city VARCHAR(100), lat DECIMAL(10,8) NOT NULL, lng DECIMAL(11,8) NOT NULL, schedule JSON, phone VARCHAR(50), is_active TINYINT DEFAULT 1, synced_at DATETIME, INDEX idx_city (city), INDEX idx_coords (lat, lng), UNIQUE KEY uk_provider_ext (provider, external_id) ); 

הסנכרון מופעל באמצעות סוכן ביטריקס (CREATE TABLE custom_pvz_points ( id SERIAL PRIMARY KEY, provider VARCHAR(50) NOT NULL, -- 'cdek', 'boxberry', 'pochta' external_id VARCHAR(100) NOT NULL, name VARCHAR(255) NOT NULL, address TEXT NOT NULL, city VARCHAR(100), lat DECIMAL(10,8) NOT NULL, lng DECIMAL(11,8) NOT NULL, schedule JSON, phone VARCHAR(50), is_active TINYINT DEFAULT 1, synced_at DATETIME, INDEX idx_city (city), INDEX idx_coords (lat, lng), UNIQUE KEY uk_provider_ext (provider, external_id) ); ) פעם ביום או לפי דרישה מלוח הבקרה של המנהל.

Handler בשרת (נקודת קצה AJAX)

בקשות מהווידג'ט מעובדות באמצעות \Bitrix\Main\Agent או /bitrix/services/main/ajax.php. ה-handler מקבל פרמטרים: עיר, קואורדינטות מרכז המפה, רדיוס, ספק משלוחים.

// Получаем ПВЗ в радиусе N км от координат $lat = (float)$_REQUEST['lat']; $lng = (float)$_REQUEST['lng']; $radius = (int)($_REQUEST['radius'] ?? 10); // км // Формула Haversine в SQL $sql = " SELECT *, ( 6371 * ACOS( COS(RADIANS({$lat})) * COS(RADIANS(lat)) * COS(RADIANS(lng) - RADIANS({$lng})) + SIN(RADIANS({$lat})) * SIN(RADIANS(lat)) ) ) AS distance FROM custom_pvz_points WHERE is_active = 1 HAVING distance <= {$radius} ORDER BY distance LIMIT 100 "; 

התוצאה נשמרת במטמון באמצעות local/ajax/pvz.php עם מפתח המבוסס על עיר וספק. רשימות נקודות החלוקה משתנות פעם ביום — מטמון של 12-24 שעות מוצדק, ומפחית את שאילתות מסד הנתונים ב-95%.

צד לקוח: אינטגרציה עם Yandex.Maps

// Инициализация карты ymaps.ready(function() { const map = new ymaps.Map('pvz-map', { center: [userLat, userLng], zoom: 12, controls: ['zoomControl', 'geolocationControl'] }); // Кластеризация меток при большом числе ПВЗ const clusterer = new ymaps.Clusterer({ preset: 'islands#invertedDarkBlueClusterIcons', groupByCoordinates: false, }); points.forEach(pvz => { const placemark = new ymaps.Placemark( [pvz.lat, pvz.lng], { balloonContentHeader: pvz.name, balloonContentBody: `${pvz.address}<br>${pvz.schedule}`, hintContent: pvz.name, }, { preset: 'islands#darkBlueIcon' } ); placemark.events.add('click', function() { selectPvz(pvz); }); clusterer.add(placemark); }); map.geoObjects.add(clusterer); }); 

כאשר נקודת חלוקה נבחרת באמצעות // Получаем ПВЗ в радиусе N км от координат $lat = (float)$_REQUEST['lat']; $lng = (float)$_REQUEST['lng']; $radius = (int)($_REQUEST['radius'] ?? 10); // км // Формула Haversine в SQL $sql = " SELECT *, ( 6371 * ACOS( COS(RADIANS({$lat})) * COS(RADIANS(lat)) * COS(RADIANS(lng) - RADIANS({$lng})) + SIN(RADIANS({$lat})) * SIN(RADIANS(lat)) ) ) AS distance FROM custom_pvz_points WHERE is_active = 1 HAVING distance <= {$radius} ORDER BY distance LIMIT 100 "; , שדות מוסתרים בטופס מתמלאים — כתובת המשלוח ומזהה חיצוני של הנקודה. נתונים אלה מועברים למאפיין ההזמנה \Bitrix\Main\Data\Cache או למאפיין מותאם אישית // Инициализация карты ymaps.ready(function() { const map = new ymaps.Map('pvz-map', { center: [userLat, userLng], zoom: 12, controls: ['zoomControl', 'geolocationControl'] }); // Кластеризация меток при большом числе ПВЗ const clusterer = new ymaps.Clusterer({ preset: 'islands#invertedDarkBlueClusterIcons', groupByCoordinates: false, }); points.forEach(pvz => { const placemark = new ymaps.Placemark( [pvz.lat, pvz.lng], { balloonContentHeader: pvz.name, balloonContentBody: `${pvz.address}<br>${pvz.schedule}`, hintContent: pvz.name, }, { preset: 'islands#darkBlueIcon' } ); placemark.events.add('click', function() { selectPvz(pvz); }); clusterer.add(placemark); }); map.geoObjects.add(clusterer); }); .

מיקום גיאוגרפי של המשתמש

כאשר הווידג'ט נפתח, אנו מבקשים את קואורדינטות המשתמש באמצעות selectPvz(). אם לא ניתנת הרשאה, אנו קובעים את העיר לפי IP (באמצעות השירות DELIVERY_LOCATION או הגיאולוקטור המובנה של ביטריקס UF_PVZ_ID). המפה ממוקדת בעיר שנמצאה.

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

לאחר בחירת נקודת חלוקה, הווידג'ט מעדכן את עלות המשלוח. נשלחת בקשה ל-handler שקורא ל-navigator.geolocation.getCurrentPosition() עם הנקודה שנבחרה — הוא מחזיר עלות וזמן משלוח. הנתונים מוצגים ליד כתובת נקודת החלוקה עוד לפני האישור. תמחור דינמי זה מפחית את נטישת עגלת הקניות ב-15%.

סנכרון עם ספקים

סוכן ביטריקס מפעיל סנכרון, מעדכן את Tariff.offices באמצעות getParcelShops, ומגדיר את GET /pickup-points ל-0 עבור נקודות שהוסרו.

מה כלול בעבודה (תוצרים)

• עיצוב סכימת נתונים ובחירת API למיפוי
• פיתוח צד שרת: אחסון נקודות חלוקה, handler AJAX, סוכני סנכרון
• פיתוח צד לקוח: מפה, סמנים, קיבוץ, מסננים
• אינטגרציה לתהליך התשלום: העברת נקודת החלוקה שנבחרה להזמנה, עדכון עלות המשלוח
• תיעוד והדרכה: מסירת קוד מקור, הוראות להוספת ספקים חדשים
• תמיכה טכנית למשך חודש לאחר המסירה

כל התוצרים מתועדים ומועברים ללקוח. יש לנו ניסיון של 5+ שנים בפיתוח 1C-Bitrix, השלמנו מעל 30 פרויקטים של מסחר אלקטרוני, ואנחנו שותף מוסמך של ביטריקס. עלות פרויקט טיפוסית מתחילה מ-$1,200, עם ROI טיפוסי תוך 6 חודשים בזכות הפחתת עלויות התמיכה.

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

לוחות זמנים

סה"כ: 2–3 שבועות. אם נדרשת אינטגרציה עם מספר ספקי משלוחים בו-זמנית, הוסף 3–5 ימים עבור כל אחד.

תיעוד Yandex.Maps: Yandex.Maps API. פרטים נוספים על האירוע custom_pvz_points בקורס הרשמי של 1C-Bitrix.