Настройка 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

Что включает профессиональная установка 1С-Битрикс

Мы начинаем установку 1С-Битрикс с проверки innodb_buffer_pool_size. Дефолтное значение MySQL (128 МБ) — приговор для интернет-магазина с каталогом на 10 000+ товаров. Мы ставим 70–80% от доступной RAM на выделенном сервере, 50% на VPS. Одна эта настройка ускоряет сайт в 2–3 раза по сравнению с дефолтом. Оценим ваш проект за один день — получите консультацию. Обращайтесь, чтобы заказать установку под ключ с гарантией производительности.

Как выбрать хостинг и редакцию для установки 1С-Битрикс?

BitrixVM — виртуальная машина с предустановленным стеком: nginx + Apache, PHP-FPM, MySQL/MariaDB, Sphinx, Push‑сервер. Для VPS — лучший старт. Всё уже сконфигурировано под Битрикс, включая OPcache, логротацию и firewall. Управление через веб‑панель на порту 8890.

VPS/VDS — золотая середина. Минимальная конфигурация для среднего интернет‑магазина: 2 vCPU, 4 ГБ RAM, SSD. Оптимальная: 4 vCPU, 8 ГБ RAM. ОС: Ubuntu 22.04 или Debian 12. Если не BitrixVM — настраиваем стек вручную под задачу. Виртуальный хостинг — только для визиток и лендингов. Требования: PHP 8.0+, MySQL 5.7+ / MariaDB 10.0+, 512 МБ RAM, .htaccess. Хостинг‑партнёры 1С-Битрикс — гарантия совместимости. Выделенный сервер — для highload. Типичная архитектура: веб‑сервер отдельно, база данных отдельно, Redis/Memcached отдельно. На редакции «Энтерпрайз» — веб‑кластер с балансировщиком. Облако (Yandex Cloud, VK Cloud, Selectel) — когда нагрузка скачет: распродажи, сезонные пики. Автомасштабирование через Managed Kubernetes или просто вертикальное масштабирование VM.

Выбор редакции — не менее важный шаг. Частая ошибка: берут «Малый бизнес» для магазина, который через полгода вырастает до B2B с оптовыми ценами и тремя складами. Переход на «Бизнес» — доплата разницы, данные не теряются, но лучше предусмотреть заранее. Наши специалисты подберут редакцию под текущие задачи и с запасом на рост. Например, лицензия «Бизнес» (около 35 000 ₽) окупается за счёт мультисклада и обмена с 1С, а неправильный выбор приводит к потере до 30 000 ₽ ежемесячно на избыточных ресурсах.

Какие настройки сервера критичны для 1С-Битрикс?

Веб‑сервер и PHP

nginx как reverse proxy + Apache (mod_php) или nginx + PHP-FPM напрямую. Второй вариант экономит память — Apache не нужен. Но некоторые модули Битрикс используют .htaccess, поэтому для совместимости иногда оставляем Apache. Конфигурация nginx: fastcgi_read_timeout 300 — для долгих операций (импорт из 1С), client_max_body_size 1024m — загрузка больших файлов. Закрываем доступ к .settings.php, .settings_extra.php, bitrix/.settings.php — там пароли к базе. Rewrite‑правила из urlrewrite.php — Битрикс сам генерирует, но при nginx + PHP-FPM нужно продублировать. PHP 8.0–8.2 с расширениями: mbstring, curl, gd, xml, json, opcache, redis/memcached. Ключевые настройки php.ini: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, max_execution_time=300, memory_limit=512M, upload_max_filesize=100M, post_max_size=128M.

База данных и кэширование

MySQL/MariaDB. Ключевые параметры my.cnf: innodb_buffer_pool_size — 70–80% RAM, innodb_log_file_size=256M, tmp_table_size=256M, max_heap_table_size=256M, thread_pool_size — по количеству ядер CPU. Кодировка utf8mb4 обязательно, иначе эмодзи и спецсимволы ломаются. Redis предпочтительнее Memcached для Битрикс — поддерживает persistent connections и более надёжен. Настраиваем в .settings_extra.php:

