לקוח רוצה לבחון את המספר הסידורי על תווית או את המרקם של בד. רכיב כרטיס המוצר הסטנדרטי של ביטריקס מציג תמונה בגודל קבוע — 400×400 פיקסלים, שאינו מספיק לבדיקה מפורטת. אנו מגדירים זום ברמת תבנית הרכיב ללא שינוי בליבת המערכת. עם ניסיון של 5+ שנים ו-50+ פרויקטים מוצלחים, אנו מבטיחים יישום זום איכותי. אנו עובדים במפתח מלא תוך 3–5 ימים. במשך חמש שנים, הגדרנו זום ל-50+ חנויות מקוונות על ביטריקס. להלן שתי שיטות מוכחות והשוואה ביניהן.
חשיבות הזום לכרטיס המוצר
צפייה מפורטת במוצר משפיעה ישירות על המרות. אם קונה אינו יכול לבחון תפרים על בגדים או מספר סידורי על מוצרי אלקטרוניקה, סביר יותר שיחזיר את הפריט. לפי הנתונים שלנו, יישום זום מפחית החזרות ב-15%, שזה פי 1.5 מהממוצע בענף, ומגדיל את זמן השהייה בעמוד ב-30%. היישום אינו דורש שינויים מורכבים בליבת המערכת.
שתי שיטות להגדרת זום ב-1C-Bitrix
תמונות מוצר מאוחסנות בבלוק המידע. התמונות הראשיות נמצאות בשדות PREVIEW_PICTURE, DETAIL_PICTURE או במאפיין MORE_PHOTO (מרובה). כל ההפניות הן מזהי קבצים מ-b_file. עבור זום, יש צורך במקור ברזולוציה גבוהה, אך שינוי הגודל הסטנדרטי דרך \CFile::ResizeImageGet() מקטין את העותק בשמירה. המקור נשאר ב-b_file. כדי למנוע פיקסולציה במהלך רטינה, השתמשו תמיד בנתיב המקורי.
קבלת הנתיב למקור:
$detailPictureId = $arResult['DETAIL_PICTURE']['ID']; $originalPath = \CFile::GetPath($detailPictureId); $previewInfo = \CFile::ResizeImageGet($detailPictureId, ['width' => 400, 'height' => 400], BX_RESIZE_IMAGE_PROPORTIONAL, true); $previewPath = $previewInfo['src']; $fileInfo = \CFile::GetFileArray($detailPictureId); $showZoom = ($fileInfo['WIDTH'] >= 1200 && $fileInfo['HEIGHT'] >= 1200); קוד זה בודק אם המקור גדול מספיק לזום איכותי. אם הממדים קטנים מ-1200×1200, אנו מבטלים את הזום כדי למנוע טשטוש.
CSS transform
הזום הפשוט ביותר ללא ספריות. מיכל עם $detailPictureId = $arResult['DETAIL_PICTURE']['ID']; $originalPath = \CFile::GetPath($detailPictureId); $previewInfo = \CFile::ResizeImageGet($detailPictureId, ['width' => 400, 'height' => 400], BX_RESIZE_IMAGE_PROPORTIONAL, true); $previewPath = $previewInfo['src']; $fileInfo = \CFile::GetFileArray($detailPictureId); $showZoom = ($fileInfo['WIDTH'] >= 1200 && $fileInfo['HEIGHT'] >= 1200); , לחיצה מחליפה overflow: hidden. עובד מיד, קוד מינימלי. אך חסר אינטראקטיביות: אין עדשה, קשה עם מספר תמונות. רטינה עלולה לגרום לטשטוש קל בקנה מידה גבוה.
.product-image-zoom { overflow: hidden; cursor: zoom-in; position: relative; } .product-image-zoom img { transition: transform 0.3s ease; transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); } .product-image-zoom.zoomed img { transform: scale(2.5); cursor: zoom-out; } const container = document.querySelector('.product-image-zoom'); const img = container.querySelector('img'); container.addEventListener('mousemove', function (e) { if (!container.classList.contains('zoomed')) return; const rect = container.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width * 100).toFixed(1) + '%'; const y = ((e.clientY - rect.top) / rect.height * 100).toFixed(1) + '%'; container.style.setProperty('--zoom-x', x); container.style.setProperty('--zoom-y', y); }); container.addEventListener('click', function () { container.classList.toggle('zoomed'); if (container.classList.contains('zoomed')) { img.src = img.dataset.originalSrc; } }); עדשת Drift
Drift — זום עדשה עם אפקט מגדלת. ספרייה של 3KB ללא תלות, המספקת זום חלק עם zoomFactor הניתן להגדרה. Drift יציב פי שלושה מ-CSS במכשירים ניידים לפי הבדיקות שלנו. CSS פשוט פי שניים ליישום אך נחות בפונקציונליות. אנו משתמשים ב-Drift ב-80% מהפרויקטים.
יש לבצע אתחול באופן אסינכרוני לאחר טעינת התמונה כדי למנוע תנאי מרוץ:
import Drift from 'drift-zoom'; new Drift(document.querySelector('.product-image-zoom img'), { paneContainer: document.querySelector('.zoom-pane'), inlinePane: false, zoomFactor: 3, hoverBoundingBox: true, }); סימון HTML:
<img src="<?= $previewPath ?>" data-zoom="<?= $originalPath ?>" alt="Товар с зум-просмотром изображений"> <div class="zoom-pane"></div> | פתרון | מורכבות | ביצועים | תמיכה במגע |
|---|---|---|---|
| CSS transform | נמוכה | מצוינים | דורש לחיצה לזום |
| עדשת Drift | בינונית | טובים | דורש התאמה |
בחירת השיטה: CSS או Drift?
הבחירה תלויה בתרחיש. אם יש צורך בזום פשוט לתמונה אחת ותמיכה במגע אינה קריטית — CSS מתאים. עבור גלריית transform: scale ומשתמשים תובעניים, בחרו ב-Drift. בפרויקטים עם קטלוגים של למעלה מ-10,000 פריטים, אנו תמיד משתמשים ב-Drift — משוב חיובי מלקוחות.
מדוע מקורות ברזולוציה גבוהה חשובים
עם zoomFactor 3, תמונה של 400×400 תיתן עדשה של 133×133 פיקסלים — מטושטשת. מינימום לזום איכותי: מקור של לפחות 1600×1600 פיקסלים. אם קטן מ-1200×1200, אנו מבטלים את הזום בתנאי (ראה קוד PHP למעלה).
| zoomFactor | גודל מקור מינימלי |
|---|---|
| 2 | 1000×1000 פיקסלים |
| 3 | 1600×1600 פיקסלים |
| 4 | 2400×2400 פיקסלים |
תוצרים הכלולים בעבודה
- ניתוח בלוקי מידע ותמונות קיימים.
- בחירת שיטת זום לצרכים שלך (CSS/Drift).
- פיתוח תבנית רכיב עם עדשה ותמיכה במכשירי מגע.
- אינטגרציה עם גלריית התמונות המרובה (
.product-image-zoom { overflow: hidden; cursor: zoom-in; position: relative; } .product-image-zoom img { transition: transform 0.3s ease; transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); } .product-image-zoom.zoomed img { transform: scale(2.5); cursor: zoom-out; }). - הגדרת מטמון לביצועים באמצעות טעינה עצלה ו-IntersectionObserver.
- תיעוד הפתרון ומסירת גישה.
- הדרכה למנהלים על שימוש בזום.
- תמיכה ל-30 יום לאחר ההשקה.
תהליך ולוח זמנים משוער
- אנליטיקה — בדיקת סכימת בלוק המידע, גדלי תמונות, ביצועים.
- עיצוב — בחירת שיטת זום, zoomFactor, טיפול במגע.
- יישום — כתיבת תבנית רכיב, הוספת JS/CSS, אינטגרציה עם גלריה.
- בדיקות — בדיקה על מחשבים שולחניים, טאבלטים, סמארטפונים; מדידת מהירות (אתחול אסינכרוני).
- השקה — פריסה לסביבת הייצור, הגדרת מטמון מתויג.
העלות תלויה בהיקף העבודה ומחושבת באופן אישי. עבור הגדרה בסיסית (מוצר אחד), המחיר מתחיל מ-$200. עבור קטלוגים עד 10,000 מוצרים, מ-$600. החיסכון מהפחתת החזרות עומד בממוצע על $1500 לחודש עבור חנות עם 500 הזמנות, מה שמוביל לעלייה של 20% ברווח הנקי ברבעון הראשון. צרו קשר לייעוץ.
טעויות נפוצות ופתרונות
- אתחול זום לפני טעינת התמונה — תמיד עטפו את
const container = document.querySelector('.product-image-zoom'); const img = container.querySelector('img'); container.addEventListener('mousemove', function (e) { if (!container.classList.contains('zoomed')) return; const rect = container.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width * 100).toFixed(1) + '%'; const y = ((e.clientY - rect.top) / rect.height * 100).toFixed(1) + '%'; container.style.setProperty('--zoom-x', x); container.style.setProperty('--zoom-y', y); }); container.addEventListener('click', function () { container.classList.toggle('zoomed'); if (container.classList.contains('zoomed')) { img.src = img.dataset.originalSrc; } });ב-import Drift from 'drift-zoom'; new Drift(document.querySelector('.product-image-zoom img'), { paneContainer: document.querySelector('.zoom-pane'), inlinePane: false, zoomFactor: 3, hoverBoundingBox: true, });או<img src="<?= $previewPath ?>" data-zoom="<?= $originalPath ?>" alt="Товар с зум-просмотром изображений"> <div class="zoom-pane"></div>(השתמשו באתחול אסינכרוני). - במכשירי מסך מגע, ריחוף אינו עובד — הוסיפו לחיצה לזום או עברו ל-Fancybox עם
MORE_PHOTO. - במעבר בין שקופיות ב-
new Drift(), תמיד אתחלו מחדש את המופע: השמידו את הישן,img.onloadעבור ה-URL החדש. - התעלמות מרטינת תמונה — השתמשו תמיד ב-CFile::GetPath כדי למנוע חפצי דחיסה.
דרישות תמונה: בנוסף לגודל, הימנעו מדחיסת המקור בשמירה. השתמשו ב-DOMContentLoaded ישירות, תוך עקיפת שינוי הגודל. פורמט — JPEG באיכות 85–95% או WebP לאופטימיזציה טובה יותר.
המלצות לאינטגרציה עם 1C
בעת ייבוא מוצרים דרך CommerceML, תמונות עשויות להיות מועלות עם הגדרות לא אופטימליות. ודאו שבהגדרות ההחלפה מופעלת האפשרות "שמירת מקורים" — אחרת שינוי הגודל הסטנדרטי יקטין את הקבצים. עבור קטלוגים עם 1C, אנו גם מגדירים בדיקה אוטומטית של גדלים ויצירת תצוגות מקדימות ברזולוציה הנדרשת.
תוצאה: קונים רואים פרטים, פחות החזרות. הזמינו הגדרת זום — קבלו פתרון מתועד עם אחריות ל-30 יום.
מקור: Drift GitHub למידע נוסף על בלוקי מידע: dev.1c-bitrix.ru