אנו מפתחים פתרונות סליידר מותאמים אישית ל-Bitrix כבר למעלה מ-4 שנים. הקומפוננטה המותאמת שלנו נטענת פי 3 מהר יותר מהמודול הפרסומי הסטנדרטי. במהלך תקופה זו צברנו ניסיון המאפשר לנו ליצור קומפוננטות סליידר מותאמות אישית, מהירות וקלות לניהול. הקומפוננטה הסטנדרטית bitrix:advertising.banner אינה עומדת בדרישות המודרניות: רספונסיביות, רקעי וידאו, טעינה עצלה (lazy loading), WebP. במקום זאת, אנו משתמשים בלוקי מידע וקומפוננטות מותאמות, המעניקים לאיש השיווק שליטה מלאה דרך פאנל הניהול ובעיבוד מהיר בצד הלקוח. המגבלות של המודול הפרסומי הופכות קריטיות בעת פיתוח סליידר במסך מלא בעמוד הבית או רשת באנרים דינמית בקטלוג. לדוגמה, מנהל אינו יכול להחליף תמונה ללא ידע ב-HTML, והגרסה הניידת נראית כמו עותק מוקטן של גרסת הדסקטופ. הגישה שלנו פותרת בעיות אלו, חוסכת בתקציב הלקוח על שיפורים, ומאיצה את טעינת העמוד ב-30-50%.
פיתוח סליידר ובאנרים מותאם אישית: פתרונות מרכזיים
מדוע המודול הפרסומי הסטנדרטי אינו מתאים
המודול advertising ב-1С-Битрикс מאחסן באנרים בטבלת b_adv_banner. כל באנר הוא קוד HTML בשדה MESSAGE. חסרונות:
- העורך הוא שדה טקסט; מנהל ללא כישורי עיצוב אינו יכול לשנות את התוכן.
- אין סליידר: כל באנר עצמאי, אין סדר.
- אין תמונות רספונסיביות: באנר אחד לכל המסכים.
- אין תמיכה בפורמטים מודרניים (WebP, AVIF) ובטעינה עצלה.
כל המגבלות הללו נפתרות באמצעות פיתוח מותאם אישית עם לוקי מידע.
איך אנחנו עושים זאת: בלוק מידע + קומפוננטה
פתרון מעשי הוא בלוק מידע נפרד בשם "סליידרים ובאנרים". כל אלמנט הוא שקופית אחת, וסעיפים הם אזורי מיקום (hero-slider, catalog-banner וכו'). מבנה המאפיינים:
| מאפיין | סוג | מטרה |
|---|---|---|
| IMAGE_DESKTOP | קובץ | תמונה לדסקטופ |
| IMAGE_MOBILE | קובץ | תמונה לנייד |
| VIDEO_BG | קובץ | רקע וידאו (MP4) |
| TITLE | מחרוזת | כותרת |
| SUBTITLE | מחרוזת | כותרת משנה |
| BUTTON_TEXT | מחרוזת | טקסט כפתור |
| BUTTON_LINK | מחרוזת | קישור |
| BG_COLOR | מחרוזת | צבע רקע |
| TEXT_COLOR | רשימה | בהיר / כהה |
| SORT | מספר | סדר |
הקומפוננטה local:banner.slider מקבלת פרמטרים: IBLOCK_ID, SECTION_CODE, SLIDER_ENGINE (swiper, splide, native), AUTOPLAY, LAZY_LOAD, CACHE_TIME. ב-class.php, נבחרים אלמנטים פעילים, נוצרות גרסאות WebP, ומוצג <picture> עם <source>.
דוגמה להגדרת קומפוננטה
$APPLICATION->IncludeComponent( "local:banner.slider", "", array( "IBLOCK_ID" => 25, "SECTION_CODE" => "hero", "SLIDER_ENGINE" => "splide", "AUTOPLAY" => "Y", "AUTOPLAY_SPEED" => 5000, "LAZY_LOAD" => "Y", "CACHE_TIME" => 36000000, "CACHE_TYPE" => "A", "USE_WEBP" => "Y", ) ); סליידר מותאם אישית על לוקי מידע רץ פי 1.5-2 מהר יותר בזכות מטמון מתויג ואופטימיזציית תמונות. כפי שנכתב בתיעוד הרשמי: "מטמון מתויג מאפשר לאפס רק את המטמון של הקומפוננטות שנתוניהן השתנו." מידע נוסף על מטמון ניתן למצוא ב-תיעוד 1С-Битрикс.
בחירת ספריית סליידר
Swiper הוא התקן בפועל בגודל 140 KB, תומך במגע, טעינה עצלה ופרלקס. Splide היא אלטרנטיבה קלה (30 KB) ללא תלות חיצונית. CSS טבעי משתמש ב-scroll-snap-type ללא JS לגלילה בסיסית. אנו ממליצים על Splide לפרויקטים טיפוסיים, על Swiper למורכבים, ועל פתרון טבעי למינימליסטיים.
כיצד לייעל את טעינת הסליידר?
הסליידר בעמוד הבית הוא האלמנט הראשון המשפיע על LCP. כללים מרכזיים:
- שקופית ראשונה ללא טעינה עצלה:
$APPLICATION->IncludeComponent( "local:banner.slider", "", array( "IBLOCK_ID" => 25, "SECTION_CODE" => "hero", "SLIDER_ENGINE" => "splide", "AUTOPLAY" => "Y", "AUTOPLAY_SPEED" => 5000, "LAZY_LOAD" => "Y", "CACHE_TIME" => 36000000, "CACHE_TYPE" => "A", "USE_WEBP" => "Y", ) );,loading="eager". - טעינה מוקדמת של התמונה הראשונה ב-
fetchpriority="high"דרך<head>. - גרסאות WebP: דסקטופ 1920x600 ב-WebP שוקל 80-150 KB לעומת 200-400 KB ב-JPEG.
- רקע וידאו: H.264, 1280x720, 1-2 Mbps, משך עד 10 שניות. מוחלף בתמונה סטטית בנייד.
צעדים אלו מפחיתים את נפח הנתונים המועמסים בעד 30%, ומשפיעים לטובה על LCP ועל תקציב הטעינה הכולל. ייעלנו למעלה מ-60 סליידרים עבור לקוחותינו.
ניהול עבור אנשי שיווק
המנהל עובד בממשק בלוק המידע: יוצר אלמנט, מעלה תמונות, ממלא טקסטים, קובע תאריכים. תצוגה מקדימה זמינה דרך תבנית מותאמת. המיון נעשה באמצעות גרירה ושחרור או שדה SORT. אין צורך ב-HTML.
מה כלול בפיתוח
- עיצוב מבנה בלוק המידע לפי המשימה
- פיתוח קומפוננטה עם תמיכה בספרייה הנבחרת
- עיצוב רספונסיבי (דסקטופ, טאבלט, נייד)
- יצירת WebP/AVIF, טעינה מוקדמת, טעינה עצלה
- שילוב רקע וידאו
- הגדרת מטמון
- תיעוד עבור איש השיווק
תהליך העבודה
- ניתוח — אנו לומדים דרישות, עיצובים, אבות טיפוס.
- עיצוב — אנו מגדירים את מבנה בלוק המידע ופרמטרי הקומפוננטה.
- פיתוח — אנו כותבים את הקומפוננטה, העיצוב, האינטגרציה.
- בדיקות — אנו בודקים על כל המכשירים והדפדפנים.
- פריסה ומסירה — אנו מתקינים על שרת הייצור ומכשירים את המנהל.
לוח זמנים משוער
| וריאנט | היקף | משך |
|---|---|---|
| סליידר בודד | בלוק מידע, קומפוננטה, Splide, רספונסיביות, WebP | 3-5 ימים |
| מערכת באנרים | אזורים מרובים, רקעי וידאו, טעינה מוקדמת, אנליטיקה | 8-12 ימים |
עלות הפיתוח מתחילה ב-$1,200 עבור סליידר בודד. לקוחותינו חוסכים בממוצע $400 בחודש בעלויות CDN לאחר המעבר ל-WebP. הזמינו פיתוח של שלושה סליידרים או יותר וקבלו 10% הנחה.
הניסיון והאחריות שלנו
אנו מפתחים על 1С-Битрикс כבר למעלה מ-4 שנים והשלמנו יותר מ-50 פרויקטים עם סליידרים מותאמים אישית. עם מעל 95% שביעות רצון לקוחות, אנו מבטיחים איכות קוד ותמיכה מהירה. אנו משתמשים רק בספריות ובגישות מוכחות.
צרו קשר כדי להזמין פיתוח סליידר ובאנרים מותאם אישית.