'cache' => ['value' => ['type' => ['class_name' => '\\Bitrix\\Main\\Data\\CacheEngineRedis']]]
'session' => ['value' => ['mode' => 'default', 'handlers' => ['general' => ['type' => 'redis']]]]

SSL, почта и cron

SSL — Let's Encrypt через certbot в 90% случаев. Редирект HTTP → HTTPS (301), HSTS, TLS 1.2/1.3, OCSP Stapling. В Битрикс переключаем на HTTPS в настройках главного модуля. Почта: отказываемся от mail() — подключаем SMTP (Яндекс.Почта для домена, Mail.ru для бизнеса). Обязательно настраиваем SPF, DKIM, DMARC. Без SPF письма уходят в спам. Тестируем доставляемость через mail‑tester.com — оценка 9+/10. Cron: агенты Битрикс переводим на системный cron — * * * * * /usr/bin/php /var/www/bitrix/modules/main/tools/cron_events.php. На cron вешаем обмен с 1С (15–60 мин), поисковую переиндексацию, бэкапы (mysqldump + rsync, ротация 7+4), очистку временных файлов.

Безопасность и администрирование

Файловая система: владелец www-data, директории 755, файлы 644, upload 775. nginx блокирует доступ к файлам конфигурации. Включаем Проактивную защиту Битрикс — WAF, контроль активности (блокировка после 5 неудачных попыток), проверку целостности ядра. Для админ‑панели: двухфакторная аутентификация через Google Authenticator или OTP, ограничение доступа по IP через nginx для параноиков.

Сколько времени занимает установка 1С-Битрикс и настройка?

Проверка после установки (пошаговый чек‑лист)

1. Монитор производительности (/bitrix/admin/perfmon_panel.php) — целимся в 30+ баллов. Ниже 20 — есть серьёзные проблемы с конфигурацией.
2. Проверка системы — автоматическая проверка всех параметров. Красные пункты — исправляем обязательно, жёлтые — по ситуации.
3. Сканер безопасности — проверка на типичные уязвимости.
4. PageSpeed Insights — TTFB < 200мс на VPS, LCP < 2.5с.
5. Тестовый обмен с 1С — если планируется интеграция, проверяем CommerceML‑обмен до запуска.

Дополнительно проверяем версии ПО, настройки кэширования, работу cron, SSL‑сертификат, SPF/DKIM/DMARC, права доступа, удаление дефолтных пользователей и страниц. Для проектов с 54‑ФЗ убеждаемся, что настроена фискализация через ОФД‑провайдера.

Что входит в работу (deliverables)

• Полностью настроенный сервер под 1С-Битрикс с оптимизацией MySQL, PHP, nginx.
• Установленная и активированная лицензия нужной редакции.
• SSL‑сертификат, почтовые настройки, cron и бэкапы.
• Документация: все параметры конфигурации, доступы, cron‑задачи.
• Обучение контент‑менеджера: как заходить в админку, добавлять товары, загружать изображения.
• Поддержка после установки в течение 30 дней — консультации по настройкам.

Почему стоит доверить установку профессионалам?

Неправильная установка — потеря времени и денег. Мы видели проекты, где магазин на «Старте» не мог выдержать 50 посетителей, потому что не был настроен innodb_buffer_pool_size. После переноса на VPS с правильной конфигурацией сайт «полетел». Неправильная конфигурация может обходиться в 30 000 ₽ ежемесячно из‑за избыточного потребления ресурсов. Вы получаете готовую архитектуру, которая масштабируется. Закажите установку 1С-Битрикс под ключ — и получите надёжную платформу для роста бизнеса. Свяжитесь с нами — рассчитаем стоимость под ваш проект. Опыт более 7 лет, реализовано 120+ проектов на Битрикс, включая highload‑магазины с миллионными каталогами. Обращайтесь — мы поможем настроить Битрикс под ваш проект.