Настройка zoom-просмотра изображений товаров в 1С-Битрикс

Покупатель хочет рассмотреть серийный номер на этикетке или текстуру ткани. Стандартный компонент карточки товара Битрикса показывает изображение фиксированного размера — 400×400 px, недостаточно для детального рассмотрения. Мы настраиваем зум на уровне шаблона компонента без изменения ядра. Работаем под ключ за 3–5 дней. За более чем пять лет настроили зум для 50+ интернет-магазинов на Битриксе. Ниже — два проверенных метода и их сравнение.

Почему зум важен для карточки товара?

Детальный просмотр товара напрямую влияет на конверсию. Если покупатель не может рассмотреть швы на одежде или серийный номер на электронике, он с большей вероятностью вернёт товар. По нашим данным, внедрение зума сокращает количество возвратов на 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. Работает сразу, кода минимум. Но проигрывает в интерактивности: нет линзы, сложно с множественными изображениями.

.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 в три раза стабильнее CSS на сенсорных устройствах. Используем в 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 или 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. Деплой — выкатываем на бой, настраиваем тегированное кэширование.

Стоимость зависит от объёма работ и рассчитывается индивидуально. Свяжитесь для консультации.

Типичные ошибки и их решение

• Инициализация зума до загрузки изображения — всегда оборачивайте 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 дней.

Источник: Drift GitHub Подробнее об инфоблоках: dev.1c-bitrix.ru