פילטר מותאם אישית ב-1C-Bitrix עם Vue.js: מהיר וגמיש
בניית פילטר מותאם אישית לקטלוגים של 1C-Bitrix באמצעות Vue.js
הפילטר הסטנדרטי של Bitrix AJAX טוען מחדש את הדף בכל שינוי מאפיין. בקטלוג עם יותר מ-30 מאפיינים ניתנים לסינון, כל לחיצה משמעותה המתנה של 1–3 שניות. משתמשים עוזבים, ההמרה יורדת. אנו מיישמים פילטר מוצרים מותאם אישית על Vue.js. הוא פועל פי 5 מהר יותר מהסטנדרטי.
זמן התגובה הוא 200–600 אלפיות השנייה. הפריימוורק מספק ריאקטיביות ללא ציורים מחדש. אינדקס הפאסטים של Bitrix מבטיח נתונים מהירים. עומס השרת מופחת פי 5. מהירות הסינון עולה פי 10. יש לנו יותר מ-5 שנות ניסיון ב-Bitrix וב-Vue. השלמנו יותר מ-50 פרויקטים.
בממוצע, אנו מפחיתים את שיעורי הנטישה ב-15% ומגבירים את ההמרה ב-20%. לאחר היישום, עלויות האחסון ירדו ב-30% עקב הפחתת עומס השרת, וחוסכות עד 500 דולר לחודש עבור קטלוג טיפוסי בגודל בינוני.
עלות הפיתוח הממוצעת נעה בין 2,000 ל-5,000 דולר, ולקוחות בדרך כלל רואים החזר על ההשקעה תוך 3 חודשים עקב עלייה בהמרה.
Facet Index Foundation
Bitrix שומר ערכים מחושבים מראש בטבלאות מיוחדות עם ספירות התאמה עבור כל ערך מאפיין. במקום חישוב מחדש מלא, אנו משתמשים בנתונים אלה דרך שיטת GetFacets. זה מספק תגובה מיידית ללא עומס על השרת.
עבור מאפיינים עם ערכים רבים (צבעים, מותגים, גדלים), שאילתת SQL בודדת לטבלאות המאונדקסות מספיקה. זה חוסך במשאבי השרת.
כיצד לשלב את הפילטר?
- ניתוח מבנה הקטלוג – זיהוי מאפיינים ניתנים לסינון והסוגים שלהם.
- הכנת נקודות קצה של API – יצירת נקודות קצה REST שמחזירות נתוני פאסטים ומוצרים מסוננים.
- פיתוח רכיבי Vue – בניית תיבות סימון, סליידרים ווידג'טים נוספים.
- יישום סנכרון כתובות URL – שמירת מצב הפילטר בכתובת URL לשיתוף ולהיסטוריית הדפדפן.
- בדיקה והפצה – הבטחת תאימות עם מטמון ומכשירים ניידים.
כיצד מסנן המוצרים של Vue משפר את הביצועים?
על ידי שימוש באינדקס הפאסטים ועדכונים אסינכרוניים, המסנן נמנע מטעינות מחדש של הדף כולו. השהיה (Debounce) של 400 מ"ש מפחיתה בקשות לשרת. זמן התגובה הוא 200–600 מ"ש לעומת 1–3 שניות במסנן הסטנדרטי. הדבר מביא לשיפור מהירות פי 5 ולשיעורי נטישה נמוכים יותר.
ארכיטקטורה טכנית
סנכרון URL
הפילטר מסנכרן את המצב עם ה-URL – כדי לאפשר שיתוף קישורים והתנהגות נכונה של כפתור החזרה. אנו משתמשים במפתחות מקוצרים כדי להפחית את אורך ה-URL: לדוגמה, s[]=S&s[]=M במקום מערכים מפורטים. זה נותן קישור קומפקטי לרשתות חברתיות.
ניהול מצב עם Pinia
Pinia מספקת חנות טיפוסית עם תמיכה ב-devtools ובתוספים. עבור הפילטר, ערכים נבחרים, פאסטים ומצב טעינה חייבים להתעדכן באופן אטומי. קוד חנות לדוגמה משתמש בחנות Pinia עם פעולות להחלת הפילטר ולעדכון המצב.
סוגי ווידג'טים לפילטר
אנו מיישמים ווידג'טים שונים: תיבות סימון עבור מאפייני רשימה (צבע, מותג, חומר), סליידר טווח מחירים, כפתורי רדיו עבור ערכים בלעדיים הדדית (מצב המוצר), רכיב רקורסיבי עבור עץ קטגוריות, וחיפוש בתוך הפילטר עבור רשימות ארוכות (100+ ערכים). כל הרכיבים רספונסיביים וניתנים להתאמה בקלות.
אילו ווידג'טים של סינון זמינים?
ווידג'טים אופייניים כוללים תיבות סימון, סליידר מחיר, כפתורי רדיו, עץ קטגוריות וחיפוש. ניתן להוסיף ווידג'טים נוספים כמו לוח שנה או סליידר צעדים לפי דרישה.
ביצועים ודוגמאות
השוואה: פילטר סטנדרטי מול Vue
| קריטריון | smart.filter סטנדרטי | פילטר Vue |
|---|---|---|
| מהירות תגובה | 1–3 שניות (טעינת עמוד) | 200–600 מ״ש (אסינכרוני) |
| תמיכה בווידג׳טים מותאמים אישית | מוגבלת | גמישות מלאה |
| תאימות URL | URL מלא אך מסורבל | URL קומפקטי, מפתחות קצרים |
| עומס על השרת | גבוה (טעינה מחדש מלאה) | נמוך (debounce, נתונים חלקיים) |
| התאמה למובייל | דורש שינויים | רכיבים רספונסיביים מוכנים לשימוש |
פילטר Vue עובד פי 5 מהר יותר ומפחית את העומס על השרת פי 5. השקעת פיתוח טיפוסית, אשר עלותה מחושבת לאחר אבחון, מחזירה את עצמה בתוך חודשים באמצעות המרה גבוהה יותר ועלויות אחסון נמוכות יותר.
דוגמה מעשית: מרקטפלייס לבגדים
קטלוג עם סינון לפי מידה, צבע (50+ צבעים), מותג (200+ מותגים), חומר ומחיר. הפילטר הסטנדרטי של Bitrix יצר כתובות URL באורך של למעלה מ-500 תווים וטען מחדש את כל העמוד. פילטר Vue משתמש בסריאליזציה של URL עם מפתחות מקוצרים ו-debounce של 400 מ״ש. שינויים אינם גורמים לטעינות מחדש.
הפאסטים מתעדכנים באופן אסינכרוני. תיבות סימון ללא התאמות אינן מואפרות. זמן תגובה – 200–600 מ״ש. שיעור הנטישה ירד ב-15%, ההמרה עלתה ב-20%.
תהליך הפיתוח
תוצרים
התוצרים שלנו כוללים:
- תיעוד: תיעוד API ודוגמאות שימוש
- גישה: קוד מקור והגדרת פאנל ניהול
- הדרכה: עד שעתיים לצוות שלכם
- תמיכה: חודש סיוע לאחר העלייה לאוויר
- ניתוח של מבנה הקטלוג והמאפיינים הנוכחיים
- עיצוב נקודות קצה של API בהתבסס על אינדקס הפאסטים
- פיתוח רכיבי Vue.js (סינון, עימוד, מיון)
- סנכרון כתובות URL וטיפול בהיסטוריית הדפדפן
- אינטגרציה עם מטמון מורכב ומטמון מתויג
לוחות זמנים משוערים
| אפשרות | לוח זמנים |
|---|---|
| סינון בסיסי (תיבות סימון, מחיר) | 4 עד 7 ימי עסקים |
| עם פאסטים, עץ קטגוריות וסנכרון URL | 8 עד 12 ימי עסקים |
| אינטגרציה עם קטלוג Vue קיים | 3 עד 5 ימי עסקים (נוסף) |
צרו קשר כדי להעריך את הקטלוג שלכם – נכין הצעה מסחרית.