Верстка шаблона компонента 1С-Битрикс

Задача звучит просто: «поменяй карточку товара». На деле оказывается, что карточка — это шаблон компонента bitrix:catalog.element, который лежит в /bitrix/components/bitrix/catalog.element/templates/.default/, его трогать нельзя (затрётся при обновлении), нужно создавать переопределение в /local/ или в папке шаблона сайта, а сам template.php использует переменные $arResult, структура которых описана в документации не полностью.

Верстка шаблона компонента 1С-Битрикс

Механизм переопределения шаблонов

Битрикс ищет шаблон компонента в следующем порядке (упрощённо):

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

Правильное место для кастомных шаблонов — /local/templates/<шаблон>/components/ или /local/components/. Это гарантирует сохранность при обновлении ядра и модулей.

Минимальный состав папки шаблона компонента: template.php (обязательно), style.css и script.js (подключаются автоматически, если есть).

Что доступно внутри template.php

В template.php автоматически доступны:

• $arResult — данные, подготовленные компонентом (структура зависит от конкретного компонента)
• $arParams — параметры, переданные при вызове компонента
• $APPLICATION, $USER, $DB — глобальные объекты Битрикс
• $this — объект компонента (CBitrixComponent), через который доступны методы типа $this->GetPath()

Перед версткой обязательно изучаем структуру $arResult — либо через документацию, либо через var_dump() / print_r() на этапе разработки, либо через компонент bitrix:main.ajax.json для отладки без порчи кэша.

Типичные компоненты под кастомную верстку

bitrix:news.list / bitrix:news.detail — новости, блог, портфолио. Чаще всего нужно изменить карточку списка и страницу детального просмотра. В $arResult['ITEMS'] — массив элементов с полями и свойствами инфоблока.

bitrix:catalog.element / bitrix:catalog.section — карточка товара и страница раздела каталога. $arResult['ELEMENT'] содержит данные товара, $arResult['OFFERS'] — торговые предложения (модификации).

bitrix:form.result.new — веб-форма. Шаблон содержит HTML формы с полями, которые генерируются из $arResult['FIELDS'].

bitrix:main.include — подключение статичных областей: баннеров, рекламных блоков, произвольного HTML.

Кейс: шаблон карточки товара с вкладками

Интернет-магазин медтехники. Стандартный шаблон bitrix:catalog.element выводил описание, характеристики и документы единым текстовым блоком. Задача: разбить на вкладки — «Описание», «Характеристики», «Документы» (PDF-файлы из свойства инфоблока типа «Файл»).

Создали переопределение в /local/templates/main/components/bitrix/catalog.element/detail/template.php. В шаблоне: вкладки на чистом CSS (:target-селекторы без JS-зависимости), характеристики — из $arResult['ELEMENT']['DISPLAY_PROPERTIES'], документы — из свойства типа «Файл» с проверкой на непустое значение. Кэширование компонента не трогали — шаблон работает с уже подготовленным $arResult.

Кэширование и шаблоны

Битрикс кэширует результат выполнения компонента, но не сам template.php — шаблон рендерится каждый раз на основе закэшированных данных. Это важно: изменения в template.php видны сразу, без сброса кэша. Но если нужно добавить новое поле в $arResult, потребуется либо изменить параметры компонента (CACHE_GROUPS, CACHE_TIME), либо создать кастомный компонент.

Сроки