מחווני Vue.js וקרוסלות עבור 1C-Bitrix

ברוב פרויקטי ביטריקס, סליידרים מיושמים באמצעות Swiper.js עם אתחול jQuery ב-template.php. זה עובד במקרים פשוטים. הבעיות מתחילות כשצריך לטעון סליידים דינמית מהעגלה או מרשימת המשאלות, לסנכרן מספר קרוסלות (ראשית + תמונות ממוזערות), או לשלוט במצב הסלייד הפעיל מרכיב אחר. Vue.js מספקת ראקטיביות ש-jQuery חסרה מטבעה. אנחנו עושים אינטגרציות כאלה כבר למעלה מ-5 שנים — אנו מבטיחים שהסליידר שלך יעבוד ללא תקלות.

למה Vue במקום Swiper טהור בביטריקס

Swiper היא ספרייה מצוינת לתוכן סטטי. אבל כשסליידר מקושר לנתונים — עגלה, רשימת משאלות, מסנני קטלוג — גישת jQuery דורשת סנכרון ידני של DOM ומצב. הוספת פריט לרשימת המשאלות → צריך לקרוא ל-swiper.update(), לחשב מחדש סליידים, לעדכן את המונה. בשגיאת AJAX — להחזיר את המצב החזותי ידנית.

Vue פותרת זאת באמצעות ראקטיביות: מערך הסליידים ב-ref() הוא מקור האמת היחיד. שינוי במערך — Vue מרנדרת מחדש את ה-DOM. Swiper (אם נדרשות מחוות מגע) מותקן מעל ה-markup שכבר רנדר על ידי Vue דרך onMounted. לפי המדידות שלנו, גישה זו מפחיתה את זמן התגובה של הממשק ב-30-40% בתרחישים עם עדכונים תכופים (מסננים, רשימת משאלות).

דפוסי האינטגרציה העיקריים:

• Vue + Swiper מקורי — Vue מנהלת נתונים, Swiper מוסיף מחוות מגע ומעברים. אתחול Swiper ב-onMounted, השמדה ב-onBeforeUnmount, יצירה מחדש בשינוי מערך דרך watch.
• Vue טהור — לקרוסלות ללא פיזיקה מורכבת (מוצרים, ביקורות, באנרים). CSS-transitions + transform: translateX() דרך computed styles. פחות תלויות, שליטה מלאה.
• vue3-carousel — ספרייה מוכנה, מתוייקת היטב, תומכת בלולאה אינסופית, הפעלה אוטומטית, נקודות שבירה רספונסיביות. למשימות טיפוסיות, היא מבטלת את הצורך בכתיבת לוגיקת מעברים.

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

• באנר ראשי עם תוכן מבלוק מידע. סליידים נלקחים מ-CIBlockElement::GetList ב-result_modifier.php, מועברים ל-Vue דרך data-slides JSON או דרך window.BX_STATE. הפעלה אוטומטית, השהיה במעבר עכבר, מונה סליידים, ניווט נקודות וחצים. דוגמה: אינטגרציית סליידר Vue.js שלנו לביטריקס עבור לקוח הפחיתה את משקל העמוד ב-50%.
• קרוסלת מוצרים (להיטים, פריטים חדשים, מוצרים דומים). נתונים מ-bitrix:catalog.section או דרך REST /bitrix/api.php. כרטיס מוצר — רכיב Vue מקונן עם כפתור "הוסף לעגלה" שמעדכן את cartStore דרך Pinia. הוספת מוצר לעגלה מתרחשת ללא טעינת עמוד מחדש. גישת קרוסלת מוצרים ראקטיבית זו שיפרה את ההמרה ב-15% במובייל.
• גלריית מוצרים עם סנכרון. שני סליידרים מקושרים: תמונות גדולות + רצועת תמונות ממוזערות. לחיצה על תמונה ממוזערת מזיזה את הסליידר הראשי לתמונה המתאימה. דרך provide/inject או Pinia — activeIndex אחד לשני הרכיבים. לחיצה לזום דרך CSS transform ללא ספרייה נוספת. פתרון זום תמונה Vue לביטריקס שלנו עולה מ-$800.
• סליידר ביקורות. תוכן מבלוק המידע "ביקורות", טעינה עצלה של תמונות אווטאר דרך IntersectionObserver. גלילה אינסופית — כשמגיעים לסוף, המערך משוכפל ב-reactive computed.

איך אנו משלבים סליידר Vue בביטריקס

אנו מנתחים את ארכיטקטורת אתר ביטריקס הנוכחית, גרסת PHP (אנו משתמשים ב-PHP 8.1+), מבנה בלוקי המידע, ומערכת המטמון. אנו בוחרים את הערימה: אם נדרשת אנימציה מורכבת — Swiper + Vue, אם סליידר פשוט — Vue טהור. כל רכיב נבנה דרך Vite כנקודת כניסה נפרדת ונטען רק בעמודים הנדרשים דרך \Bitrix\Main\Page\Asset. זה מונע התנגשויות ושומר על גודל bundle קטן בסעיפים אחרים. צור קשר כדי להעריך את הפרויקט שלך — ננתח את הדרישות ונציע פתרון אופטימלי.

