אינפוגרפיקות מוצר אוטומטיות ל-1C-Bitrix

מנהל קטלוג מעלה 3,000 כרטיסי מוצר מ-1C — כל אחד עם מאפיינים: הספק, מידות, חומר, תאימות. כל זה יושב במאפייני infoblock כטקסט פשוט. קונה פותח את הכרטיס ורואה קיר של מספרים ללא הקשר. ההמרה נמוכה מהרגיל, ההחזרות גבוהות יותר. אנו פותרים בעיה זו: אנו מתרגמים נתונים טכניים לשפה ויזואלית ישירות בכרטיס המוצר. הניסיון שלנו — 7 שנים באינטגרציות Bitrix, מעל 50 פרויקטים עם אוטומציה של קטלוג. אינפוגרפיקת מוצר עבור 1C-Bitrix אינה משימת עיצוב אלא משימה הנדסית הדורשת ארכיטקטורת נתונים ותבניות נכונות. לפי מקרה בוחן, הטמעת אינפוגרפיקה מגדילה את ההמרה ב-30–40%. החזר ROI על אוטומציה הוא 2–3 חודשים. חיסכון בתקציב יכול להגיע ל-80% עבור קטלוגים גדולים.

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

כיצד פועל אחסון נתונים לאינפוגרפיקה

infoblock סטנדרטי (b_iblock_element, b_iblock_element_prop_s*, b_iblock_element_prop_m*) מאחסן מאפיינים כמחרוזות או כהפניות למילונים. אינפוגרפיקה דורשת ערכים מספריים מובנים עם יחידות וטווחים "נורמליים".

תוכנית מעשית היא להוסיף מאפיינים נוספים מסוג "רשימה" ו"מחרוזת" ל-infoblock של המוצר:

• INFOGRAPHIC_TYPE — סוג תבנית אינפוגרפית (bar, gauge, comparison, icon-list)
• INFOGRAPHIC_VALUES — JSON עם מפתחות וערכים לעיבוד
• INFOGRAPHIC_TEMPLATE — מזהה תבנית חזותית

עבור קטלוגים שבהם מאפיינים כבר חיים במאפיינים נפרדים (POWER_W, WEIGHT_KG, DIMENSIONS), אין צורך בשכבת ביניים — הנתונים נלקחים ישירות.

מדוע עיבוד בצד השרת עדיף על פני עיבוד בצד הלקוח?

השווה בין שתי גישות. עיבוד SVG בצד השרת ב-PHP מהיר פי 2–3 עבור תמונות סטטיות: ניתן לשמור אותו במטמון ברכיב ואינו דורש טעינת ספריות JS. עיבוד בצד הלקוח באמצעות D3.js או Chart.js מספק אינטראקטיביות, אך מנוע החיפוש רואה רק מאפיינים, לא את התמונה. גישה היברידית — SVG סטטי מעיבוד בצד השרת + אנימציית hover ב-JS — היא אופטימלית עבור רוב חנויות המקוונות.

// /local/components/custom/catalog.infographic/templates/.default/template.php $power = $arResult['PROPERTIES']['POWER_W']['VALUE']; $maxPower = $arResult['INFOGRAPHIC_SCALE']['max']; $percent = min(100, round(($power / $maxPower) * 100)); // рендер SVG progress-bar с $percent 

תוצאה — SVG בגוף העמוד. נשמר במטמון באמצעות מנגנון // /local/components/custom/catalog.infographic/templates/.default/template.php $power = $arResult['PROPERTIES']['POWER_W']['VALUE']; $maxPower = $arResult['INFOGRAPHIC_SCALE']['max']; $percent = min(100, round(($power / $maxPower) * 100)); // рендер SVG progress-bar с $percent הסטנדרטי.

תבניות אינפוגרפיות ויישומן

כל תבנית היא קובץ PHP/SVG נפרד בתיקייה $this->SetResultCacheKeys(...). הבחירה נקבעת על ידי מאפיין /local/components/custom/catalog.infographic/templates/ של האלמנט או סוג ה-infoblock.

