Створення інфографіки товарів для 1С-Бітрікс

Створення інфографіки товарів для 1С-Бітрікс

Менеджер каталогу вивантажує 3 000 карток з 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 на льоту). Кастомний компонент Бітрікс у template.php читає властивості елемента і рендерить SVG через PHP-шаблонізацію. Підходить для статичних зображень, які можна кешувати.

// /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(...).

Клієнтський (Canvas/SVG через JS). Дані передаються в data-атрибути HTML-елемента, JS-бібліотека (D3.js або Chart.js) малює інтерактивні графіки. Складніше з точки зору SEO — пошуковик бачить атрибути, але не бачить картинку.

Для більшості інтернет-магазинів оптимальний гібрид: статичний SVG серверного рендерингу + hover-анімація на JS. Статика індексується, інтерактивність не втрачається.

Шаблони інфографіки та їх застосування

Кожен шаблон — окремий 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С при пакетному імпорті тисяч позицій.

Експорт інфографіки як зображень

Частина клієнтів хоче інфографіку не як SVG у тілі сторінки, а як PNG-зображення — для маркетплейсів, прайс-листів, email-розсилок. Тут потрібна серверна растеризація:

• Puppeteer (Node.js) — завантажує сторінку, робить скріншот SVG-блока. Запускається як окремий сервіс, Бітрікс звертається до нього через curl.
• Inkscape CLI — конвертує SVG у PNG без браузера. Підходить для Linux-оточення.
• ImageMagick — для простих шаблонів (накладення тексту на фонове зображення).

Готові PNG зберігаються у папку /upload/infographic/{ELEMENT_ID}/ і прив'язуються до елемента як властивість типу «Файл» — стандартний механізм Бітрікс.

Інтеграція з карткою товару

У шаблоні компонента 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 у шаблоні. Типове рішення: інфографіка під описом товару, над блоком характеристик у вигляді таблиці.

Терміни

Інфографіка товарів — не дизайн-завдання, а інженерне. Правильно побудована архітектура дозволяє додавати нові шаблони без переписування системи і тримати дані актуальними при будь-якому обсязі каталогу.