Настройка 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-фото — повысьте конверсию каталога.