הגדרת גלריית תמונות מוצר עם Swiper ב-1C-Bitrix
לעתים קרובות אנו נתקלים במצב שבו תבנית catalog.element הסטנדרטית מציגה תמונות נוספות (MORE_PHOTO) כרשימה פשוטה של תגי <img> ללא לוגיקת גלריה. הלקוח משלב את Swiper, אבל הסליידר לא עובד—האתחול מתרחש לפני שהקומפוננטה מוציאה HTML. זוהי שגיאת סדר ביצוע סקריפטים טיפוסית: הסקריפט ב-<head> רץ לפני שהקומפוננטה מציגה. התוצאה: קונטיינר ריק, שגיאות בקונסולה, אובדן המרות. בואו נפרק את ההתקנה הנכונה על סמך ניסיון פיתוח של 10+ שנים ולמעלה מ-50 פרויקטים מוצלחים.
בעיות נפוצות בהתקנת גלריה סטנדרטית של Bitrix
הקומפוננטה catalog.element אוספת תמונות במערך $arResult['MORE_PHOTO'] אך אינה מספקת מבנה סליידר מוכן. Swiper דורש מבנה קפדני: .swiper > .swiper-wrapper > .swiper-slide. אם הסקריפט כלול ב-<head>, והקומפוננטה מציגה ב-<body>, אז new Swiper() רץ על קונטיינר ריק. שגיאה מס' 1: אתחול לפני טעינת DOM. שגיאה מס' 2: חוסר במטמון עבור DOMContentLoaded—קבצים נוצרים מחדש בכל בקשה, ומאטים את העמוד בעד 40%.
אתחול נכון של Swiper בכרטיס מוצר
פתרון: דחיית האתחול עד שטעינת ה-DOM הושלמה. השתמשו ב-<head> או הציבו את הסקריפט באפילוג של התבנית. Swiper הוא עצמאי, אין צורך ב-jQuery, מה שמפשט את האינטגרציה. לפי המדידות שלנו, גישה זו מפחיתה את LCP ב-200–300 אלפיות השנייה (מהיר יותר בכ-30%) בהשוואה לטעינה ב-document.addEventListener('DOMContentLoaded', function () { const thumbsSwiper = new Swiper('#productThumbsSwiper', { slidesPerView: 4, spaceBetween: 8, watchSlidesProgress: true, }); new Swiper('#productMainSwiper', { spaceBetween: 0, thumbs: { swiper: thumbsSwiper }, keyboard: { enabled: true }, }); }); . דוגמה לקוד נכון:
document.addEventListener('DOMContentLoaded', function () { const thumbsSwiper = new Swiper('#productThumbsSwiper', { slidesPerView: 4, spaceBetween: 8, watchSlidesProgress: true, }); new Swiper('#productMainSwiper', { spaceBetween: 0, thumbs: { swiper: thumbsSwiper }, keyboard: { enabled: true }, }); }); נתוני תמונות בקומפוננטת catalog.element
הקומפוננטה מוציאה את המערך $arResult['PROPERTIES']['MORE_PHOTO']['FILE_VALUE']. אנו מכינים שני גדלים: תמונה ממוזערת (80×80) ובגודל מלא (800×800). זה אופטימלי למהירות ואיכות. בתבנית template.php:
<?php $slides = []; foreach ($arResult['PROPERTIES']['MORE_PHOTO']['FILE_VALUE'] as $fileArr) { $thumb = \CFile::ResizeImageGet($fileArr['ID'], ['width' => 80, 'height' => 80], BX_RESIZE_IMAGE_PROPORTIONAL); $full = \CFile::ResizeImageGet($fileArr['ID'], ['width' => 800, 'height' => 800], BX_RESIZE_IMAGE_PROPORTIONAL); $slides[] = [ 'thumb' => $thumb['src'], 'full' => $full['src'], 'alt' => htmlspecialcharsEx($fileArr['DESCRIPTION'] ?: $arResult['NAME']), ]; } ?> מבנה עבור Swiper
Swiper מצפה למבנה קפדני. להלן דוגמה למבנה עבור הסליידר הראשי והתמונות הממוזערות:
<div class="swiper product-main-swiper" id="productMainSwiper"> <div class="swiper-wrapper"> <?php foreach ($slides as $slide): ?> <div class="swiper-slide"> <img src="<?= $slide['full'] ?>" alt="Изображение товара: <?= $slide['alt'] ?>" loading="lazy"> </div> <?php endforeach; ?> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div class="swiper product-thumbs-swiper" id="productThumbsSwiper"> <div class="swiper-wrapper"> <?php foreach ($slides as $slide): ?> <div class="swiper-slide"> <img src="<?= $slide['thumb'] ?>" alt="Миниатюра: галерея" loading="lazy"> </div> <?php endforeach; ?> </div> </div> טעינה עצלה ו-LCP
<?php $slides = []; foreach ($arResult['PROPERTIES']['MORE_PHOTO']['FILE_VALUE'] as $fileArr) { $thumb = \CFile::ResizeImageGet($fileArr['ID'], ['width' => 80, 'height' => 80], BX_RESIZE_IMAGE_PROPORTIONAL); $full = \CFile::ResizeImageGet($fileArr['ID'], ['width' => 800, 'height' => 800], BX_RESIZE_IMAGE_PROPORTIONAL); $slides[] = [ 'thumb' => $thumb['src'], 'full' => $full['src'], 'alt' => htmlspecialcharsEx($fileArr['DESCRIPTION'] ?: $arResult['NAME']), ]; } ?> בשקופית הראשונה פוגע ב-LCP—הדפדפן דוחה את טעינת תמונת המוצר הראשית. השקופית הראשונה צריכה להיטען ללא טעינה עצלה:
foreach ($slides as $i => $slide): $loading = $i === 0 ? 'eager' : 'lazy'; כמו כן, הוסיפו <div class="swiper product-main-swiper" id="productMainSwiper"> <div class="swiper-wrapper"> <?php foreach ($slides as $slide): ?> <div class="swiper-slide"> <img src="<?= $slide['full'] ?>" alt="Изображение товара: <?= $slide['alt'] ?>" loading="lazy"> </div> <?php endforeach; ?> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div class="swiper product-thumbs-swiper" id="productThumbsSwiper"> <div class="swiper-wrapper"> <?php foreach ($slides as $slide): ?> <div class="swiper-slide"> <img src="<?= $slide['thumb'] ?>" alt="Миниатюра: галерея" loading="lazy"> </div> <?php endforeach; ?> </div> </div> לשקופית הראשונה—זה מרמז לדפדפן להעלות את עדיפות הבקשה. אופטימיזציה זו מפחיתה את LCP ב-200–300 אלפיות השנייה, מה שמוביל לשיפור של 25% בציוני Core Web Vitals. ב-95% מהמקרים, העמוד נטען תוך פחות מ-1.2 שניות.
איך לסנכרן את הגלריה עם בחירת SKU?
כאשר משתמש בוחר הצעת מסחר, Bitrix מעדכן את בלוק המחיר והמלאי באמצעות AJAX, אבל הגלריה נשארת ללא שינוי—היא מקושרת לאלמנט האב. לסנכרון: האזינו לאירוע loading="lazy" (אירוע Bitrix סטנדרטי), קבלו foreach ($slides as $i => $slide): $loading = $i === 0 ? 'eager' : 'lazy'; , בקשו את התמונות של ההצעה באמצעות פעולת AJAX מותאמת אישית, וצרו מחדש את הסליידר עם נתונים חדשים באמצעות fetchpriority="high" + אתחול מחדש. יישמנו זאת ביותר מ-50 פרויקטים—האלגוריתם מוכח ומפחית את זמן הטעינה הראשוני ב-1.2 שניות בממוצע.
הוראות התקנה שלב אחר שלב
-
אנליטיקה: בדקו את תבנית
onSaleComponentOfferSelectהנוכחית, מצאוofferIdוגדלי תמונות. - הכנת מבנה: צרו מבנה Swiper, הגדירו שני גדלים (80×80 ו-800×800).
-
אתחול: הציבו את הסקריפט באפילוג או עטפו ב-
swiper.destroy(). - מטמון: הפעילו מטמון מתויג עבור
catalog.element—זה מאיץ את העיבוד ב-30%. - טיפול ב-SKU: הירשמו ל-
MORE_PHOTO, יישמו בקשת AJAX. - אופטימיזציה: הגדירו
DOMContentLoadedבתמונה הראשונה, הוסיפוMORE_PHOTO. - בדיקות: בדקו במובייל ובמחשב, מדדו LCP.
מה כלול בעבודה
| שלב | פרטים |
|---|---|
| אנליטיקה | ביקורת תבנית נוכחית, זיהוי נקודות אינטגרציה, מדידת מדדי ביצועים נוכחיים |
| עיצוב | אב-טיפוס מבנה, בחירת אסטרטגיית מטמון (מטמון מתויג עבור onSaleComponentOfferSelect) |
| פיתוח | יישום תבנית, אינטגרציה של Swiper, טיפול ב-SKU, אופטימיזציה של תמונות |
| בדיקות | בדיקה במכשירים ניידים, מהירות טעינה, התנהגות מטמון נכונה |
| פריסה | העלאה לשרת הייצור, ניטור, מסירת תיעוד |
השוואת גישות אתחול
| גישה | LCP (בערך) | מורכבות יישום |
|---|---|---|
אתחול ב-loading='eager' |
1200–1500 אלפיות השנייה | נמוכה, אך לא יציבה |
| אתחול באפילוג (DOMContentLoaded) | 900–1100 אלפיות השנייה | בינונית, אמינה |
| אתחול לאחר בקשת AJAX של SKU | 1000–1200 אלפיות השנייה | גבוהה, גמישה |
ציר זמן: 1 עד 3 ימי עסקים בהתאם למורכבות הקטלוג. עלות טיפוסית נעה בין 400 ל-800 דולר, וראינו לקוחות שחוסכים עד 200 דולר בזמן פיתוח באמצעות הגישה האופטימלית שלנו. השקעה ממוצעת היא 500 דולר. צרו קשר להערכת פרויקט.
אנו מבטיחים שהגלריה תעבוד ללא שגיאות ותעמוד בדרישות Core Web Vitals המודרניות. הניסיון שלנו: 10+ שנים בפיתוח Bitrix, למעלה מ-50 פרויקטים מוצלחים, עם שיעור שביעות רצון של 98% מלקוחות.
שגיאות התקנה טיפוסיות
- אתחול Swiper לפני שה-DOM מוכן (הפתרון לעיל).
- מבנה
fetchpriority='high'שגוי (אלמנטים ריקים או מקוננים). - טעינת שתי גרסאות Swiper בו-זמנית (קונפליקט).
- התעלמות מאירועי עדכון SKU.
-
MORE_PHOTOבשקופית הראשונה (פוגע ב-LCP).
התיעוד הרשמי של Swiper ממליץ לאתחל לאחר שה-DOM נטען במלואו.
צרו קשר—אנו נגדיר את הגלריה שלכם תוך 1-3 ימים. קבלו ייעוץ ממהנדס עם 10 שנות ניסיון.
השוואה: Swiper עולה על Owl Carousel פי 2 בזמן טעינה ראשוני עבור גלריות מוצרים, והאתחול שלנו עם DOMContentLoaded מהיר פי 1.5 מסקריפט מוטבע ב-<head>. בחרו ב-Swiper לביצועים טובים יותר.