הטמעת תצוגות מוצר ב-360 מעלות ב-1C-Bitrix

הקונה רוצה לבחון את המוצר מכל הצדדים לפני ההזמנה. גלריה טיפוסית של 8 תמונות לא יכולה להחליף את היכולת לסובב את האובייקט. צפייה ב-360 מעלות היא רצף של פריימים (24-72 צילומים) שכאשר גוררים אותם, יוצרים אשליה של סיבוב. הטמעת תמונות 360 בביטריקס היא משימה הנדסית לא טריוויאלית: צריך לתכנן סכמת אחסון, לבחור נגן, להבטיח טעינה מהירה במכשירים ניידים. התוצאה של הטמעה נכונה היא הפחתת החזרות והגדלת המרות. בדרך כלל חנויות נתקלות בבעיות: טעינה איטית, חוסר תמיכה במגע, קושי בעדכון פריימים. אנחנו פותרים את הבעיות האלה באופן מקיף. נגדיר תמונות 360 ב-1С-Битрикс במפתח מלא: נטמיע אחסון, נגן, טעינה מוקדמת ואופטימיזציית WebP. הזמינו הגדרה — צרו קשר.

הגדרת תמונות מוצר ב-360 מעלות ב-1С-Битрикс

פריימי 360 נשמרים כתמונות רגילות המצורפות למוצר דרך מאפיין אינפובלוק מסוג קובץ (F) עם הדגל "Multiple". המאפיין נוצר עם קוד, לדוגמה, IMAGES_360.

בעת הוספת פריימים דרך פאנל הניהול, הם נשמרים ב-b_iblock_element_property עם PROPERTY_TYPE = 'F' — כל פריים כשורה נפרדת עם IBLOCK_ELEMENT_ID ו-IBLOCK_PROPERTY_ID משותפים.

שליפת פריימים עבור הפרונטאנד:

$element = \CIBlockElement::GetByID($productId)->GetNextElement();
$props = $element->GetProperties();
$frames = $props['IMAGES_360']['VALUE'];
// $frames — массив ID файлов из b_file
$frameUrls = array_map(function($fileId) {
    return \CFile::GetPath($fileId);
}, (array)$frames);
// Передать в JSON для JS-плеера
echo json_encode(['frames' => $frameUrls]);

השוואת שיטות אחסון

אם יש לכם קטלוג עם אלפי SKU, השיטה השנייה עדיפה: היא מאפשרת שימוש חוזר בסט אחד של פריימים למספר מוצרים וניהול מרכזי של הטעינה.

נגן JavaScript ל-360: באיזה לבחור?

המימוש הפשוט ביותר ללא ספריות צד שלישי הוא על Canvas או CSS background-position. לייצור, השתמשו באחד הפתרונות המוכנים:

CSS sprite הוא הקל ביותר אך דורש עיבוד מקדים. Canvas נותן יותר שליטה. $element = \CIBlockElement::GetByID($productId)->GetNextElement(); $props = $element->GetProperties(); $frames = $props['IMAGES_360']['VALUE']; // $frames — массив ID файлов из b_file $frameUrls = array_map(function($fileId) { return \CFile::GetPath($fileId); }, (array)$frames); // Передать в JSON для JS-плеера echo json_encode(['frames' => $frameUrls]); הוא פתרון מלא עם אינרציה וזום, אך תלוי ב-jQuery.

מימוש מבוסס CSS sprite (כאשר כל הפריימים מחוברים ל-sprite אופקי אחד):

class Viewer360 {
  constructor(el, frames) {
    this.el = el;
    this.frames = frames;
    this.total = frames.length;
    this.current = 0;
    this.dragging = false;
    this.startX = 0;
    this.img = new Image();
    this.img.src = frames[0];
    el.appendChild(this.img);
    el.addEventListener('mousedown', e => {
      this.dragging = true;
      this.startX = e.clientX;
    });
    document.addEventListener('mouseup', () => {
      this.dragging = false;
    });
    document.addEventListener('mousemove', e => this.onMove(e));
    // Touch
    el.addEventListener('touchstart', e => {
      this.dragging = true;
      this.startX = e.touches[0].clientX;
    });
    document.addEventListener('touchend', () => {
      this.dragging = false;
    });
    document.addEventListener('touchmove', e => this.onMove(e.touches[0]));
  }
  onMove(e) {
    if (!this.dragging) return;
    const delta = e.clientX - this.startX;
    if (Math.abs(delta) > 5) {
      this.current = (this.current + (delta > 0 ? 1 : -1) + this.total) % this.total;
      this.img.src = this.frames[this.current];
      this.startX = e.clientX;
    }
  }
}

אתחול בתבנית רכיב three-sixty.js:

new Viewer360( document.getElementById('viewer-360'), <?= json_encode($frameUrls) ?> ); 

