Кастомізація шаблонів стандартних компонентів 1С-Бітрікс

Кастомізація шаблонів стандартних компонентів 1С-Бітрікс

Стандартні компоненти 1С-Бітрікс працюють з коробки, але їхній зовнішній вигляд майже завжди не відповідає макету. Перший інстинкт — редагувати файли в /bitrix/components/bitrix/ — призводить до втрати змін при оновленні ядра. Правильний шлях: кастомні шаблони компонентів у /local/ або в папці шаблону сайту.

Кастомізація шаблонів стандартних компонентів 1С-Бітрікс

Структура шаблонів компонентів

Кожен компонент має папку templates/ із шаблонами. Шаблон .default — використовується за замовчуванням. 1С-Бітрікс шукає шаблон компонента в такому порядку:

1. /local/templates/<шаблон_сайту>/components/<namespace>/<компонент>/<шаблон>/
2. /local/components/<namespace>/<компонент>/templates/<шаблон>/
3. /bitrix/templates/<шаблон_сайту>/components/...
4. /bitrix/components/<namespace>/<компонент>/templates/<шаблон>/

Це означає: достатньо створити потрібну структуру папок у /local/ і покласти туди перевизначений файл. Оригінал у /bitrix/ залишається незайманим.

Створення кастомного шаблону

Розбір на прикладі bitrix:catalog.element — картка товару.

Дивимося оригінал:

/bitrix/components/bitrix/catalog.element/templates/.default/template.php

Створюємо кастомний шаблон:

/local/templates/my_site/components/bitrix/catalog.element/.default/template.php
/local/templates/my_site/components/bitrix/catalog.element/.default/style.css
/local/templates/my_site/components/bitrix/catalog.element/.default/script.js

У template.php доступні всі змінні, підготовлені компонентом: $arResult, $arParams, $arCurrentValues. Переглядати їхній склад через \Bitrix\Main\Diag\Debug::dump($arResult) або компонент bitrix:diag.phpinfo.

Підключення шаблону у виклику компонента

<?$APPLICATION->IncludeComponent(
    "bitrix:catalog.element",
    ".default", // ім'я шаблону
    [
        "IBLOCK_TYPE" => "catalog",
        "IBLOCK_ID"   => 12,
    ],
    false
);?>

Якщо потрібен окремий шаблон для конкретної сторінки або секції, створюємо шаблон із довільним іменем, наприклад card_v2, та вказуємо його при виклику.

Кастомізація шаблонів комплексних компонентів

Комплексні компоненти (bitrix:catalog, bitrix:news) складаються з кількох підключуваних компонентів. Шаблон комплексного компонента містить component_epilog.php і підпапки для субкомпонентів.

/local/templates/my_site/components/bitrix/catalog/.default/
    template.php
    component_epilog.php
    bitrix/
        catalog.section/
            .default/
                template.php
        catalog.element/
            .default/
                template.php

Це дозволяє перевизначити верстку розділу та картки в рамках одного шаблону каталогу.

result_modifier.php і component_epilog.php

Два файли, які дають доступ до даних компонента без перевизначення його логіки:

result_modifier.php — виконується після основного коду компонента, до шаблону. Тут можна змінити $arResult:

// result_modifier.php
if (!empty($arResult['ITEMS'])) {
    foreach ($arResult['ITEMS'] as &$item) {
        $item['PRICE_FORMATTED'] = number_format($item['CATALOG_PRICE_1'], 0, '.', ' ') . ' ₽';
    }
}

component_epilog.php — виконується після шаблону. Використовується для фінальних маніпуляцій: встановлення заголовка сторінки, додавання breadcrumbs, підключення скриптів.

Підключення CSS і JS у шаблоні компонента

// У template.php
$this->addCSS($this->GetFolder() . '/style.css');
$this->addJS($this->GetFolder() . '/script.js');

// Або через Asset Manager для об'єднання файлів
\Bitrix\Main\Page\Asset::getInstance()->addCss($this->GetFolder() . '/style.css');

Терміни