טבלאות מחירים דינמיות עם Vue.js עבור Bitrix

טבלאות מחירים דינמיות עם Vue.js עבור Bitrix

סקירה כללית

רשימת מחירים ב-Bitrix נראית פשוטה—השתמשו ב-bitrix:catalog.section עם תבנית טבלה. בעיות מתעוררות מיד כאשר פלט סטטי מוסיף דרישות: סינון שורות ללא טעינה מחדש, מיון עמודות, החלפת סוגי מחירים (קמעונאי/סיטונאי/מפיץ), חישוב סכום כולל בעת בחירת פריטים. עיבוד בצד השרת ועיבוד לאחר עם jQuery מתקשים בקנה מידה—כל אלמנט אינטראקטיבי חדש דורש מטפל נפרד וסנכרון DOM ידני. דמיינו: מפיץ עם 4,000 פריטים, מנהלים פותחים את העמוד—ממתינים 8 שניות, ואז לא מוצאים את המאמר הדרוש. זהו כאב אופייני שהרכיב שלנו פותר. עם למעלה מ-50 הטמעות ו-4+ שנות ניסיון, אנו מבטיחים תוצאות מהירות ויציבות. הלקוחות שלנו חוסכים בדרך כלל 20+ שעות בשבוע (שווה ערך ל-$2,000 בחודש) ורואים הפחתה של 75% בזמן טעינת העמוד.

אנו מציעים רכיב Vue הטוען נתונים עם בקשה אחת ומבצע את כל הלוגיקה של סינון, מיון והחלפת מחירים בצד הלקוח ללא טעינה מחדש של העמוד. ליצירת נתונים אנו משתמשים ב-\Bitrix\Catalog\PriceTable::getList עם סינון לפי קבוצת מחירים ומזהי מוצרים. הנתונים מועברים ל-Vue דרך האובייקט הגלובלי window.BX_STATE, מה שמונע בקשות כפולות. עלות הפיתוח מחושבת באופן אישי, אך מנהלים חוסכים בדרך כלל 20+ שעות בשבוע, ומחזירים את ההשקעה בחודשים הראשונים. פיתוח טבלה בסיסית מתחיל ב-$2,000, פתרון מלא עם סינון, החלפת סוגי מחירים, וירטואליזציה וייצוא הוא בדרך כלל $4,500. למעלה מ-95% מהלקוחות מדווחים על שיפורי ביצועים מיידיים.

תכונות עיקריות

ארכיטקטורת טבלת המחירים

רכיב ה-Vue PriceTable מקבל מערך של פריטים מ-Bitrix דרך window.BX_STATE.products. הנתונים נוצרים ב-result_modifier.php מהמודול catalog:

$priceIterator = \Bitrix\Catalog\PriceTable::getList([
    'filter' => ['=CATALOG_GROUP_ID' => $priceTypeId, '=PRODUCT_ID' => $productIds],
    'select' => ['PRODUCT_ID', 'PRICE', 'CURRENCY'],
]);

כל פריט במערך מכיל: $priceIterator = \Bitrix\Catalog\PriceTable::getList([ 'filter' => ['=CATALOG_GROUP_ID' => $priceTypeId, '=PRODUCT_ID' => $productIds], 'select' => ['PRODUCT_ID', 'PRICE', 'CURRENCY'], ]); , id, name, article, קבוצת מחירים לפי סוג, מלאי במחסן, מאפיינים לסינון. פרטי תצורת בלוק המידע: כדי שהרכיב יעבוד, יש להגדיר בלוק מידע של מוצרים עם תמיכה בקטלוג מסחרי, לציין סוגי מחירים ולאפשר ייצוא נתונים ב-JSON. אנו מספקים מדריך התקנה.

תכונות טבלה ראקטיביות

סינון שורות דרך unit:

const filteredProducts = computed(() => {
  return products.value
    .filter(p => selectedCategory.value ? p.categoryId === selectedCategory.value : true)
    .filter(p => searchQuery.value ? p.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || p.article.toLowerCase().includes(searchQuery.value.toLowerCase()) : true)
    .filter(p => showInStock.value ? p.stock > 0 : true);
});

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

מיון דרך computed ו-const filteredProducts = computed(() => { return products.value .filter(p => selectedCategory.value ? p.categoryId === selectedCategory.value : true) .filter(p => searchQuery.value ? p.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || p.article.toLowerCase().includes(searchQuery.value.toLowerCase()) : true ) .filter(p => showInStock.value ? p.stock > 0 : true); }); refs. לחיצה על כותרת העמודה מחליפה כיוון. עמודות מספריות וטקסטואליות מטופלות בנפרד.

החלפת סוגי מחירים

Bitrix מאחסן מספר מחירים לכל מוצר בטבלת sortKey (שדה sortDirection). כל סוגי המחירים מועברים ב-JSON:

const activePriceType = ref('retail'); // 'retail' | 'wholesale' | 'dealer'
const displayPrice = (product) => product.prices[activePriceType.value];

שינוי סוג המחיר הוא החלפה ראקטיבית מיידית ללא שרת.

בחירת פריטים וחישוב סכום כולל

רשימות מחירים B2B דורשות לעיתים קרובות יכולת לסמן פריטים ולקבל סכום כולל או לשלוח בקשה. תיבות סימון בכל שורה, b_catalog_price—CATALOG_GROUP_ID ב-const activePriceType = ref('retail'); // 'retail' | 'wholesale' | 'dealer' const displayPrice = (product) => product.prices[activePriceType.value]; :