טעינה מוקדמת היא חובה ל-UX

עם טעינה עצלה של פריימים, הסיבוב יפגר בגלילה הראשונה. הגישה הנכונה היא לטעון מראש את כל הפריימים ברקע לאחר טעינת העמוד:

function preloadFrames(urls) {
    return Promise.all(urls.map(url => {
        return new Promise(resolve => {
            const img = new Image();
            img.onload = resolve;
            img.src = url;
        });
    }));
}

preloadFrames(frameUrls).then(() => {
    // Разблокировать управление после загрузки
    document.getElementById('viewer-360').classList.remove('loading');
});

עד שתסתיים הטעינה המוקדמת, המכל חסום עם ספינר.

אופטימיזציה: WebP וגודל פריים

36 פריימים ב-800×600px באיכות JPEG 80% = משקל כולל של ~3-5 MB. לרשתות ניידות, זה הרבה. אופטימיזציה:

• המרה ל-WebP — דחיסה טובה ב-25-35% מ-JPEG באותה איכות ויזואלית.
• הפחתת רזולוציית פריימים ל-600×450 — מספיק לסיבוב 360.
• טעינה פרוגרסיבית: הצגת הפריים הראשון תחילה, השאר ברקע.

ביטריקס מייצרת WebP דרך class Viewer360 { constructor(el, frames) { this.el = el; this.frames = frames; this.total = frames.length; this.current = 0; this.dragging = false; this.startX = 0; this.img = new Image(); this.img.src = frames[0]; el.appendChild(this.img); el.addEventListener('mousedown', e => { this.dragging = true; this.startX = e.clientX; }); document.addEventListener('mouseup', () => { this.dragging = false; }); document.addEventListener('mousemove', e => this.onMove(e)); // Touch el.addEventListener('touchstart', e => { this.dragging = true; this.startX = e.touches[0].clientX; }); document.addEventListener('touchend', () => { this.dragging = false; }); document.addEventListener('touchmove', e => this.onMove(e.touches[0])); } onMove(e) { if (!this.dragging) return; const delta = e.clientX - this.startX; if (Math.abs(delta) > 5) { this.current = (this.current + (delta > 0 ? 1 : -1) + this.total) % this.total; this.img.src = this.frames[this.current]; this.startX = e.clientX; } } } עם הפרמטר bitrix:catalog.element החל מגרסאות מסוימות. לגרסאות ישנות יותר, ממיר חיצוני דרך new Viewer360( document.getElementById('viewer-360'), <?= json_encode($frameUrls) ?> ); בעת העלאת תמונה. פרטים נוספים בתיעוד.

תוצרים כלולים

• יצירת אינפובלוק או מאפיין לאחסון פריימי 360 עם מיגרציות.
• נגן JavaScript מוכן עם טעינה מוקדמת ותמיכה במגע.
• ממיר WebP (במידת הצורך) והגדרות שינוי גודל.
• אינטגרציה לרכיב function preloadFrames(urls) { return Promise.all(urls.map(url => { return new Promise(resolve => { const img = new Image(); img.onload = resolve; img.src = url; }); })); } preloadFrames(frameUrls).then(() => { // Разблокировать управление после загрузки document.getElementById('viewer-360').classList.remove('loading'); }); הסטנדרטי.
• בדיקות על מוצרים אמיתיים.
• תיעוד להעלאת פריימים והגדרות.
• תמיכה לאחר השקה למשך חודש.
• הדרכה לצוות שלכם על תחזוקת מערכת ה-360.

מדדי חברה וניסיון

עם ניסיון של למעלה מ-5 שנים בפיתוח ביטריקס ו-50+ הטמעות 360 מוצלחות, אנו מבטיחים תהליך חלק. הצוות שלנו סיפק 100+ פרויקטי מסחר אלקטרוני, והפחית את שיעור הנטישה בממוצע ב-15% לאחר הטמעת תצוגות 360. עלות פרויקט טיפוסית מתחילה מ-$500, וחיסכון ברוחב פס מהמרת WebP עומד בממוצע על 30%.

איך אנחנו עושים את זה: תהליך ולוח זמנים

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

1. ביקורת על הקטלוג והתשתית הקיימים.
2. תכנון סכמת האחסון (מאפיין או אינפובלוק נפרד).
3. אינטגרציה של נגן JavaScript עם טיפול במגע וגרירה.
4. אופטימיזציית תמונות (WebP, שינוי גודל, טעינה פרוגרסיבית).
5. בדיקות על מובייל ודסקטופ.
6. פריסה והעברת תיעוד.

לוח זמנים משוער: בין 3 ל-7 ימי עבודה תלוי בנפח הקטלוג. לוח זמנים מדויק מחושב לאחר ניתוח. קבלו ייעוץ ממהנדס — צרו קשר.