Сотбит: Оригами — Для разработчика — Кастомизация шаблона без потерь при обновлении решения — Шаблоны компонентов
Шаблон компонента – программный код, преобразующий данные, подготовленные компонентом, непосредственно в HTML-код.
Для того, чтобы шаблон компонента не изменялся в процессе обновления решения, его требуется поместить в папку, расположенную по пути:
- local/templates/sotbit_origami/components/bitrix – для шаблонов компонентов Битрикс.
- local/templates/sotbit_origami/components/sotbit – для шаблонов компонентов Сотбит.
Шаблоны компонентов, которые изменяются в процессе обновления решения, расположены в папке local/templates/.default/components/ .
Правила выбора шаблона компонента:
- В первую очередь поиск шаблона осуществляется в разделе:
/local/templates/sotbit_origami/components - В случае, если указанный шаблон не найден, поиск осуществляется в разделе:
/local/templates/.default/components - Если указанный шаблон не найден в вышеперечисленных разделах, то поиск осуществляется в разделе с шаблонами Битрикс:
/bitrix/templates/текущий_шаблон_сайта/components - Далее поиск шаблона осуществляется в папке:
/bitrix/templates/.default/components - В последнюю очередь поиск шаблона осуществляется в папке:
/bitrix/components
- Если имя шаблона не задано, то ищется шаблон с именем .default.
- Если шаблон задан именем папки, то в случае простого компонента в этой папке ищется файл template.ext, а в случае комплексного – название_страницы.ext. Расширение ext сначала принимается равным php, а затем расширениям других доступных на сайте движков шаблонизации.
Подробнее о шаблонах компонентов читайте по ссылке.
Подключение компонентов
Вызов шаблона компонента выглядит следующим образом:
$APPLICATION->IncludeComponent( "custom:catalog.element", ".default", array(. ), $component);
custom:catalog.element – название компонента, причем по значению, стоящему до знака двоеточия, можно, как правило, определить принадлежность компонента к компании разработчика.
Так в компонентах Битрикс названия составляются по принципу bitrix:название.компонента , а для компонентов Сотбит – sotbit:название.компонента . Понимание этой особенности поможет легко понять расположение компонента, а соответственно и его шаблона в файловой системе.
.default – название шаблона компонента. В файловой системе вы найдете папку с таким же названием. Исключение составляет пустое название шаблона компонента. В этом случае применяется шаблон, лежащий в папке .default .
array(. ) – массив с параметрами компонента.
$component – переменная, указывающая на родительский компонент.
Таким образом, при необходимости интеграции компонента в пользовательский шаблон, например, шапки сайта требуется:
- Поместить код вызова компонента в шаблон.
- Указать название шаблона вызываемого компонента.
- Разместить шаблон компонента в папке, содержимое которой не изменяется в процессе обновления решения. В нашем случае это:
/local/templates/sotbit_origami/components/bitrix/ – для компонентов Битрикс.
/local/templates/sotbit_origami/components/sotbit/ – для компонентов Сотбит.
Если требуется изменить стандартный шаблон, который изменяется в процессе обновления решения, например, стандартный шаблон шапки сайта, скопируйте шаблон требуемого компонента в папку, указанную в пункте 3 выше. После чего вносите все требуемые изменения в шаблоне компонента, расположенного в этой папке.
Нужна помощь в настройке решения
Оставьте заявку и мы свяжемся с вами!
Где менять шаблон компонента catalog.item в Битрикс?
Здравствуйте!
На странице есть компонент catalog.section в коде шаблона которого вызывается компонент bitrix:catalog.item
Как поменять шаблон catalog.item?
- Вопрос задан более трёх лет назад
- 10277 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 3
Была такая же необходимость, когда кастомизировал bitrix:catalog.top.
Берем содержимое папки
/bitrix/components/bitrix/catalog.item/templates/.default/
и копируем в
/local/templates/Название_шаблона/components/bitrix/catalog.item/Название_кастомизированного_шаблона/
У вас может немного отличатся путь, но смысл думаю будет понятен.
После этого в коде шаблона, который вызывает компонент bitrix:catalog.item надо указать «Название_кастомизированного_шаблона».
IncludeComponent( 'bitrix:catalog.item', "catalog_item_top",
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

Алексей Емельянов @babarun Куратор тега 1С-Битрикс
Безумный план моих идей в руках больных людей
Как поменять шаблон catalog.item
В смысле заменить на другой шаблон или отредактировать тот который подключается?
Ответ написан более трёх лет назад
alexander_chn @alexander_chn Автор вопроса
Хочу отредактировать тот который подключается. Где его найти?

Алексей Емельянов @babarun Куратор тега 1С-Битрикс
Как система ищет шаблон
Применяется следующий алгоритм поиска подходящего шаблона для компонента:
Если используется шаблон сайта из папки \local , то система сначала ищет шаблон компонента в папке /local/templates/текущий_шаблон_сайта/components/.
Если там шаблон не найден, то берётся папка /local/templates/.default/components/. Если шаблон найден, то поиск прекращается.
Если используется шаблон сайта из папки /bitrix/templates/, то берется папка /bitrix/templates/текущий_шаблон_сайта/components/. В этой папке в пути /пространство_имен_компонента/название_компонента/ проверяется последовательно наличие файла или папки с именем шаблона. Если таковых нет, то проверяется наличие файла имя_шаблона.ext, где в качестве ext берутся последовательно все доступные расширения всех установленых на сайте движков шаблонизации. Если шаблон найден, то алгоритм завершается.
Если на шаге 1 шаблон не найден, то берется папка /bitrix/templates/.default/components/. И применяется алгоритм, описанный в шаге 1. Если шаблон найден, то алгоритм завершается.
Если на шаге 2 шаблон не найден, то производится поиск среди системных (т.е. поставляемых с компонентом) шаблонов.
Особенности поиска:
Если имя шаблона не задано, то ищется шаблон с именем .default.
Если шаблон задан именем папки, то в случае простого компонента в этой папке ищется файл template.ext, а в случае комплексного — название_страницы.ext. Расширение ext сначала принимается равным php, а затем расширениям других доступных на сайте движков шаблонизации.
Например, требуется показать компонент bitrix:catalog.list с помощью шаблона table. Пусть на сайте, кроме стандартного движка шаблонизации (файлы с расширением php), доступен так же движок Smarty (файлы с расширением tpl). Система проверит сначала папку /bitrix/templates/текущий_шаблон_сайта/components/bitrix/catalog.list/ на наличие файла или папки с именем table. Если таковых нет, система проверит указанную выше папку на наличие файлов table.php и table.tpl. Если ничего не найдено, система изучит папки /bitrix/templates/.default/components/bitrix/catalog.list/ и /bitrix/components/bitrix/catalog.list/templates/
Или проще всего через публичку, в режиме редактирования, ткнуть на нужный вам компонент и перейти в режим редактирования шаблона и посмотреть там путь к файлу
Шаблон компонентов в Битрикс
В данной статье будут рассмотрены различные вариации и примеры установки шаблона компонентов в Битрикс. Для начала немного теории: шаблон компонента – это часть кода в программе, который преобразует информацию, которая, в свою очередь, была подготовлена компонентом в HTML (с английского – Hyper Text Markup Language – это язык гипертекстовой разметки, стандартный язык, благодаря которому осуществляется разметка интернет-страниц). Мало кому известно, что в системе 1С:Битрикс существует множество шаблонов помимо стандартных, например, в шаблоне навигации постранично вмещается целых пять видов шаблонов.
У шаблона компонентов существует два вида:
1. системные – они сразу связаны с компонентом и находятся в папке компонента Битрикс, под названием «templates»; 2. пользовательские – они подстроены под назначение конкретного сайта. Находятся данные шаблоны в папках «/local/templates/шаблон сайта/», но при копировании они переместятся и будут базироваться по пути: /local/templates/шаблон_сайта/components/namespace/название_компонента/название_шаблона.
Определителем шаблонов являются их имена, по умолчанию задано имя «.default». И, в случае отсутствия имени, вызывается именно вышеуказанный шаблон. Другие шаблоны могут иметь произвольное имя.
Шаблон компонента может являться как папками, так и файлами. В случае, когда шаблон не нуждается в переводе на иной язык, дополнении новыми стилями и прочих изменениях, есть возможность его нахождения внутри файла. В ином случае его необходимо сохранить внутри папки.
Шаблон компонента – это неразделимый целый объект, и когда следует поменять шаблон компонента по умолчанию для некого сайта, то его необходимо скопировать полностью в папку с шаблоном сайта Битрикс. Например, существует некий компонент «bitrix:main.site.selector» со своим шаблоном по умолчанию под названием «dropdown». Расположен он в папке компонента «templates». Если данный шаблон необходимо изменить под некоторый веб-сайт, то мы скопируем папку «dropdown» в папку по адресу: «/local/templates/шаблон_сайта/components/bitrix/main.site.selector/», после чего меняем шаблон согласно нашим предпочтениям.
Когда компонент подключается на страницу веб-сайта, право настройки по выводу вида шаблона остаётся за администратором.
2. Переменные для шаблона компонента
Подробнее рассмотрим переменные, которыми можно пользоваться для создания и редактирования шаблона компонента:
· $this – переменная, которая содержит ссылку на нынешний шаблон; · $component – переменная, которая содержит ссылку на нынешний компонент (который вызвали); · $templateFile – переменная, в которой указывается путь к шаблону; · $templateFoldet – переменная, содержащая путь к папке с текущим шаблоном, начиная от «DOCUMENT_ROOT»; · $templateName – переменная с именем шаблона компонента; · $templateData – переменная, которая передаёт массив данных (эти данные попадут в кеш); · $arResult – переменная с массивом, в котором содержаться результаты работы компонента; · $arParams – переменная с массивом параметров, которые входят в компонент; · $arLangMessages – переменная с массивом языковых сообщений в шаблоне; · $componentPath – переменная, которая содержит путь к папке, в которой находится компонент от «DOCUMENT_ROOT».
Замечание: если используется PHP шаблон, то в нём есть глобальные переменные «$APPLICATION», «$USER», «$DB».
3. Шаблон для простого компонента Битрикс
Отдельно рассмотрим, какие файлы и папки будет содержать папка шаблона для простого компонента Битрикс:
· «/lang» – папка с файлами, которые относятся к переводам и языкам; · «result_modifier.php» – это файл имеет при входе массив с результатами по работе компонента «$arResult» и массив с свойствами для вызова «$arParams»; · «component_epilog.php» – это файл, который добавляется после того как шаблон был исполнен; · «style.css» – это файл, который необходим для выбора стилей шаблона; · «script.js» – файл для определения и подключения скриптов из JS; · «.description.php» – это файл, в котором находится описание и имя шаблона для редактора по визуализации; · «.parameters.php» – файл, имеющий в себе обзор добавочных входящих параметров для редактора по визуализации; · «template.ext» – это файл, который, по-факту, и есть шаблон, он является обязательным; · другие необходимые файлы и папки, вроде папки «image» (для картинок, которые нужны шаблону).
4. Шаблон для комплексного компонента
Далее опишем шаблон комплексного компонента: в нём будут содержаться такие же файлы и папки, как в простом компоненте, но ещё и дополнительные составляющие, а именно: · шаблоны для простых компонентов (если они находятся в составе комплексного); · простые компоненты (если они находятся в составе комплексного компонента), они подключаются в шаблонах по страницам.
5. Как подключить шаблон компонентов
Перед тем как подключить шаблон компонентов, необходимо указать , название компонента и название шаблона. В начале ядро ведёт проверку наличия данного шаблона на конкретном сайте:
Рис. 1 Проверка наличия шаблона компонента
Шаблон компонентов подключается с помощью команды:
Рис. 2 Команда для подключения шаблона компонента
где $templatePage – это только для комплексного компонента, в ином случае – пустое место.
Пример комплексного компонента:
Рис. 3 Пример для комплексного компонента
Пример простого компонента:
Рис. 4 Пример для простого компонента Битрикс
6. Редакция шаблона компонента
Редактирование – это главный способ вывести шаблон из стандартных настроек и подстроить под конкретный сайт. Однако редактировать в системе управления Битрикс стоит только собственный шаблон (пользователя), иначе при первом обновлении в системе шаблон станет прежним.
Скопировать шаблон компонента можно при помощи команды «Копировать шаблон компонента», при этом режим «Правка» должен быть подключён. Во время копирования можно открыть форму, чтобы отредактировать шаблон компонента:
Рис. 5 Копирование шаблона компонента
Пример шаблона:
Рис. 6 Пример шаблона компонента
Специалист компании «Кодерлайн» Айдар Фархутдинов
Как изменить шаблон компонента в 1с битрикс

Роберт Басыров
Сложность урока:
2 уровень — несложные понятия и действия, но не расслабляйтесь.
Недоступно в лицензиях:
Ограничений нет
Примечание: Если у вас включено кеширование компонентов, то возможна ситуация, когда после внесения изменений в шаблоны компонента или его файл стилей вы не заметите этих изменений. В этом случае надо просто обновить кеш компонента воспользовавшись кнопкой Обновить на Административной панели. А лучше отключить кеширование на период работы с дизайном совсем.
Прежде всего, оговоримся, что не все неточности дизайна мы будем исправлять в этом примере. Порядок ссылок невозможно изменить, не модифицируя php-код самого компонента. Это не задача нашего примера и мы этим заниматься не будем.
Для замены слова Войти на Вход необходимо найти файл в системе, где задается эта надпись и поменять ее.
-
Перейдите в раздел Контент > Структура сайта > Файлы и папки /bitrix/templates/test/components/bitrix/system.auth.form/auth/lang/ru/ . В этой папке есть файл: template.php.
Примечание: Обратите внимание на определенную логику расположения информации в файлах компонента. Вот она: system.auth.form/auth/lang/ru/ . Эта структура типична для всех компонентов системы: имя_компонента/применяемый_шаблон/языковая_папка/конкретный_язык. В папке конкретного языка расположены все текстовые значения, используемые в этом шаблоне. Так вы можете поменять тексты в любом компоненте.

Примечание: При утверждении шаблона дизайна бывает очень трудно предусмотреть все возможные моменты, связанные с дизайном. Например, в нашем случае мы меняем слово «Войти» на «Вход», но в утвержденном дизайне ничего не говорится про то, как выглядит страница у авторизованного посетителя. А у авторизованного посетителя будет видно слово «Выйти». Логично, что мы заменим слово «Выйти» на слово «Выход», по аналогии со словом «Вход». Несмотря на то, что на это нет прямого указания в дизайне.
Текст шаблона адаптирован к требованиям дизайна. Теперь займемся внешним видом.
- Откройте для редактирования шаблон компонента. Нам нужно заменить картинки. Работа упрощается тем, что в тестовом дизайне использована одна картинка на все три позиции. Если бы картинки были разные, то нам бы пришлось повторять описываемую ниже операцию несколько раз, меняя названия картинок. Если посмотреть исходный html-код авторизации, то видно, что имя картинки в этом коде: punkt_top.gif. Эта картинка после загрузки на тестовый сайт расположена в папке /bitrix/templates/test/images . Значит, путь до картинок в рамках системы будет такой: /bitrix/templates/test/images/punkt_top.gif .
- В диалоге с кодом шаблона /bitrix/templates/test/components/bitrix/system.auth.form/auth/template.php найдите ссылки на картинки, используемые в шаблоне. Так как в теги картинки включен php-код и найти их будет не просто, то приведем ссылки на картинки полностью.
Первая и вторая:
/images/login.gif" alt="Как изменить шаблон компонента в 1с битрикс">
/images/punkt_top.gif" alt="Как изменить шаблон компонента в 1с битрикс">
Завершите сессию и авторизуйтесь заново. Вы увидите, что картинки заменены. Теперь займемся остальным. Начнем с всплывающего окна авторизации. Что нас не устраивает в нем? Фон, отличающийся от фона сайта. Кому-то еще может показаться, что не соответствует размер окна или еще что. Эти вопросы – дело вкуса и мы оставляем на ваше усмотрение изменение этих параметров.
- Откройте для редактирования шаблон компонента. Просматривая шаблон компонента, мы увидим, что за оформление всплывающего окна отвечает стиль login-form-window: код этого окна расположен в теге . В то время как на надписи Вход и Регистрация стиль не задан. Следовательно, нам надо задать стиль для этих надписей. А стиль login-form-window изменить так, чтобы он соответствовал дизайну.
- Откройте для редактирования CSS файл шаблона компонента Авторизация.
- Откройте исходные коды тестового сайта. Дизайнер задал фон таблиц в цвете #DEDEE2, а границы в цвете #bfbfbf. Например, ячейка:
Завершите сессию и авторизуйтесь заново. Вы увидите, что вид окна изменился и стал соответствовать общей цветовой гамме сайта.
Теперь нам нужно изменить вид надписей Вход и Регистрация. Сделать это можно разными способами. Но мы воспользуемся опять же файлом стилей. Пусть стиль, отвечающий за оформление этих надписей называется login-info. Соответственно, стиль активной ссылки будет #login-info а.
- Откройте для редактирования шаблон компонента. Установим теги для стиля login-info. Установить эти теги нам придется два раза, так как html-код не должен пересекаться с php-кодом.
- Установите тег
первый раз сразу за тегом
, закрывающим предыдущий стиль login-form-window.
- Установите тег

