Налаштування 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

Що включає професійне встановлення 1С-Бітрікс

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

Як вибрати хостинг та редакцію для встановлення 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 з оптовими цінами та трьома складами. Перехід на «Бізнес» — доплата різниці, дані не втрачаються, але краще передбачити заздалегідь. Наші фахівці підберуть редакцію під поточні завдання і з запасом на зростання. Наприклад, ліцензія «Бізнес» окупається за рахунок мультискладу та обміну з 1С, а неправильний вибір призводить до додаткових витрат, які можуть у 2–3 рази перевищити вартість ліцензії.

Які налаштування сервера критичні для 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. Порівняно з Apache + mod_php, зв’язка nginx + PHP-FPM споживає на 30% менше оперативної пам’яті при однаковому навантаженні — це підтверджено на наших проєктах.

База даних та кешування

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']]]]

Redis прискорює роботу сайту в 1.5 рази порівняно з Memcached завдяки постійним з’єднанням та вбудованому кешуванню сесій.

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 з правильною конфігурацією сайт «полетів». Неправильна конфігурація призводить до невиправданих витрат — іноді в 2–3 рази дорожче, ніж вартість професійного налаштування. Ви отримуєте готову архітектуру, яка масштабується. Замовте встановлення 1С-Бітрікс під ключ — й отримайте надійну платформу для зростання бізнесу. Зв'яжіться з нами — розрахуємо вартість під ваш проєкт. Досвід понад 7 років, реалізовано 120+ проєктів на Бітрікс, включаючи highload‑магазини з каталогами понад 100 000 товарів. Звертайтеся — ми допоможемо налаштувати Бітрікс під ваш проєкт.