Creating product infographics for 1C-Bitrix

Creating Product Infographics for 1C-Bitrix

A catalog manager exports 3,000 product cards from 1C — each has attributes: power, dimensions, material, compatibility. All of this lives in infoblock properties as plain text. A buyer opens a card and sees a wall of numbers with no context. Conversion is below the floor, returns are above the norm. Infographics solve exactly this problem: they translate technical data into a visual language directly inside the product card.

The task is non-trivial because infographics must not be drawn once manually, but generated automatically from infoblock properties — for thousands of items with different attributes.

How Infographic Data is Stored

A standard infoblock (b_iblock_element, b_iblock_element_prop_s*, b_iblock_element_prop_m*) stores properties as strings or references to directories. Infographics require structured numeric values with units of measurement and "normal" ranges.

A practical approach — add extra properties of type "List" and "String" to the product infoblock:

• INFOGRAPHIC_TYPE — infographic template type (bar, gauge, comparison, icon-list)
• INFOGRAPHIC_VALUES — JSON with keys and values for rendering
• INFOGRAPHIC_TEMPLATE — visual template identifier

For catalogs where attributes already live in dedicated properties (POWER_W, WEIGHT_KG, DIMENSIONS), an intermediate layer is not needed — data is taken directly.

Generating Infographics: Two Approaches

Server-side (SVG on the fly). A custom Bitrix component in template.php reads element properties and renders SVG via PHP templating. Suitable for static images that can be cached.

// /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));
// render SVG progress-bar with $percent

The result is SVG embedded in the page body. It is cached together with the component via the standard $this->SetResultCacheKeys(...) mechanism.

Client-side (Canvas/SVG via JS). Data is passed into data attributes of an HTML element; a JS library (D3.js or Chart.js) renders interactive charts. More complex from an SEO perspective — search engines see the attributes but not the image.

For most online stores the optimal approach is a hybrid: a static SVG rendered server-side + hover animation in JS. The static version is indexed; interactivity is preserved.

Infographic Templates and Their Application

Each template is a separate PHP/SVG file in the /local/components/custom/catalog.infographic/templates/ folder. The template is selected based on the element's INFOGRAPHIC_TYPE property or the infoblock type.

Auto-Generation During Bulk Import

The main pain point is not drawing infographics for 10 items manually, but updating them when properties change during a 1C data exchange.

Solution — an OnAfterIBlockElementUpdate event handler:

AddEventHandler('iblock', 'OnAfterIBlockElementUpdate', 'updateInfographicCache');

function updateInfographicCache($arFields) {
    // clear the component cache for this element
    BXClearCache(true, '/iblock/infographic/' . $arFields['ID']);
    // if the infographic is stored as an image — queue regeneration
    \Bitrix\Main\Application::getInstance()->addBackgroundJob(
        'CustomInfographic::regenerate',
        [$arFields['ID']]
    );
}

addBackgroundJob is a background execution agent; it does not slow down element saving in the admin panel and does not block 1C exchange during bulk import of thousands of items.

Exporting Infographics as Images

Some clients want infographics not as SVG embedded in the page, but as PNG images — for marketplaces, price lists, and email newsletters. This requires server-side rasterization:

• Puppeteer (Node.js) — loads the page and takes a screenshot of the SVG block. Runs as a separate service; Bitrix calls it via curl.
• Inkscape CLI — converts SVG to PNG without a browser. Suitable for Linux environments.
• ImageMagick — for simple templates (overlaying text on a background image).

Finished PNGs are saved to /upload/infographic/{ELEMENT_ID}/ and linked to the element as a "File" type property — the standard Bitrix mechanism.

Integration with the Product Card

A custom subcomponent is connected inside the bitrix:catalog.element component template:

// detail.php or template.php of the main component
$APPLICATION->IncludeComponent(
    'custom:catalog.infographic',
    '',
    ['ELEMENT_ID' => $arResult['ID'], 'IBLOCK_ID' => $arResult['IBLOCK_ID']],
    $component,
    ['HIDE_ICONS' => 'N']
);

Positioning the infographic within the product card is handled via CSS Grid or Flexbox in the template. A typical solution: infographic below the product description, above the specifications table.

Timelines

Product infographics are an engineering task, not a design task. A properly built architecture allows adding new templates without rewriting the system and keeps data current at any catalog scale.