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