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

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

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

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

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

Каждый компонент имеет папку templates/ с шаблонами. Шаблон .default — используемый по умолчанию. Битрикс ищет шаблон компонента в следующем порядке:

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');

Сроки