Верстка шаблону компонента 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), або створити кастомний компонент.

Терміни