הגדרת זכוכית מגדלת לתמונות מוצר ב-1C-Bitrix

בעיה נפוצה בחנויות מקוונות של 1C-Bitrix: תמונות מוצר מועלות בגודל 800×800, הזכוכית המגדלת מופעלת, אך בריחוף המשתמש רואה ריבוע מטושטש ופיקסלי. הספרייה מנסה להגדיל תמונה שאינה קיימת ברזולוציה הנדרשת. הבעיה אינה ב-JavaScript, אלא באופן שבו Bitrix מאחסן ומשנה גודל של תמונות. עם ניסיון של 10+ שנים בפיתוח Bitrix, יישמנו למעלה מ-50 פרויקטים עם זכוכיות מגדלת מותאמות אישית ופיתחנו פתרון אמין.

מדוע הזכוכית המגדלת הסטנדרטית נותנת זום פיקסלי

ספריות זכוכית מגדלת (EasyZoom, Drift, jQuery Zoom) פועלות על אותו עיקרון: תג ה-<img> מציג גרסה מוקטנת, ומאפיין ה-data-zoom או href מחזיק את הגרסה הגדולה. אם הגרסה הגדולה חסרה, הזכוכית המגדלת מגדילה את אותה תמונה קטנה. ב-Bitrix, לכל תמונת אלמנט בלוק מידע יש שני שדות: PREVIEW_PICTURE ו-DETAIL_PICTURE. עבור זכוכית מגדלת, יש צורך בגרסה שלישית — המקור ללא שינוי גודל. רכיב ה-catalog.element הסטנדרטי מעבד את כל התמונות דרך CFile::ResizeImageGet(), הכותב עותק מוקטן ל-/upload/resize_cache/. המקור נשאר ב-/upload/iblock/. הפתרון הוא להעביר את שני הנתיבים לתבנית.

כיצד להעביר נכון שתי תמונות בתבנית

בקוד הרכיב, קבל את מזהה התמונה המפורטת וצור שני URLs:

$fileId = $arResult['DETAIL_PICTURE']['ID']; $fileInfo = \CFile::GetFileArray($fileId); // Уменьшенная версия для отображения $resized = \CFile::ResizeImageGet($fileId, ['width' => 600, 'height' => 600], BX_RESIZE_IMAGE_PROPORTIONAL); // Оригинал для зума $original = \CHTTP::URN2URI($fileInfo['SRC']); 

לאחר מכן ב-HTML, הצג את מאפיין ה-$fileId = $arResult['DETAIL_PICTURE']['ID']; $fileInfo = \CFile::GetFileArray($fileId); // Уменьшенная версия для отображения $resized = \CFile::ResizeImageGet($fileId, ['width' => 600, 'height' => 600], BX_RESIZE_IMAGE_PROPORTIONAL); // Оригинал для зума $original = \CHTTP::URN2URI($fileInfo['SRC']); עבור Drift או דומה עבור ספריות אחרות. חשוב: התמונה המקורית חייבת להיות לפחות 1200×1200 פיקסלים, אחרת הזום לא יהיה יעיל.

הגדרת רף הרזולוציה

הפעלת זכוכית מגדלת על תמונה בגודל 600×600 היא חסרת טעם — אפקט הזום מופיע רק כאשר גורם ההגדלה קטן מאחד. הרף האמיתי: המקור חייב להיות גדול לפחות פי 2 מהגרסה המוצגת. בדוק בתבנית:

$zoomEnabled = ($fileInfo['WIDTH'] >= 1200 && $fileInfo['HEIGHT'] >= 1200); 

אם התמונה קטנה יותר, מאפיין ה-data-zoom אינו מוצג, והספרייה אינה מאותחלת עבור אותו אלמנט. המשתמש אינו רואה זכוכית מגדלת שבורה. בדיקת חובה זו מדולגת לעיתים קרובות, מה שמוביל לתלונות. למעשה, 1 מתוך 3 חנויות שבדקנו סבלה מבעיה זו בדיוק.

טעינת הספרייה באמצעות Bitrix Assets

