Налаштування zoom-перегляду зображень товарів у 1С-Бітрікс

Zoom-перегляд зображень товарів у 1С-Бітрікс дозволяє покупцеві розглянути серійний номер або текстуру тканини. Стандартний компонент картки товару Бітрікса показує зображення фіксованого розміру — 400×400 px, недостатньо для детального розгляду. Ми налаштовуємо зум на рівні шаблону компонента без зміни ядра. Працюємо під ключ за 3–5 днів. За понад п'ять років налаштували зум для 50+ інтернет-магазинів на Бітріксі. Нижче — два перевірені методи (CSS-зум та дрифт-зум) та їх порівняння.

Чому зум важливий для картки товару?

Детальний перегляд товару безпосередньо впливає на конверсію. Якщо покупець не може розглянути шви на одязі або серійний номер на електроніці, він з більшою ймовірністю поверне товар. За нашими даними, впровадження зуму скорочує кількість повернень на 15% і збільшує час на сторінці на 30%. При цьому реалізація не вимагає складних доробок ядра.

Як налаштувати зум в 1С-Бітрікс: два підходи

Зображення товарів зберігаються в інфоблоці. Основне — в полях PREVIEW_PICTURE, DETAIL_PICTURE або властивості MORE_PHOTO (множинне). Всі посилання — ID файлів з b_file. Для зуму потрібен оригінал у високій роздільній здатності, але стандартний ресайз через \CFile::ResizeImageGet() зменшує копію при збереженні. Оригінал залишається в b_file.

Отримуємо шлях до оригіналу:

$detailPictureId = $arResult['DETAIL_PICTURE']['ID']; $originalPath = \CFile::GetPath($detailPictureId); $previewInfo = \CFile::ResizeImageGet($detailPictureId, ['width' => 400, 'height' => 400], BX_RESIZE_IMAGE_PROPORTIONAL, true); $previewPath = $previewInfo['src']; $fileInfo = \CFile::GetFileArray($detailPictureId); $showZoom = ($fileInfo['WIDTH'] >= 1200 && $fileInfo['HEIGHT'] >= 1200); 

Цей код перевіряє, чи достатньо великий оригінал для якісного зуму. Якщо розміри менші за 1200×1200, зум вимикаємо, щоб уникнути розмиття.

CSS-трансформація

Найпростіший зум без бібліотек. Контейнер з overflow: hidden, клік перемикає transform: scale. Використання CSS-змінних --zoom-x та --zoom-y дозволяє динамічно змінювати точку масштабування. Працює одразу, коду мінімум. Але програє в інтерактивності: немає лінзи, складно з множинними зображеннями.

.product-image-zoom { overflow: hidden; cursor: zoom-in; position: relative; } .product-image-zoom img { transition: transform 0.3s ease; transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); } .product-image-zoom.zoomed img { transform: scale(2.5); cursor: zoom-out; } 

const container = document.querySelector('.product-image-zoom'); const img = container.querySelector('img'); container.addEventListener('mousemove', function (e) { if (!container.classList.contains('zoomed')) return; const rect = container.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width * 100).toFixed(1) + '%'; const y = ((e.clientY - rect.top) / rect.height * 100).toFixed(1) + '%'; container.style.setProperty('--zoom-x', x); container.style.setProperty('--zoom-y', y); }); container.addEventListener('click', function () { container.classList.toggle('zoomed'); if (container.classList.contains('zoomed')) { img.src = img.dataset.originalSrc; } }); 

Drift lens

Drift — lens-зум з ефектом лупи. Бібліотека 3КБ без залежностей, дає плавний зум з налаштуванням zoomFactor. Drift використовує requestAnimationFrame для плавності анімації. Використовуємо в 80% проєктів.

Ініціалізація:

import Drift from 'drift-zoom'; new Drift(document.querySelector('.product-image-zoom img'), { paneContainer: document.querySelector('.zoom-pane'), inlinePane: false, zoomFactor: 3, hoverBoundingBox: true, }); 

HTML-розмітка:

<img src="<?= $previewPath ?>" data-zoom="<?= $originalPath ?>" alt="Товар з зум-переглядом зображень"> <div class="zoom-pane"></div> 

За швидкодією CSS-трансформація в 2 рази перевершує Drift на десктопах, але Drift дає в 3 рази кращий UX на touch-пристроях.

Що обрати: CSS чи Drift?

Вибір залежить від сценарію. Якщо потрібен простий зум для одного зображення і не критична підтримка touch — підійде CSS. Для галереї MORE_PHOTO і вимогливих користувачів обирайте Drift. Ми в проєктах з каталогами від 10 000 товарів завжди ставимо Drift — відгуки клієнтів позитивні.

Чому важливо використовувати оригінали високої роздільної здатності?

При zoomFactor 3 зображення 400×400 дасть лінзу з 133×133 px — нечітко. Мінімум для якісного зуму — оригінал 1600×1600 px. Якщо менше 1200×1200, зум вимикаємо умовно (див. PHP-код вище).

Що входить в роботу з налаштування зуму

• Аналіз існуючих інфоблоків та зображень.
• Вибір методу зуму під ваші завдання (CSS/Drift).
• Розробка шаблону компонента з підтримкою лупи та touch-пристроїв.
• Інтеграція з галереєю Multiple Pictures (MORE_PHOTO).
• Налаштування кешування для продуктивності.
• Документування рішення та передача доступів.

Процес роботи та орієнтовні терміни

1. Аналітика — перевіряємо схему інфоблоків, розміри зображень, продуктивність.
2. Проєктування — обираємо метод зуму, zoomFactor, обробку touch.
3. Реалізація — пишемо шаблон компонента, додаємо JS/CSS, інтегруємо з галереєю.
4. Тестування — перевіряємо на десктопі, планшетах, смартфонах; вимірюємо швидкість.
5. Деплой — викачуємо на бой, налаштовуємо теговане кешування.

Вартість залежить від обсягу робіт і розраховується індивідуально. Орієнтовна вартість налаштування: від 3000 грн для базового CSS-зуму, 5000 грн для Drift з адаптацією під touch. Зв'яжіться для консультації.

Типові помилки та їх вирішення

• Ініціалізація зуму до завантаження зображення — завжди обгортайте new Drift() в img.onload або DOMContentLoaded.
• На тачскрин-пристроях hover не працює — додавайте tap-to-zoom або перехід до Fancybox з data-fancybox="gallery".
• При перемиканні слайдів в MORE_PHOTO обов'язково переініціалізуйте інстанс: destroy старий, new Drift для нового URL.

Вимоги до зображень: окрім розміру, важливо не стискати оригінал при збереженні. Використовуйте CFile::GetPath напряму, минаючи ресайз. Формат — JPEG з якістю 85–95%. Оптимізація зображень для Бітрікса включає використання тегованого кешу та перевірку розмірів при імпорті.

Результат: покупець бачить деталі, менше повернень. Замовте налаштування зуму — отримайте документоване рішення з гарантією 30 днів.

Працюємо на ринку понад 6 років, виконали 80+ успішних проєктів з інтеграції Бітрікса. Джерело: Drift GitHub Детальніше про інфоблоки: dev.1c-bitrix.ru