יצירה אוטומטית במהלך ייבוא המוני

נקודת הכאב העיקרית אינה ציור ידני של אינפוגרפיקה עבור 10 פריטים, אלא עדכונם כאשר מאפיינים משתנים במהלך החלפה עם 1C. הפתרון הוא מטפל אירועים עבור INFOGRAPHIC_TYPE:

AddEventHandler('iblock', 'OnAfterIBlockElementUpdate', 'updateInfographicCache'); function updateInfographicCache($arFields) { // сбрасываем кеш компонента для этого элемента BXClearCache(true, '/iblock/infographic/' . $arFields['ID']); // если инфографика хранится как изображение — ставим в очередь регенерацию \Bitrix\Main\Application::getInstance()->addBackgroundJob( 'CustomInfographic::regenerate', [$arFields['ID']] ); } 

OnAfterIBlockElementUpdate — סוכן רקע שאינו מאט את שמירת האלמנט בניהול ואינו חוסם החלפת 1C בעת ייבוא אצווה של אלפי פריטים.

כיצד ליישם אינפוגרפיקה ב-5 שלבים

1. ביקורת מבנה מאפיינים — קבע אילו מאפיינים דורשים ויזואליזציה ונרמל אותם.
2. עיצוב תבניות — צור תבניות SVG עבור כל סוג מוצר (עמודות, מד, מכ"ם).
3. הטמעת רכיב — כתוב רכיב יצירה מותאם אישית עם מטמון.
4. שילוב בכרטיס המוצר — כלול את הרכיב בתבנית AddEventHandler('iblock', 'OnAfterIBlockElementUpdate', 'updateInfographicCache'); function updateInfographicCache($arFields) { // сбрасываем кеш компонента для этого элемента BXClearCache(true, '/iblock/infographic/' . $arFields['ID']); // если инфографика хранится как изображение — ставим в очередь регенерацию \Bitrix\Main\Application::getInstance()->addBackgroundJob( 'CustomInfographic::regenerate', [$arFields['ID']] ); } .
5. בדיקה והשקה — ודא עדכון כאשר מאפיינים משתנים באמצעות אירוע.

מה אינפוגרפיקה אוטומטית נותנת?

אוטומציה מבטלת ציור ידני: עבור 500 מוצרים, חיסכון בזמן מסתכם ב-40 שעות. לאחר ההתקנה, המערכת שומרת על רלוונטיות בזמן אמת — 95% מהכרטיסים מתעדכנים ללא עיכובים. בעת קנה מידה ל-20,000 מוצרים, זמן היצירה לכל אינפוגרפיקה אינו עולה על 2 מילישניות.

שילוב עם כרטיס המוצר

בתבנית הרכיב addBackgroundJob, כלול רכיב משנה מותאם אישית:

// detail.php или template.php основного компонента $APPLICATION->IncludeComponent( 'custom:catalog.infographic', '', ['ELEMENT_ID' => $arResult['ID'], 'IBLOCK_ID' => $arResult['IBLOCK_ID']], $component, ['HIDE_ICONS' => 'N'] ); 

מיקום — באמצעות CSS Grid או Flexbox. פתרון טיפוסי: אינפוגרפיקה מתחת לתיאור המוצר, מעל בלוק המאפיינים.

מה כוללת העבודה שלנו?

• ביקורת מבנה מאפייני infoblock הנוכחי ופיתוח סכמה לאינפוגרפיקה.
• יצירת תבניות SVG (עמודות, מד, השוואה, רשימת אייקונים) עבור המבחר שלך.
• הטמעת רכיב יצירה עם מטמון.
• הגדרת יצירה אוטומטית במהלך החלפת 1C באמצעות אירועים וסוכני רקע.
• שילוב עם כרטיס המוצר ועיצוב.
• הוראות לניהול תבניות ושבועיים של תמיכה.

לוח זמנים

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