בניית קונפיגורטור אינטראקטיבי עם Vue.js עבור 1C-Bitrix

קטלוגים מורכבים עם עשרות מאפיינים ואלפי פריטי SKU הם נקודת כאב קלאסית לאתרי מסחר אלקטרוני על 1C-Bitrix. הרכיב הסטנדרטי bitrix:catalog.item חסר את הגמישות לבניית קונפיגורטור אינטראקטיבי שבו משתמשים בוחרים פרמטרים, והמחיר והתמונות מתעדכנים באופן מיידי. אנחנו צוות מהנדסים עם ניסיון של למעלה מ-10 שנים עם Bitrix ו-Vue. במהלך השנים, יישמנו יותר מ-40 קונפיגורטורים ליצרני רהיטים, חלונות וחומרת מחשב. לאחר יישום קונפיגורטור, ערך ההזמנה הממוצע גדל בדרך כלל ב-20–30%, וההמרה להזמנה ב-15–25%.

למה Vue.js לקונפיגורטור?

בניגוד ל-jQuery, שגורם לעיכובים של 200–300 אלפיות השנייה, Vue.js מגיב לבחירת אפשרויות ב-30–50 אלפיות השנייה — הפרש של פי 6. המשתמש רואה את המחיר והתמונה החדשים ללא טעינת עמוד מחדש. ארכיטקטורת הרכיבים מפשטת את התחזוקה: קוד ה-UI מבודד מתבניות Bitrix.

איך אנחנו מארגנים נתונים מ-Bitrix

הקונפיגורטור עובד עם הצעות מסחריות — תת-סוג של b_iblock_element המקושר למוצר האב דרך מאפיין CML2_LINK. אנו שולפים את כל פריטי ה-SKU עם המאפיינים שלהם:

$offers = \CCatalogSKU::GetOffersList(
    [$productId],
    $offerIblockId,
    ['ACTIVE' => 'Y'],
    ['ID', 'PROPERTY_COLOR', 'PROPERTY_SIZE', 'CATALOG_PRICE_1', 'CATALOG_QUANTITY']
);

מעבירים אותם ל-Vue כ-$offers = \CCatalogSKU::GetOffersList( [$productId], $offerIblockId, ['ACTIVE' => 'Y'], ['ID', 'PROPERTY_COLOR', 'PROPERTY_SIZE', 'CATALOG_PRICE_1', 'CATALOG_QUANTITY'] ); :

{
  offers: [
    {
      id: 101,
      props: { color: 'red', size: 'M' },
      price: 1500,
      quantity: 5
    },
    {
      id: 102,
      props: { color: 'red', size: 'L' },
      price: 1500,
      quantity: 0
    },
  ],
  propertyDefs: {
    color: {
      name: 'Цвет',
      values: {
        red: { name: 'Красный', hex: '#FF0000' }
      }
    },
    size: {
      name: 'Размер',
      values: {
        M: { name: 'M' },
        L: { name: 'L' }
      }
    },
  }
}

לוגיקת בחירת SKU

הליבה היא פונקציה שמוצאת את ה-SKU בהתבסס על הפרמטרים שנבחרו:

const selectedProps = reactive({ color: null, size: null });
const matchedOffer = computed(() => {
  return offers.find(offer =>
    Object.entries(selectedProps).every(([key, val]) =>
      val === null || offer.props[key] === val
    )
  ) ?? null;
});
function getAvailableValues(propKey) {
  return offers
    .filter(offer =>
      Object.entries(selectedProps)
        .filter(([k]) => k !== propKey)
        .every(([k, v]) => v === null || offer.props[k] === v)
    )
    .map(offer => offer.props[propKey]);
}

שילובים לא זמינים (אזלו מהמלאי) מוצגים באפור אך לא מוסתרים: המשתמש רואה שהאפשרות קיימת. זה בונה אמון ומפחית החזרות.

עדכוני תמונות דינמיים

בעת בחירת צבע או חומר, התמונה הראשית משתנה. תמונות מחוברות לפריטי SKU דרך מאפיין מסוג "קובץ":

const currentImages = computed(() => {
  if (matchedOffer.value) {
    return matchedOffer.value.images;
  }
  return defaultImages;
});

