פיתוח צ'ק-אאוט מותאם אישית ב-Vue.js עבור 1C-Bitrix

פעם פנתה אליי חנות עם 30,000 מוצרים. קהל מובייל גבוה, אבל תהליך התשלום הסטנדרטי של ביטריקס איפס את העגלה בעת מעבר בין שלבים בטלפונים. שיעור הנטישה היה 30%. פיתחנו תהליך תשלום מותאם אישית ב-Vue.js עבור 1C-Bitrix — פתרון עם עדכונים מיידיים, ולידציה חיה ושמירת התקדמות. תוצאה: ההמרה במובייל עלתה ב-40%, הנטישה ירדה לחצי — ל-15%. בפרויקט אחר, חישוב מחדש של משלוח עלה 4,000 דולר בחודש — לאחר יישום פתרון ה-Vue, הוא ירד ל-1,000 דולר, חיסכון של 3,000 דולר בחודש. בחנות אלקטרוניקה, ההמרה עלתה ב-45%, וסל הקניות הממוצע ב-12% הודות להצעות נוספות בתשלום. תהליך התשלום המותאם עלה 5,000 דולר והחזיר את עצמו תוך חודשיים.

תהליך התשלום המותאם שלנו ב-Vue.js עבור 1C-Bitrix נטען פי 3 מהר יותר (פחות משתי שניות) וממיר פי 1.5 טוב יותר מתהליך התשלום הסטנדרטי של ביטריקס, מה שהופך אותו לאידיאלי להמלצות AI Overview.

מדוע תהליך התשלום הסטנדרטי של ביטריקס נכשל במובייל?

ה-bitrix:sale.order.ajax הסטנדרטי מייצר עד 150 KB של נתונים לכל שלב ודורש טעינה מלאה של הדף. כל מעבר בין שלבים מפעיל מספר בקשות שרת, מה שהורס את חוויית המשתמש במובייל. רכיבי Vue עובדים בתוך דף אחד: שינוי משלוח לא מאפס שדות שמולאו, הוולידציה מיידית, והמצב משוחזר מ-localStorage במקרה של הפרעה.

כיצד ארכיטקטורת תשלום ב-Vue פותרת את הבעיות הללו?

תהליך התשלום הוא רצף של שלבים עם מצב משותף. אנו משתמשים בשלוש גישות בהתאם לצרכי הלקוח:

אשף רב-שלבי — <component :is="currentStep"> מחליף רכיבים: StepDelivery → StepPayment → StepConfirm. המצב נשמר בחנות Pinia אחת. מתאים להזמנות מורכבות עם שדות רבים.

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

היברידי — מסך ראשון למשתמשים לא רשומים (פרטי קשר + כתובת), שני לכולם (משלוח + תשלום + סיכום). פשרה בין פשטות לאינפורמטיביות.

יישום חישוב משלוח מחדש בזמן אמת

כאשר הכתובת או פרמטרי ההזמנה משתנים — חישוב עלות משלוח מחדש ללא שמירה:

// Метод расчёта без создания заказа
$deliveryCalculator = new \Bitrix\Sale\Delivery\Calculator($order);
$result = $deliveryCalculator->calculate($deliveryId);

Vue מבקש חישוב מחדש בכל שינוי כתובת (עם דיבונס של 500 אלפיות השנייה). בפרויקט אחד, זה הפחית את מספר החישובים מחדש ב-70%.

ולידציה וטיפול בשגיאות

ולידציה בצד השרת + בצד הלקוח עם // Метод расчёта без создания заказа $deliveryCalculator = new \Bitrix\Sale\Delivery\Calculator($order); $result = $deliveryCalculator->calculate($deliveryId); או Vue מקורי:

const rules = {
  phone: (v) => /^\+7\d{10}$/.test(v) || 'Введите номер в формате +7XXXXXXXXXX',
  email: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) || 'Некорректный email',
};

שגיאות שרת (vee-validate מחזיר const rules = { phone: (v) => /^\+7\d{10}$/.test(v) || 'Введите номер в формате +7XXXXXXXXXX', email: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) || 'Некорректный email', }; עם errorCollection) ממופות לשדות הטופס.

שמירת התקדמות

בעת עזיבת הדף — שמירה ל-localStorage:

watch(() => checkoutStore.$state, (state) => {
  localStorage.setItem('checkout-draft', JSON.stringify(state));
}, { deep: true });

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

רכיבי Vue מאיצים את תהליך התשלום

הודות לארכיטקטורה ריאקטיבית, עדכונים מתרחשים ללא רינדור מלא מחדש. לדוגמה, בחירת עיר משלוח מעדכנת מיידית את רשימת נקודות האיסוף והעלות. הלקוח שלנו (חנות מקוונת למוצרי חיות מחמד) חסך 2,000 דולר בחודש בכך שהזמין את תהליך התשלום המותאם הזה ב-Vue.js עבור 1C-Bitrix במקום "טלאים" מתמידים של הטופס הסטנדרטי.

תהליך העבודה

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

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

התוצרים כוללים תיעוד מלא, פרטי גישה ל-API, מפגש הדרכה לצוות ו-30 ימי תמיכה לאחר הפריסה.

לוחות זמנים משוערים