360-фото на 1С-Бітрікс: зберігання, плеєр, оптимізація

Покупець хоче оглянути товар з усіх боків до замовлення. Звичайна галерея з 8 фото не замінює можливість повернути об'єкт. 360-перегляд — це послідовність кадрів (24–72 знімки), які при перетягуванні створюють ілюзію обертання. Впровадження 360-фото на Бітрікс — нетривіальна інженерна задача: потрібно продумати схему зберігання, вибрати плеєр, забезпечити швидке завантаження на мобільних. Результат правильної реалізації — зниження повернень і зростання конверсії. Зазвичай магазини стикаються з проблемами: повільне завантаження, відсутність підтримки touch, складність оновлення кадрів. Ми вирішуємо ці проблеми комплексно. Налаштуємо 360-фото на 1С-Бітрікс під ключ: реалізуємо зберігання, плеєр, попереднє завантаження та WebP-оптимізацію. Замовте налаштування — зв'яжіться з нами.

Як налаштувати 360-фото товарів на 1С-Бітрікс?

360-кадри зберігаються як звичайні зображення, прив'язані до товару через властивість інфоблоку типу «Файл» (F) з прапорцем «Множинне». Властивість створюється з кодом, наприклад, 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. Для production використовуйте одне з готових рішень:

CSS-спрайт найлегший, але вимагає попередньої обробки. Canvas дає більше контролю. three-sixty.js — повноцінне рішення з інерцією та зумом, але залежить від jQuery.

Реалізація на базі CSS-спрайта (коли всі кадри склеєні в один горизонтальний спрайт):

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) ?> ); 

Чому попереднє завантаження обов'язкове для 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 МБ загальної ваги. Для мобільних мереж це багато. Оптимізація:

• Конвертація в WebP — стиснення на 25–35% краще за JPEG за тієї ж візуальної якості.
• Зменшення роздільної здатності кадрів до 600×450 — для 360-обертання цього достатньо.
• Прогресивне завантаження: спочатку показувати перший кадр, інші — в фоні.

Бітрікс генерує WebP через \CFile::ResizeImageGet() з параметром 'format' => 'webp' починаючи з певних версій. Для старих версій — зовнішній конвертер через exec('cwebp ...') при завантаженні зображень. Детальніше за документацією.

Як ми це робимо: процес і терміни

Ми не просто вставляємо готовий код — адаптуємо рішення під ваш каталог, навантаження та тип товарів. Етапи:

1. Аудит поточного каталогу та інфраструктури.
2. Проектування схеми зберігання (властивість або окремий інфоблок).
3. Інтеграція JavaScript-плеєра з обробкою touch і drag.
4. Оптимізація зображень (WebP, ресайз, прогресивне завантаження).
5. Тестування на мобільних і десктопі.
6. Деплой і передача документації.

Орієнтовні терміни — від 3 до 7 робочих днів залежно від обсягу каталогу. Точні терміни розраховуємо після аналізу. Отримайте консультацію інженера — зв'яжіться з нами.

Що входить у роботу

• Створення інфоблоку або властивості для зберігання 360-кадрів з міграціями.
• Готовий JavaScript-плеєр з попереднім завантаженням і підтримкою touch.
• WebP-конвертер (якщо потрібен) і налаштування ресайзу.
• Інтеграція в штатний компонент bitrix:catalog.element.
• Тестування на реальних товарах.
• Документація щодо завантаження кадрів та налаштування.
• Підтримка після релізу протягом місяця.

Замовте налаштування 360-фото — підвищте конверсію каталогу.