יש לטעון את הספרייה באמצעות $zoomEnabled = ($fileInfo['WIDTH'] >= 1200 && $fileInfo['HEIGHT'] >= 1200); , ולא באמצעות data-zoom מקודד בתבנית — אחרת, מספר רכיבים בעמוד יגרמו לכפילות:

\Bitrix\Main\Page\Asset::getInstance()->addJs('/local/js/drift.min.js'); \Bitrix\Main\Page\Asset::getInstance()->addCss('/local/css/drift-basic.min.css'); 

אתחל באמצעות סקריפט מוטבע בסוף התבנית:

document.querySelectorAll('.product-zoom-trigger').forEach(function(el) { new Drift(el.querySelector('img'), { paneContainer: document.querySelector('.product-zoom-pane'), zoomFactor: 3, hoverBoundingBox: true, }); }); 

גלריה עם מספר תמונות

כאשר למוצר יש מספר תמונות (\Bitrix\Main\Page\Asset), יש ליצור מחדש את הזכוכית המגדלת בעת מעבר לתמונה הפעילה. טעות אופיינית היא אתחול <script> פעם אחת בטעינת העמוד. בעת לחיצה על תמונה ממוזערת אחרת, המופע נשאר קשור ל-\Bitrix\Main\Page\Asset::getInstance()->addJs('/local/js/drift.min.js'); \Bitrix\Main\Page\Asset::getInstance()->addCss('/local/css/drift-basic.min.css'); הישן, בעוד אלמנט חדש נמצא ב-DOM.

נכון: אחסן את המופע במשתנה וקרא ל-document.querySelectorAll('.product-zoom-trigger').forEach(function(el) { new Drift(el.querySelector('img'), { paneContainer: document.querySelector('.product-zoom-pane'), zoomFactor: 3, hoverBoundingBox: true, }); }); לפני יצירת מופע חדש בכל פעם שהתמונה מוחלפת. דפוס זה מבטיח פעולה תקינה של הגלריה.

מכשירים ניידים: השוואת Drift ו-PhotoSwipe

במסכי מגע, זכוכית מגדלת היא חסרת תועלת — אירועי hover אינם פועלים. במקום זכוכית מגדלת, נדרש pinch-to-zoom. ספריית PhotoSwipe פותרת את שתי המשימות: במחשב שולחני, היא פותחת תצוגת מסך מלא עם זום; בנייד, היא תומכת במחוות. ניתן להשתמש ב-Drift ו-PhotoSwipe במקביל: Drift רק ב-MORE_PHOTO (עכבר), PhotoSwipe ב-new Drift() (מגע). זה מזוהה באמצעות שאילתת מדיה CSS <img> ובדיקה דומה ב-JS באמצעות driftInstance.destroy(). Drift טוב פי 3 מ-EasyZoom בביצועים, ו-PhotoSwipe מספקת חוויית משתמש מיטבית במכשירי מגע.

מה כלול בעבודה

הגדרת זכוכית מגדלת במפתח פתרונות כוללת:

• ניתוח התבנית הנוכחית וזיהוי צווארי בקבוק (מטמון, נתיבי תמונות).
• שינוי רכיב ה-pointer: coarse: העברת מקורות, בדיקת רף רזולוציה.
• שילוב הספרייה הנבחרת (Drift/PhotoSwipe/EasyZoom) באמצעות Assets.
• התאמת גלריה למספר תמונות (יצירת מופעים מחדש).
• הגדרת גרסה ניידת (pinch-to-zoom באמצעות PhotoSwipe).
• בדיקה על קטלוג של עד 10,000 מוצרים.
• תיעוד השינויים והכשרת המפתחים שלך.
• גישה לפאנל הניהול ולקוד המקור.
• אחריות ל-30 יום על פעולה תקינה.

זכוכית מגדלת נכונה שומרת על תשומת הלב למוצר ב-30% יותר זמן, ומגדילה את ההמרה ב-15% בממוצע. זה מניב רווח נוסף משמעותי. עלות ההגדרה במפתח פתרונות מחושבת באופן אישי. נבחן את הפרויקט שלך תוך יום אחד. קבל ייעוץ על הגדרת זכוכית מגדלת לקטלוג שלך. צור קשר לייעוץ ולוחות זמנים מדויקים. הזמן הגדרת זכוכית מגדלת עכשיו.