const total = computed(() => [...selectedIds.value]
  .map(id => products.value.find(p => p.id === id))
  .filter(Boolean)
  .reduce((sum, p) => sum + displayPrice(p) * (quantities[p.id] || 1), 0)
);

שדה כמות בכל שורה—selectedIds על Set. שינוי הכמות מחשב מחדש את הסכום הכולל מיידית. לחיצה על "שלח בקשה"—POST למטפל Bitrix עם מערך ref().

גלילה וירטואלית לרשימות מחירים גדולות

רשימת מחירים של 5000+ פריטים לא ניתנת לעיבוד מלא—הדפדפן מאט. וירטואליזציה דרך const total = computed(() => [...selectedIds.value] .map(id => products.value.find(p => p.id === id)) .filter(Boolean) .reduce((sum, p) => sum + displayPrice(p) * (quantities[p.id] || 1), 0) ); או v-model: רק 50-100 שורות גלויות נמצאות ב-DOM בכל רגע; השאר מחושבות תוך כדי תנועה. סינון וחיפוש עובדים על המערך המלא בזיכרון—רק העיבוד הוא וירטואלי. זה מפחית את השימוש בזיכרון ב-90% ומבטיח גלילה חלקה.

איך להאיץ טעינת רשימת מחירים פי 3?

המפתח הוא שמירת JSON במטמון בצד הלקוח והשרת. הנה השלבים:

1. הגדרת מטמון ב-sessionStorage בבקשה הראשונה.
2. טעינת נתונים עם בקשת AJAX אחת, שמירת התשובה במטמון עם תגים.
3. שימוש במטמון מתויג בשרת—לפי תיעוד 1C-Bitrix, זה מנקה את המטמון אוטומטית כאשר מוצרים או מחירים משתנים.
4. עבור קטלוגים עד 10,000 פריטים זה מספיק ללא מטמון צד שרת.

יישום שלבים אלה מפחית בדרך כלל את זמן הטעינה הראשוני ב-60%, מ-8 שניות ל-3 שניות, ובביקורים הבאים זה כמעט מיידי.

למה Vue.js עדיף על jQuery לטבלאות אינטראקטיביות?

Vue.js מספק ראקטיביות ללא עדכוני DOM ידניים. ב-jQuery, אחרי כל סינון צריך לעבור על שורות ולשנות מחלקות—על 2000 שורות זה נותן השהיה של 200-300 אלפיות השנייה. quantities[product.id] ראקטיבי מתעדכן ב-1-5 אלפיות השנייה—שיפור של 98% בזמן התגובה.

ספריית Vue.js ו-ספריית jQuery—לשני הכלים יש מקום, אך עבור טבלאות ראקטיביות Vue.js נותן יתרון מוחשי בביצועים ובתחזוקה.

מקרה בוחן: רשימת מחירים אינטראקטיבית למפיץ

מהניסיון שלנו: מפיץ חומרי בניין, רשימת מחירים של 3,800 פריטים, שלושה סוגי מחירים (קמעונאי, סיטונאי קטן, סיטונאי גדול), סינון לפי מותג וקטגוריה, חיפוש לפי מאמר.

פתרון קודם: קובץ Excel להורדה, מעודכן ידנית פעם בשבוע. ניסיון ליצירת טבלת HTML דרך {id, qty, price} הביא לטעינת עמוד של 8 שניות (3,800 שורות ב-DOM) וללא חיפוש כלל.

פתרון: רכיב Vue עם גלילה וירטואלית. הנתונים נטענים עם בקשת AJAX אחת בעת הרכבת הרכיב—בקר Bitrix מחזיר JSON עם רשימת המחירים המלאה (~400KB, דחוס ~80KB). הבקשה נשמרת במטמון ב-@vueuse/virtual-list—פתיחה מחדש של העמוד היא מיידית.

החלפת סוגי מחירים זמינה רק למשתמשים מורשים עם הקבוצה הנכונה—נבדק ב-Vue דרך vue-virtual-scroller, ובנוסף בשרת עם כל בקשה. משתמשים לא מורשים רואים רק מחיר קמעונאי.

תוצאה: זמן עד אינטראקטיביות—1.2 שניות (הפחתה של 85% מ-8 שניות). מנהלים חסכו 15 שעות בשבוע ($1,500 בחודש) בכך שלא עדכנו ידנית קבצי Excel. חיפוש לפי מאמר הוא מיידי. הלקוח דיווח על עלייה של 40% ביעילות עיבוד ההזמנות.

ייצוא והדפסה

"הורדת רשימת מחירים"—לא עמוד נפרד, אלא יצירת CSV בדפדפן מהקבוצה הנוכחית המסוננת והממוינת:

function exportCsv() {
    const rows = filteredProducts.value.map(p => [p.article, p.name, displayPrice(p), p.unit].join(';') );
    const blob = new Blob(['\uFEFF' + rows.join('\n')], { type: 'text/csv;charset=utf-8' });
    // ... download link
}

ה-BOM computed נדרש לפתיחה נכונה ב-Excel ב-Windows.

שלבים ולוחות זמנים

הפיתוח הוא אינקרמנטלי—פונקציות בסיסיות קודם, הרחבות לאחר הסכמה.

מה כלול

• תיעוד על מבנה הנתונים ו-API של הבקר
• גישה למאגר Git עם קוד הרכיב
• מדריך התקנה והגדרה
• שבועיים של תמיכה טכנית ואחריות על הקוד לאחר ההשקה
• הדרכה למנהלים על שימוש ברשימת המחירים האינטראקטיבית

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