מעברי תמונות מטופלים דרך window.__PRODUCT_CONFIG__ של Vue או אנימציות CSS.

קונפיגורטור עם פרמטרים תלויים

בחירת דגם → תצורות זמינות → אפשרויות זמינות. כל רמה מסננת את הבאה. מיושם דרך { offers: [ { id: 101, props: { color: 'red', size: 'M' }, price: 1500, quantity: 5 }, { id: 102, props: { color: 'red', size: 'L' }, price: 1500, quantity: 0 }, ], propertyDefs: { color: { name: 'Цвет', values: { red: { name: 'Красный', hex: '#FF0000' } } }, size: { name: 'Размер', values: { M: { name: 'M' }, L: { name: 'L' } } }, } } עם סינון מדורג של const selectedProps = reactive({ color: null, size: null }); const matchedOffer = computed(() => { return offers.find(offer => Object.entries(selectedProps).every(([key, val]) => val === null || offer.props[key] === val ) ) ?? null; }); function getAvailableValues(propKey) { return offers .filter(offer => Object.entries(selectedProps) .filter(([k]) => k !== propKey) .every(([k, v]) => v === null || offer.props[k] === v) ) .map(offer => offer.props[propKey]); } . לקונפיגורטורים מורכבים (הרכבת מחשב, רהיטים מותאמים אישית) — אשף היררכי, שבו כל שלב טוען אפשרויות תקפות לשלב הבא דרך AJAX.

איך לפתור את בעיית טעינת אלפי פריטי SKU?

הטכניקה המרכזית היא טעינה עצלה. אנו טוענים רק את האפשרויות הזמינות לשלב הנוכחי. בפרויקט ליצרן חלונות עם כמה אלפי פריטי SKU, הקטנו את גודל הבקשה הראשונית מ-800 KB ל-15 KB — שיפור מהירות של פי 5. בנוסף, אנו משתמשים במטמון מתויג של Bitrix: נתוני מחיר ומלאי נשמרים במטמון עם קישורי בלוק מידע ומנוקים בעת שינויים.

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

יצרן חלונות (הלקוח שלנו): קונפיגורטור עם 6 פרמטרים, כמה אלפי פריטי SKU. בתחילה כל הנתונים נטענו בפתיחת העמוד (800 KB JSON). הפתרון — טעינה עצלה: בכל שלב באשף, אנו מבקשים רק את הערכים התקפים לפרמטר הבא עם מחירים עדכניים מהשרת. גודל הבקשה הראשונית ירד ל-15 KB, מהירות הטעינה גדלה פי 5. ההשקעה החזירה את עצמה תוך 4 חודשים בזכות עלייה של 30% בערך ההזמנה הממוצע — הכנסה נוספת מאפשרויות הגיעה ל-1.2 מיליון רובל בחודש הראשון. חיסכון מהחזרות — 400 אלף רובל.

יצרן חומרת מחשב: קונפיגורטור שרתים עם 12 פרמטרים. העמוד נטען ב-8 שניות. לאחר יישום טעינה עצלה ומטמון — 1.2 שניות. ההמרה להזמנה עלתה ב-25%. ערך ההזמנה הממוצע עלה ב-18,000 רובל.

השוואה: jQuery לעומת Vue.js

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

1. ניתוח מבנה הקטלוג והמאפיינים הנוכחיים ב-Bitrix
2. עיצוב סכמת נתונים עבור Vue
3. פיתוח רכיבי קונפיגורטור ב-Vue.js
4. אינטגרציה עם Bitrix (שליפת SKU, מחירים, תמונות)
5. הגדרת מטמון מתויג
6. תיעוד API ומבנה נתונים
7. הכשרת עובדים לשימוש בקונפיגורטור
8. 3 חודשי תמיכה טכנית

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

מעל 10 שנים בשוק, יותר מ-40 פרויקטים שהושלמו, מומחי Bitrix מוסמכים. הקוד עובר בדיקה וניסויים. קבלו ייעוץ — נדון בפרטי הפרויקט שלכם. צרו קשר כדי לדון בפרויקט שלכם ולהכין הצעה מסחרית.

Vue.js — ויקיפדיה 1C-Bitrix — ויקיפדיה