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

Сроки

Инфографика товаров — не дизайн-задача, а инженерная. Правильно выстроенная архитектура позволяет добавлять новые шаблоны без переписывания системы и держать данные актуальными при любом объёме каталога.