פיתוח תהליך תשלום מותאם אישית ב-Vue.js עבור 1C-Bitrix

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

התוצאה: המרת המובייל עלתה ב-40%, הנטישה הצטמצמה בחצי ל-15%. בפרויקט אחר, חישוב מחדש של משלוח עלה בעלות שחושבה לאחר ביקורת מדי חודש — לאחר יישום פתרון ה-Vue, היא ירדה לעלות שחושבה לאחר ביקורת, וחסכה עלות שחושבה לאחר ביקורת מדי חודש.

בחנות מקוונת לאלקטרוניקה, ההמרה עלתה ב-45%, והערך הממוצע להזמנה ב-12% בזכות הצעות נוספות בתהליך התשלום. תהליך התשלום המותאם אישית עלה בעלות שחושבה לאחר ביקורת והחזיר את עצמו תוך חודשיים.

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

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

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

רכיבי Vue פועלים בתוך עמוד יחיד: שינוי משלוח אינו מאפס שדות שמולאו, האימות מיידי, והמצב משוחזר מ-localStorage בעת הפסקה.

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

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

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

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

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

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

// Calculation method without order creation
$deliveryCalculator = new \Bitrix\Sale\Delivery\Calculator($order);
$result = $deliveryCalculator->calculate($deliveryId);

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

אימות וטיפול בשגיאות

אימות בצד השרת + בצד הלקוח עם vee-validate או Vue מקורי:

const rules = {
  phone: (v) => /^\+7\d{10}$/.test(v) || 'Enter phone in format +7XXXXXXXXXX',
  email: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) || 'Invalid email',
};

שגיאות שרת (order.save() מחזיר \Bitrix\Main\Result עם errorCollection) ממופות לשדות הטופס.

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

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

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

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

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

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

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

תהליך העבודה

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

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

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

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