4 способа расширить стандартные компоненты 1С-Битрикс
Часто в своей работе сталкиваюсь с сайтами, написанными целиком на самодельных компонентах, без использования стандартных. Поддержка таких сайтов со временем превращается в сущий ад: каждое изменение в логике/структуре/выводе информации требует доработку всего компонента. А это не правильно.
Еще пару лет назад я и сам бы предпочел написать еще один компонент по выборке/добавлению/изменению элементов инфоблока. Да, в каких-то ситуациях это имеет смысл: нужен компонент для своего модуля, скорость работы стандартного компонента не устраивает (и ни что не получается с этим сделать), слишком много ненужного функционала (а отключить все, кроме нужного нельзя). Но как правило это не будет лучшим решением.
Механизм компонентов Bitrix имеет ряд инструментов, позволяющих расширять стандартный функционал, изменяя их под свои нужды.
Кроме этого, существует пара приемов, облегчающих работу с шаблонами: они позволяют вынести css и js код в файлы шаблона и вызывать только на страницах, где они действительно нужны.
1. Добавляем пользовательские настройки
Файл .parameters.php в шаблоне компонента
При создании шаблона компонента, часто возникает необходимость ввести какие-то дополнительные настройки. Для примера представим, что необходимо сделать слайдер последних новостей. Мы, как опытные разработчики, решили использовать компонент списка новостей (bitrix:news.list) и подключить в шаблоне JS библиотеку. Но вот незадача, для нашего любимого скрипта необходимо проставить скорость смены слайда и эффект перехода.
Боже, сколько раз я сталкивался с тем, что такие параметры просто хардкодят в шаблонах. Ну да, правильно, так же быстрее, да и работает отлично. Только вот заказчикам придется бегать к разработчикам каждый раз, когда нужно сменить эффект или чуть-чуть уменьшить скорость (читай каждый день).
Слава богу, этого можно легко избежать. Скопируем для начала шаблон компонента.
Если сейчас заглянуть в структуру, можно заметить, что у нас уже есть файлы .parameters.php и style.css. Они скопировались из дефолтного шаблона, для чистоты эксперимента давайте представим, что их не было (тем более, в большинстве случаев, стандартные шаблоны содержат только template.php и папку с lang файлами).
Дальше создадим файл .parameters.php, его структура схожа с параметры компонента. Подробнее про настройки параметров компонента я писал здесь.
А теперь опишем необходимые свойства: SLIDER_EFFECT со списком возможных переходов и SLIDER_TIME, куда мы будем вводить время смены слайдов
array( 'NAME' => 'Эффект смены слайдов', 'TYPE' => 'LIST', 'SORT' => '10', 'VALUES' => array( 'sliding' => 'Скольжение', 'fading' => 'Затухание', ), 'MULTIPLE' => 'N', ), 'SLIDER_TIME' => array( 'NAME' => 'Скорочть смены слайдов (мс)', 'TYPE' => 'STRING', 'SORT' => '20', 'DEFAULT' => '5000', ), ); ?>
Теперь наши свойства можно найти в настройках компонента в разделе «Дополнительные настройки» и использовать в шаблоне, как и другие параметры $arParams.
2. Расширяем функциональность
Файлы result_modifier.php и component_epilog.php
Давайте представим другую ситуацию. В инфоблоке новостей есть свойство «Привязка к пользователю», нам необходимо вывести всё те же последние записи, но кроме стандартных полей надо показать имя пользователя, создавшего новость. Стандартные компоненты такое делать не умеют.
Опять же, мы с вами крутые разработчики, мы не кидаемся в бой не обдумав возможные решения. Первый и самый очевидный: создать свой компонент с блэкджеком и шлюхами куртизанками и преферансом. Второй и самый дурацкий: взять стандартный компонент bitrix и внести в него изменения. Третий и оптимальный: не разрабатывать все с нуля, а взять за основу готовый компонент.
Как раз для таких случаев используются файлы result_modifier.php и component_epilog.php.
Чтоб понять в чем между ними разница, давайте для начала взглянем на схему работы компонентов в Bitrix.
Как видно из схемы, result_modifier.php подключается сразу после component.php. В нем можно, например, получить дополнительные данные и, записав их в $arResult, передать дальше в шаблон компонента. Подробнее про файл result_modifier в официальной документации .
Файл component_epilog.php нужен для изменения закешированных данных. Код, помещенный в файл, будет выполняться в любом случае, независимо от того, отдается информация из кэша или получается в ходе работы component.php. Официальная документация .
Давайте создадим файл result_modifier.php и получим необходимые данные.
// Получение списка пользователей по их ID $dbUsers = CUser::GetList( ($by = 'id'), ($order = 'asc'), array( 'SELECT' => array( 'ID' => implode(' ! ', $usersID), ) ) ); while ($arUsers = $dbUsers->Fetch()) < // Передаем новые данные в шаблон, записав их в $arResult $arResult['USERS'][$arUsers['ID']] = $arUsers['NAME']; >
Готово. Теперь в шаблоне мы можем по ключу вывести имена пользователей.
3. Добавляем много JS кода
Файл script.js
- Вызывать скрипт в шаблоне сайта. Но тогда он будет подключаться на каждой странице, вне зависимости есть там компонент или нет
- Вызывать скрипт вне компонента на странице. Чуть лучше, но есть большая вероятность, что контент редактор случайно сотрет ваш код, и слайдер перестанет работать.
- Написать код в шаблоне компонента. Не самое изящное решение, js код большой, он перемешается с кодом шаблона, работать будет неудобно.
- Создать файл script.js, который подключится к шаблону автоматически. Идеально.
4. Добавляем стили компонента
Файл style.css
Такая же ситуация и с CSS. Если вы не хотите, чтоб template_styles.css шаблона сайта неимоверно разрастался и тянул за собой всё оформление (используется оно на странице или нет) можно вынести специфичные стили в style.css шаблона компонента.
После создания, файл подключится автоматически везде, где используется компонент с данным шаблоном.
Инструкция по работе с компонентами в CMS 1С-Битрикс
Компоненты позволяют выводить нужную информацию из базы данных в произвольном месте на сайте.
Как вставить компонент на страницу
Включите режим правки в публичной части сайта.
Наведите мышь на нужную область сайта и вызовите визуальный редактор, нажав на кнопку «Изменить область».
Либо нажмите «Изменить страницу» — «В визуальном редакторе» для редактирования всей страницы.
Разверните боковую панель редактора, если она скрыта, кликнув по ней.
Компоненты разделены на группы по назначению (например, контент, сервисы, служебные), либо по автору (если вы установили компонент из Маркетплейса).
Если нужный компонент не отображается в списке, то нажмите на стрелку справа от кнопки «Компоненты» (1), и нажмите «Обновить» во всплывающей подсказке (2).
Внимание! Панель компонентов выводится только для страниц со статической информацией. Если вы ее не видите, значит, вы редактируете информационный блок.
Переместите нужный компонент мышкой в рабочую область слева от списка.
Как настроить компонент?
Существует несколько способов изменить настройки компонента.
- Способ 1. Дважды кликните по компоненту левой кнопкой мыши.
- Способ 2. Кликните по компоненту правой кнопкой мыши и выберите «Параметры компонента» во всплывающей подсказке.
- Способ 3. В режиме правки наведите мышь на компонент и кликните по значку в форме шестеренки.
После этого появится всплывающее окно с параметрами данного компонента.
* Набор настроек для каждого компонента индивидуален.
Теперь можно выполнить необходимые настройки и нажать «Сохранить».
Где менять шаблон компонента catalog.item в Битрикс?
Здравствуйте!
На странице есть компонент catalog.section в коде шаблона которого вызывается компонент bitrix:catalog.item
Как поменять шаблон catalog.item?
- Вопрос задан более трёх лет назад
- 10278 просмотров
Комментировать
Решения вопроса 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/
Или проще всего через публичку, в режиме редактирования, ткнуть на нужный вам компонент и перейти в режим редактирования шаблона и посмотреть там путь к файлу
Как изменить компонент битрикс
Роберт Басыров
Сложность урока:
2 уровень — несложные понятия и действия, но не расслабляйтесь.
Недоступно в лицензиях:
Ограничений нет
Кастомизация стандартного компонента — копирование стандартного компонента в собственное пространство имён и изменение логики его работы с целью изменения/добавления функционала.
Большинство задач в Bitrix Framework реализуется через компоненты, и в шаблоне компонента вы оперируете массивами $arResult — это результат работы компонента (данные) и $arParams — это входные параметры.
Чтобы кастомизировать стандартный компонент необходимо:
- Создать новое пространство имён компонентов в папке /local/components/ , например создать директорию /local/components/my_components/ .
- В созданную папку необходимо скопировать папку с компонентом, который хотите изменить (копировать из папки /bitrix/components/bitrix/ ).
- Изменить компонент под текущие задачи.
- изменить описание компонента на свое в файлах .description.php и /lang/ru/.description.php ;
- исправить файлы .parameters.php и component.php, модифицировав (добавив необходимый) функционал с помощью API продукта;
- Отредактировать шаблон компонента под текущие задачи.
- Очистите кеш визуального редактора. В результате в визуальном редакторе отобразится кастомизированный компонент.
- Увеличивается общее количество компонентов, соответственно растет и количество выделяемых на их поддержку ресурсов.
- Сложность в освоении новым разработчиком: сначала ему нужно будет найти, в чем отличие кастомизированного компонента от уже существующего стандартного.
Важно! Выполняя кастомизацию компонента помните, что все ключи в $MESS , содержащие название, описание и параметры компонента, а также идентификаторы веток компонента в дереве компонентов визуального редактора должны быть уникальными в рамках всего продукта.
- Простой пример кастомизации компонента
- Модификация простого компонента в составе сложного
- Тип параметров CUSTOM
- Ещё пара примеров работы