Интерактивное вращение 360° Битрикс

Показывает товар в интерактивном вращении на 360 градусов. Администратор загружает серию фотографий объекта, снятых по кругу, а посетитель крутит объект мышью, пальцем или клавиатурой прямо на странице товара.

Обычная карточка товара показывает предмет с двух-трёх ракурсов. Круговой обзор даёт покупателю рассмотреть вещь со всех сторон, и решение о покупке принимается быстрее, а возвратов из-за несовпадения ожиданий становится меньше.

Модуль берёт на себя всю техническую часть: хранение серий кадров, подготовку лёгких копий изображений в современных форматах, плавную выдачу кадров при вращении и вывод просмотрщика на странице. От контент-менеджера требуется только загрузить фотографии.

Основные возможности

Галереи и загрузка кадров

- Неограниченное число независимых галерей;
- Загрузка обычной формой: JPEG, PNG, WebP, GIF или ZIP-архив с кадрами;
- Новые кадры сортируются по имени файла естественным порядком (frame-1, frame-2, frame-10);
- Ручная перестановка кадров мышью и удаление лишних;
- Нормализация JPEG при загрузке: разворот по EXIF-ориентации, удаление лишних метаданных, приведение цветового профиля к sRGB при наличии расширения Imagick.

Просмотр на сайте

- Вращение мышью, пальцем на сенсорном экране, стрелками клавиатуры и шкалой кадров;
- Инерция после броска, настраиваемая чувствительность и направление вращения;
- Масштабирование колесом мыши, щипком и клавишами, панорамирование увеличенного кадра;
- Автовращение, которое останавливается, когда просмотрщик уходит за пределы экрана;
- Режим без зацикливания: прокрутка идёт от первого кадра до последнего и обратно;
- Полноэкранный режим, включая браузеры без Fullscreen API, например Safari на iPhone;
- Несколько просмотрщиков на одной странице.

Оформление

- Каждый элемент панели управления включается и выключается отдельно: стрелки, кнопка автовращения, шкала кадров, кнопки масштаба, кнопка полного экрана, подсказка о вращении, полоса загрузки, квадрат полного экрана в углу кадра и плашка «360°»;
- Настраиваемые цвета: фон под фотографиями, фон панели, цвет кнопок и цвет акцента;
- Размеры просмотрщика подстраиваются под ширину контейнера;
- Вёрстка построена на внешних CSS и JavaScript без встроенных script и style, поэтому решение работает при строгой Content-Security-Policy.

Производительность

- Копии каждого кадра в WebP и AVIF плюс уменьшенные варианты для мобильных;
- Выдача через тег picture, браузер сам выбирает самый лёгкий поддерживаемый формат;
- Предзагрузка соседних кадров вместо загрузки всей серии целиком, режим переключается параметром компонента;
- Обработка изображений вынесена в фоновую очередь с атомарной блокировкой заданий, восстановлением зависших заданий и повтором ошибок;
- Исходные кадры доступны сразу после загрузки, не дожидаясь оптимизации;
- Штатное кеширование компонента со сбросом управляемого кеша после изменения галереи.

Интеграция с каталогом

- Пользовательский тип свойства инфоблока «Привязка к 360»: галерея выбирается прямо в карточке товара из выпадающего списка;
- Компонент находит галерею по товару автоматически, поэтому один вызов в шаблоне обслуживает весь каталог;
- Галерею можно ограничить конкретным сайтом в многосайтовой конфигурации;

Администрирование и контроль

- Страница диагностики: версия схемы, состояние очереди, объём исходного и оптимизированного хранилища, режим запуска агентов с предупреждением о запуске на хитах, поиск и удаление потерянных файлов с защитным периодом 24 часа;
- Журнал действий администратора: кто, когда, с какой галереей и с какого IP-адреса;
- Вкладка «Интеграция» в редакторе галереи с готовыми примерами подключения;
- Защита от CSRF на всех операциях, изменяющих данные.

Интерфейсы в админке

Раздел «Сервисы → Интерактивное вращение 360°».

Раздел «Настройки → Настройки продукта → Настройки модулей → Интерактивное вращение 360°».