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

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

רכיב העגלה הסטנדרטי של Bitrix sale.basket.basket מבצע טעינה מלאה של הדף בכל פעם שכמות מוצר משתנה או מוסרת. במכשירים ניידים, זה גורם לחוויית שימוש איטית—המסך מהבהב, ההקשר אובד, וההמרה יורדת ב-20–30%. נתקלנו בזה בפרויקט מסחר אלקטרוני בתחום האלקטרוניקה עם קטלוג של 50,000 מוצרים; לאחר יישום עגלת Vue עם עדכונים אופטימיים, נטישת העגלה ירדה בחצי.

עגלת Vue עם חנות Pinia ועדכונים אופטימיים פותרת את זה: כל השינויים מופיעים מיידית, בעוד שסנכרון השרת מתבצע ברקע באופן אסינכרוני. המשתמש רואה מיד את הסכום והכמות המעודכנים ללא המתנה לתגובת השרת. אם בקשה נכשלת, השינויים מתבטלים אוטומטית. זה מספק תגובתיות הדומה ליישומים ברמת SPA.

למה להחליף את העגלה הסטנדרטית ב-Vue.js?

הסיבות המרכזיות—מהירות תגובה ועומס נתונים מינימלי. הרכיב הסטנדרטי מרנדר מחדש את כל בלוק העגלה, כולל כותרת עליונה ותחתונה, בכל פעולה. עגלת Vue מעדכנת רק את האלמנט שהשתנה באמצעות DOM וירטואלי. בבדיקות על קטלוג של 10,000 מוצרים, זמן התגובה להוספת מוצר ירד מ-1.2 שניות ל-200 אלפיות השנייה—פי שש מהר יותר. בנוסף, עומס השרת יורד: במקום טעינה מלאה של העגלה, נשלחת רק בקשת AJAX אחת עם השדה שהשתנה.

איך לשלב עגלת Vue עם Bitrix?

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

// Добавить товар
$basket = \Bitrix\Sale\Basket::create(SITE_ID);
$item = $basket->createItem('catalog', $productId);
$item->setFields(['QUANTITY' => 1, 'CURRENCY' => 'RUB']);
$basket->save();
// AJAX-эндпоинты
POST /basket/add { productId, quantity, properties }
POST /basket/update { itemId, quantity }
POST /basket/remove { itemId }
GET /basket — получить текущее состояние корзины

REST API זמין גם לפרויקטים בענן: // Добавить товар $basket = \Bitrix\Sale\Basket::create(SITE_ID); $item = $basket->createItem('catalog', $productId); $item->setFields(['QUANTITY' => 1, 'CURRENCY' => 'RUB']); $basket->save(); // AJAX-эндпоинты POST /basket/add { productId, quantity, properties } POST /basket/update { itemId, quantity } POST /basket/remove { itemId } GET /basket — получить текущее состояние корзины , sale.basketitem.add, sale.basketitem.update. אנו משתמשים בשיטות אלה בשילוב עם אימות OAuth, שנוח במיוחד ליישומים ניידים ומימושים ללא ראש (headless).

ארכיטקטורת רכיבי עגלת Vue

מבנה הרכיבים מאורגן כך שכל מודול מטפל בחלק שלו בחוויית המשתמש:

CartApp.vue — корневой компонент, инициализирует Pinia store
├── CartDrawer.vue — боковая панель (slide-over) со списком товаров
├── CartIcon.vue — иконка корзины в шапке с мгновенным счётчиком
├── CartItem.vue — строка товара: фото, название, количество, цена, удаление
├── CartSummary.vue — итоговая сумма, промокод, кнопка "Оформить"
└── EmptyCart.vue — заглушка с предложением вернуться к покупкам

שימוש בחנות Pinia מבטיח שמצב העגלה נשמר במקום אחד ונגיש מכל רכיב ללא props:

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
    totalPrice: 0,
    discounts: [],
    isLoading: false,
  }),
  getters: {
    itemCount: (state) => state.items.reduce((sum, i) => sum + i.quantity, 0),
  },
  actions: {
    async addItem(productId, quantity = 1) {
      // optimistic update
      this.items.push({ productId, quantity, pending: true });
      try {
        const result = await cartApi.add(productId, quantity);
        this.syncFromServer(result.basket);
      } catch {
        this.items = this.items.filter(i => !i.pending);
      }
    }
  }
});

