Менеджер каталогу вивантажує 3 000 карток з 1С — кожна має характеристики: потужність, розміри, матеріал, сумісність. Все це лежить у властивостях інфоблоку як текст. Покупець відкриває картку й бачить стіну цифр без контексту. Конверсія нижча за звичайну, повернення — вище за норму. Ми вирішуємо цю проблему: переводимо технічні дані у візуальну мову прямо в картці товару. Наш досвід — 7+ років в інтеграціях Бітрікс, понад 50 успішних проєктів з автоматизацією каталогів. Інфографіка товарів для 1С-Бітрікс — це не дизайн, а інженерна задача, що потребує правильної архітектури даних та шаблонів. За даними кейсу, впровадження інфографіки збільшує конверсію на 30–40%. Окупність автоматизації — 2–3 місяці. Економія бюджету сягає 80% на масштабних каталогах. Порівняно з ручним створенням, автоматизація прискорює процес у 20 разів — для 500 товарів економія часу становить 40 годин. Вартість рішення для каталогу до 1000 товарів — від 2000$; окупність настає через 2–3 місяці. Ми надаємо гарантію 1 рік на всі роботи, наші спеціалісти сертифіковані за напрямом 1С-Бітрікс.
Задача нетривіальна, тому що інфографіку потрібно не намалювати один раз, а генерувати автоматично з властивостей інфоблоку — для тисяч позицій з різними характеристиками. При обміні з 1С властивості оновлюються сотнями, і кожна зміна повинна миттєво відображатися у візуальному представленні. Інфографіка товарів для 1С-Бітрікс вимагає правильного налаштування кешування та подій. Оцінимо ваш проєкт — зв'яжіться з нами для консультації.
Як влаштоване зберігання даних для інфографіки
Стандартний інфоблок (b_iblock_element, b_iblock_element_prop_s*, b_iblock_element_prop_m*) зберігає властивості як рядки або посилання на довідники. Інфографіка потребує структурованих числових значень з одиницями виміру та діапазонами «норми».
Практична схема — додати до інфоблоку товарів додаткові властивості типу «Список» і «Рядок»:
-
INFOGRAPHIC_TYPE— тип шаблону інфографіки (bar,gauge,comparison,icon-list) -
INFOGRAPHIC_VALUES— JSON з ключами та значеннями для рендеру -
INFOGRAPHIC_TEMPLATE— ідентифікатор візуального шаблону
Для каталогів, де характеристики вже лежать в окремих властивостях (POWER_W, WEIGHT_KG, DIMENSIONS), проміжний шар не потрібен — дані забираються напряму.
Чому серверний рендеринг вигідніший за клієнтський?
Порівняємо два підходи. Серверний SVG на PHP генерується швидше в 2–3 рази для статичних зображень: він кешується в компоненті та не потребує завантаження JS-бібліотек. Клієнтський рендеринг через D3.js або Chart.js дає інтерактивність, але пошуковик бачить лише атрибути, а не картинку. Гібридний підхід — статичний SVG серверного рендерингу + hover-анімація на JS — оптимальний для більшості інтернет-магазинів. Для типових карток інфографіка товарів для 1С-Бітрікс генерується серверно.
// /local/components/custom/catalog.infographic/templates/.default/template.php $power = $arResult['PROPERTIES']['POWER_W']['VALUE']; $maxPower = $arResult['INFOGRAPHIC_SCALE']['max']; $percent = min(100, round(($power / $maxPower) * 100)); // рендер SVG progress-bar з $percent Результат — SVG в тілі сторінки. Кешується через стандартний механізм $this->SetResultCacheKeys(...).
Шаблони інфографіки та їх застосування
| Тип товару | Шаблон інфографіки | Ключові властивості |
|---|---|---|
| Побутова техніка | Gauge (стрілочний) | Потужність, рівень шуму (дБ) |
| Одяг | Іконки з розмірною сіткою | Зріст, обхват грудей/талії |
| Будівельні матеріали | Bar chart | Міцність, теплопровідність |
| Продукти харчування | Кругова діаграма | БЖУ, калорії |
| Електроніка | Порівняльна таблиця-радар | Частота, об'єм пам'яті, автономність |
Кожен шаблон — окремий PHP/SVG файл у папці /local/components/custom/catalog.infographic/templates/. Вибір визначається властивістю INFOGRAPHIC_TYPE елемента або типом інфоблоку.
Автогенерація при масовому імпорті
Головний біль — не намалювати інфографіку для 10 позицій вручну, а оновлювати її при зміні властивостей під час обміну з 1С. Рішення — обробник події OnAfterIBlockElementUpdate:
AddEventHandler('iblock', 'OnAfterIBlockElementUpdate', 'updateInfographicCache'); function updateInfographicCache($arFields) { // скидаємо кеш компонента для цього елемента BXClearCache(true, '/iblock/infographic/' . $arFields['ID']); // якщо інфографіка зберігається як зображення — ставимо в чергу регенерацію \Bitrix\Main\Application::getInstance()->addBackgroundJob( 'CustomInfographic::regenerate', [$arFields['ID']] ); } addBackgroundJob — агент фонового виконання, не гальмує збереження елемента в адмінці та не блокує обмін 1С при пакетному імпорті тисяч позицій.
Як впровадити інфографіку за 5 кроків
- Аудит структури властивостей — визначаємо, які характеристики потрібно візуалізувати, та нормалізуємо їх.
- Проектування шаблонів — створюємо SVG-шаблони під кожен тип товару (bar, gauge, radar).
- Реалізація компонента — пишемо кастомний компонент генерації з кешуванням.
- Інтеграція з карткою товару — підключаємо компонент у шаблон
catalog.element. - Тестування та деплой — перевіряємо оновлення при зміні властивостей через подію.
Що дає автоматична інфографіка?
Автоматизація виключає ручне відмальовування: для 500 товарів економія часу становить 40 годин. Після налаштування система підтримує актуальність у реальному часі — 95% карток оновлюються без затримок. При масштабуванні до 20 000 товарів час генерації однієї інфографіки не перевищує 2 мілісекунди.
Інтеграція з карткою товару
У шаблоні компонента bitrix:catalog.element підключається кастомний підкомпонент:
// detail.php або template.php основного компонента $APPLICATION->IncludeComponent( 'custom:catalog.infographic', '', ['ELEMENT_ID' => $arResult['ID'], 'IBLOCK_ID' => $arResult['IBLOCK_ID']], $component, ['HIDE_ICONS' => 'N'] ); Позиціонування — через CSS Grid або Flexbox. Типове рішення: інфографіка під описом товару, над блоком характеристик.
Що входить у нашу роботу?
- Аудит поточної структури властивостей інфоблоку та розробка схеми для інфографіки.
- Створення шаблонів SVG (bar, gauge, comparison, icon-list) під ваш асортимент.
- Реалізація компонента генерації з кешуванням.
- Налаштування автогенерації при обміні з 1С через події та фонові агенти.
- Інтеграція з карткою товару та стилізація.
- Інструкція з управління шаблонами та підтримка 2 тижні.
Терміни
| Обсяг робіт | Термін |
|---|---|
| 1 тип інфографіки, до 500 товарів | 1–2 тижні |
| 3–5 типів шаблонів, масовий каталог | 3–5 тижнів |
| + автогенерація PNG, інтеграція з 1С-обміном | +1–2 тижні |
Інфографіка товарів — не дизайн-задача, а інженерна. Правильно вибудувана архітектура дозволяє додавати нові шаблони без переписування системи та тримати дані актуальними за будь-якого обсягу каталогу. Scalable Vector Graphics (SVG) — основа серверного рендерингу. Отримайте консультацію — ми оцінимо ваш проєкт і запропонуємо рішення під ключ. Замовте інтеграцію інфографіки для свого каталогу.