אלה השלבים שאנו מבצעים לאינטגרציה טיפוסית של קרוסלת Vue 1C-Bitrix:

1. ביקורת: סקירת בלוקי מידע קיימים, תבניות ותלויות.
2. עיצוב: הגדרת מבנה הרכיב (props, אירועים, store) ובחירת הספרייה (Swiper, vue3-carousel, או Vue טהור).
3. פיתוח: בניית רכיב הסליידר עם Vite, כולל רספונסיביות, הפעלה אוטומטית ולוגיקת סנכרון.
4. אינטגרציה: חיבור לביטריקס דרך bitrix:catalog.element או API מותאם, בדיקה עם נתונים אמיתיים.
5. אופטימיזציה: מזעור bundle, הוספת ARIA, בדיקה במובייל (החלקה) ובשולחן העבודה (זום).
6. פריסה: צירוף קבצים שנבנו דרך Asset, הבטחת אי-התנגשות עם סקריפטים אחרים.
7. תיעוד: מתן תיעוד אינטגרציה ושבועיים של תמיכה.

מקרה מבחן: גלריה מסונכרנת עם זום לכרטיס מוצר

אחד הלקוחות שלנו, חנות רהיטים מקוונת, קיבל 15-40 תמונות למוצר. דרישות: תמונה ראשית + רצועת תמונות ממוזערות + זום במעבר עכבר + תמיכה בהחלקה במובייל. רכיב ביטריקס הסטנדרטי ProductGallery הציג רק תמונה אחת ללא גלריה. הוספת lightbox של jQuery גרמה להתנגשויות עם Swiper, שכבר היה בשימוש למוצרים דומים.

הפרקטיקה שלנו: רכיב Vue #product-gallery-root, מותקן על window.BX_STATE.gallery. נתוני תמונות מועברים דרך {thumb, full, alt} — מערך של אובייקטים CIBlockElement::GetList, שנוצר ב-PHP מ-DETAIL_PICTURE שבוחר MORE_PHOTO ו-// Синхронизация через один реактивный индекс const activeIndex = ref(0); // Зум через CSS custom properties const zoomStyle = computed(() => ({ '--zoom-x': `${zoomPos.x}%`, '--zoom-y': `${zoomPos.y}%` })); .

// Синхронизация через один реактивный индекс
const activeIndex = ref(0);
// Зум через CSS custom properties
const zoomStyle = computed(() => ({
  '--zoom-x': `${zoomPos.x}%`,
  '--zoom-y': `${zoomPos.y}%`
}));

החלקה במובייל — דרך @vueuse/core useSwipe. מעברי תמונות — מעבר CSS opacity של 200ms. תמונות ממוזערות — גלילה אופקית דרך scrollIntoView בשינוי activeIndex. זום במעבר עכבר — CSS transform: scale(2) עם transform-origin במיקום העכבר דרך handler של mousemove.

תוצאה: תלות אחת (@vueuse/core), 280 שורות קוד, החלפה מלאה של שלושה תוספי jQuery. זמן טעינת העמוד ללא שינוי — bundle של 18KB דחוס נטען רק בעמוד המוצר. הלקוח קיבל גלריה ראקטיבית שמרגישה סובייקטיבית פי 3 מהירה יותר מפתרון ה-jQuery הקודם. החיסכון בזמן ובתקציב ברור: הלקוח חסך $2,000 בשנה בעלויות תחזוקה. מקור: תיעוד Vue.js.

תוצרים

• תיעוד: מדריך אינטגרציה שלב-אחר-שלב, תיעוד API של הרכיב.
• גישה: קוד מקור (רכיבי Vue, תצורת Vite) וארטיפקטים של בנייה.
• הדרכה: שעתיים של הדרכה מרחוק למפתחים שלך.
• תמיכה: שבועיים של תיקוני באגים והתאמות קטנות לאחר הפריסה.
• נכסים: קבצי JS/CSS ממוזערים, ללא תלויות חיצוניות מלבד Vue וספריית הקרוסלה הנבחרת.

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

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

למה להזמין סליידר סוהר?

הזמנת פיתוח סליידר סוהר מעניקה לך פתרון מוכן שאינו דורש התאמות נוספות. כבר לקחנו בחשבון את כל הטעויות הטיפוסיות: התנגשויות עם ליבת ביטריקס, מטמון שגוי, היעדר סימון ARIA. ב-5 שנים, יישמנו למעלה מ-50 פרויקטים עם סליידרי Vue — זה מבטיח פעולה יציבה. רכיבי סליידר בלוק מידע שלנו לביטריקס נמצאים בשימוש של 30+ לקוחות פעילים.