איך לסנכרן עגלה בין טאבים?

בעיה נפוצה: משתמש פותח את החנות בשני טאבים, מוסיף מוצר באחד—העגלה בשני הופכת למיושנת. אנו פותרים זאת באמצעות API של sale.basketitem.delete:

const channel = new BroadcastChannel('cart-sync');
channel.onmessage = (e) => {
  if (e.data.type === 'CART_UPDATED') cartStore.fetchCart();
};
// При каждом изменении корзины:
channel.postMessage({ type: 'CART_UPDATED' });

מנגנון זה נתמך על ידי כל הדפדפנים המודרניים ואינו דורש ספריות נוספות. גישה חלופית משתמשת ב-CartApp.vue — корневой компонент, инициализирует Pinia store ├── CartDrawer.vue — боковая панель (slide-over) со списком товаров ├── CartIcon.vue — иконка корзины в шапке с мгновенным счётчиком ├── CartItem.vue — строка товара: фото, название, количество, цена, удаление ├── CartSummary.vue — итоговая сумма, промокод, кнопка "Оформить" └── EmptyCart.vue — заглушка с предложением вернуться к покупкам עם אירוע export const useCartStore = defineStore('cart', { state: () => ({ items: [], totalPrice: 0, discounts: [], isLoading: false, }), getters: { itemCount: (state) => state.items.reduce((sum, i) => sum + i.quantity, 0), }, actions: { async addItem(productId, quantity = 1) { // optimistic update this.items.push({ productId, quantity, pending: true }); try { const result = await cartApi.add(productId, quantity); this.syncFromServer(result.basket); } catch { this.items = this.items.filter(i => !i.pending); } } } }); , אך BroadcastChannel אמין ומהיר יותר.

מקרה בוחן: חנות אלקטרוניקה עם 50,000 מוצרים

הלקוח התלונן על המרה נמוכה בנייד: 40% מהמשתמשים נטשו את העגלה לאחר הוספת המוצר הראשון בגלל עיכובים. רכיב Bitrix הסטנדרטי טען מחדש את בלוק העגלה בכותרת בכל הוספה, מה שגרם לעיכוב נראה לעין של 1–2 שניות בסמארטפון ממוצע. יישמנו עגלת Vue עם CartIcon (המונה מתעדכן מיידית דרך Pinia) ו-CartDrawer (חלונית נשלפת ללא טעינה מחדש). לאחר הפריסה:

• זמן התגובה להוספת מוצר ירד מ-1.2 שניות ל-180 אלפיות השנייה (פי 6.7 מהר יותר).
• נטישת העגלה ירדה ב-52%.
• המרת התשלום עלתה ב-18%.

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

מה כלול בעבודה?

1. ניתוח יישום העגלה הנוכחי וזיהוי צווארי בקבוק.
2. עיצוב ארכיטקטורת רכיבי Vue וחנות Pinia.
3. פיתוח נקודות קצה API בצד Bitrix (PHP).
4. אינטגרציה בין פרונטאנד לבקאנד באמצעות AJAX או REST.
5. כתיבת בדיקות יחידה ואינטגרציה.
6. תיעוד לשימוש ותצורת רכיבים.
7. הכשרת הצוות לתמיכה ושינויים.

לוחות זמנים

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

למה להפקיד פיתוח בידי מומחים מוסמכים?

הצוות שלנו כולל מפתחי Bitrix מוסמכים עם ניסיון של 8+ שנים. השלמנו עשרות פרויקטים של שילוב Vue.js במערכת האקולוגית של 1C-Bitrix. כל יישום עובר מחזור בדיקות מלא וסקירת קוד. אנו משתמשים בתבניות מוכחות: Vue.js, Pinia, מטמון מתויג, בדיקות יחידה. אנו מבטיחים שהעגלה תעבוד ביציבות גם תחת עומס גבוה. הזמן פיתוח עכשיו וקבל עגלה מודרנית שתגביר את ההמרה של החנות שלך.