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

Менеджер каталога выгружает 3 000 карточек из 1С — у каждой есть характеристики: мощность, размеры, материал, совместимость. Всё это лежит в свойствах инфоблока как текст. Покупатель открывает карточку и видит стену цифр без контекста. Конверсия ниже обычной, возврат — выше нормы. Мы решаем эту проблему: переводим технические данные в визуальный язык прямо в карточке товара. Наш опыт — 7 лет в интеграциях Битрикс, более 50 проектов с автоматизацией каталогов. Инфографика товаров для 1С-Битрикс — это не дизайн, а инженерная задача, требующая правильной архитектуры данных и шаблонов. По данным кейса, внедрение инфографики увеличивает конверсию на 30–40%. Окупаемость автоматизации — 2–3 месяца. Экономия бюджета достигает 80% на масштабных каталогах.

Задача нетривиальная, потому что инфографику нужно не нарисовать один раз, а генерировать автоматически из свойств инфоблока — для тысяч позиций с разными характеристиками. При обмене с 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 — оптимален для большинства интернет-магазинов.

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

Шаблоны инфографики и их применение

Каждый шаблон — отдельный 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 шагов

1. Аудит структуры свойств — определяем, какие характеристики нужно визуализировать, и нормализуем их.
2. Проектирование шаблонов — создаём SVG-шаблоны под каждый тип товара (bar, gauge, radar).
3. Реализация компонента — пишем кастомный компонент генерации с кешированием.
4. Интеграция с карточкой товара — подключаем компонент в шаблон catalog.element.
5. Тестирование и деплой — проверяем обновление при изменении свойств через событие.

Что даёт автоматическая инфографика?

Автоматизация исключает ручную отрисовку: для 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 недели.

Сроки

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