Налаштування 360-фото товарів на 1С-Бітрікс

Налаштування 360-фото товарів у 1С-Бітрікс

Покупатель хочет розглянути товар зі всіх боків до замовлення. Звичайна галерея з 8 фото не замінює можливість повернути об'єкт. 360-просмотр — це послідовність кадрів (24-72 знімків), які при перетаскуванні створюють ілюзію вращення.

Зберігання кадрів 360-зйомки

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

JavaScript-плеєр для 360

Найпростіша реалізація без сторонніх бібліотек — на Canvas або CSS background-position. Бібліотека three-sixty.js або js-cloudimage-360-view підходять для production.

Реалізація на базі 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) ?>
);

Передзавантаження кадрів

При ліниву завантаженню кадрів вращення буде лагати при першому прокруті. Правильний підхід — передзавантажити всі кадри у фоні після завантаження сторінки:

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 через cwebp або через компонент ресайзу Бітрікса з форматом webp.
• Зменшення роздільної здатності кадрів до 600×450 — для 360-вращення цього достатньо.
• Прогресивна загрузка: спочатку показувати перший кадр, решту — у фоні.

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

Зберігання в окремому інфоблоці

Для каталогів зі сотнями товарів, які мають 360-набори, зберігання кадрів у властивості основного інфоблока створює велику кількість записів у b_iblock_element_property. Альтернатива — окремий інфоблок для 360-галерей з прив'язкою до товару через PROPERTY_TYPE = 'E' (зв'язок з елементом). Це спрощує управління наборами та дозволяє прив'язувати один набір до кількох SKU.