Немного теории
Компонент
Компонент - это логически завершенный код, объединяющий в себе работу с данными, взаимодействие с пользователем и генерацию html, отвечающий определенным стандартам.
Если модули в "1С-Битрикс: Управление сайтом" отвечают за “направление” (блог, интернет-магазин, CRM), то компоненты — это уже конкретные функциональные блоки, из которых строится сайт и его разделы (список комментариев блога, корзина, список лидов).
Правильный сайт должен решать абсолютное большинство задач силами компонентов. Искусство умелого разработчика в том, чтобы правильно выбрать компонент для решения конкретной задачи. Не бойтесь, их поведение можно настраивать (у редкого компонента меньше 10 параметров в окне настроек), дорабатывать и даже полностью кастомизировать.
При таком подходе писать код прямо на страницах или в шаблоне сайта не следует!
Компоненты размещаются на сайте разработчиком, редко — контент-редактором (только простые), и настраиваются/дорабатываются по требованию заказчика. А в инструкции уже можно описать полезные настройки, которые заказчик сможет менять самостоятельно.
По структуре компоненты делятся на простые и комплексные. О комплексных подробно расскажем в одной из следующих тем. Простые компоненты создают какую-либо область на одной странице: форму, список записей, меню.
Структура компонента
Компоненты сгруппированы по пространствам имен в папках /bitrix/components/ и /local/components/. Для системных компонентов - пространство имен bitrix. Таким образом, полный путь для них будет: /bitrix/components/bitrix/[техническое название компонента]/.
Компонент состоит из следующих файлов и папок:
- Главный файл class.php — “сердце” компонента, его логика или контроллер. Класс, который обрабатывает данные http-запроса и готовит данные для вывода с помощью шаблона. Основное средство коммуникации с шаблоном - массив $arResult.
- Вместо (или вместе) с файлом class.php может существовать component.php — устаревший процедурный формат описания компонента.
- Раздел templates — типовые шаблоны компонента. Если вам нужно повлиять на внешний
вид
или немного скорректировать компонент, то вам подойдет доработка шаблона компонента
(также ее называют “кастомизацией”). Но трогать системные шаблоны нельзя —
предварительно их нужно скопировать в свое пространство имен (например, в
/local/templates/.default/component/…).
- Главный файл для шаблона простого компонента: template.php. Используя данные из массива $arResult, выводит html-код компонента. В этом файле не следует делать запросы к БД, сессиям и т.п. Лучше всего ограничиться простыми конструкциями языка php: if’ы, циклы и echo для вывода данных.
- result_modifier.php — файл шаблона, в котором разрешено делать дополнительные запросы к БД. Файл подключается в ходе работы компонента непосредственно перед вызовом template.php.
- component_epilog.php — файл шаблона, где выполняются особые операции, которые нельзя делать в области кеширования. Подключается после template.php.
- .parameters.php — файл с дополнительными настройками этого шаблона.
- lang-файлы шаблона компонента (файлы локализации или языковые файлы).
- Статические ресурсы шаблона компонента (файлы CSS, JS, изображения).
- .parameters.php — файл с описанием настроек для интерфейса администратора. Чем больше настроек, тем сложнее будет логика и, следовательно, код компонента. Необязательный файл, но без него контент-редактор не сможет никак повлиять на работу компонента.
- lang-файлы компонента (файлы локализации или языковые файлы).
- Статические ресурсы компонента (файлы CSS, JS, изображения).
Полезно
“Разместить компонент на странице” означает добавить вызов метода $APPLICATION->includeComponent с помощью визуального редактора или вручную через редактор кода. Лучше использовать визуальный редактор, так вы никогда не забудете ни один из аргументов.
Пути, названия
Стандартные компоненты “приходят” на сайт в составе модулей (папка /bitrix/modules/install/components/), а после установки копируются в /bitrix/components/bitrix/.
Компоненты, установленные вместе с модулями из маркетплейса, будут размещены в других пространствах имен в папках /bitrix/components/ и /local/components/.
Компоненты собственной разработки следует располагать в /local/components/пространство имен собственного модуля/.
Шаблоны компонентов могут располагаться в папке templates текущего шаблона сайта, .default-шаблона сайта, в папке с шаблоном комплексного компонента, в папке с самим компонентом.
Названия простых компонентов часто состоят из нескольких сегментов на латинице строчными буквами, разделенных точкой. Первый сегмент, как правило, обозначает принадлежность компонента какому-то модулю. Примеры:
- catalog.section.list,
- form.result.new,
- main.profile.
При упоминании в документации или инструкциях принято указывать и пространство имен компонентов. У всех системных пространство имен bitrix. Таким образом, компонент профиля пользователя имеет полный код bitrix:main.profile.
Именование комплексных компонентов обычно содержит меньше сегментов в названии, иногда сегмент всего один:
- news,
- catalog.
Тут действует правило: чем конкретнее решаемая задача, тем точнее (и длиннее) должно быть название компонента. Речь именно про техническое название, присвоение имени для визуального редактора на русском языке может быть другим.
Неожиданный факт: разработчик под платформу «1С-Битрикс: Управление сайтом» с многолетним стажем скорее вспомнит техническое название bitrix:main.profile, чем понятное “Параметры пользователя”.
Устройство компонента
Код $APPLICATION->includeComponent вызывает метод executeComponent класса из файла class.php или подключает и выполняет файл component.php. Если компонент реализован по ООП-схеме, то файл class.php должен содержать объявление одного класса и этот класс должен быть наследником CBitrixComponent. Компонент может быть непрямым наследником базового класса.
Он должен переопределять метод executeComponent, обрабатывать параметры из $this->arParams и наполнять $this->arResult для передачи в шаблон сайта. При подключении шаблона сначала выполняется файл result_modifier.php, затем страница шаблона (для простых компонентов это template.php), затем component_epilog.php.
В файлах шаблона доступны переменные:
- $arResult — массив данных произвольной структуры, подготовленный компонентом.
- $arParams — массив параметров, заданных программистом или контент-редактором в веб-интерфейсе компонента при вызове.
- $templateFolder — путь к папке с шаблоном от корня сайта.
- $component — текущий компонент (объект CBitrixComponent).
- $this — текущий шаблон (объект CBitrixComponentTemplate).
Размещение компонента на странице
Самый простой способ размещения компонента на странице - через визуальный редактор и выбор компонента в дереве. При этом вы сможете через интерфейс сайта задать все объявленные в компоненте и его шаблоне параметры. Интерфейс сайта сформирует php-код для вставки компонента и разместит его на странице, предлагая затем сохранить изменения в файле страницы на сервере.
Этот способ подходит не всегда. Например, вы хотите разместить компонент в шаблоне сайта или на странице, а там так много вашей сложной верстки, что визуальный редактор отказывается размещать компонент, где вам нужно.
В таком случае можно создать техническую страницу и разместить компонент на ней. Когда настройка компонента успешно завершится, скопируйте php-код вызова компонента и через phpStorm или другую IDE разместите код в нужном месте страницы. Но не забывайте удалять технические страницы, мы много раз видели проекты с файлом test.php в корне сайта и не хотим, чтобы ваши были в их числе!
Более рискованный вариант, который нельзя применять на работающих сайтах: открыть любую страницу в визуальном редакторе, удалить всё ее содержимое (без сохранения!), разместить и настроить компонент, скопировать его код вызова и закрыть визуальный редактор (без сохранения страницы!). Затем, как и в прошлом варианте, разместить код компонента там, где ему место.
Компоненты, которые надо знать
Для платформы, даже в редакции “Стандарт”, разработано более 400 компонентов. Знать каждый из них, тем более на старте, не нужно.
Вот перечень полезных компонентов, с которыми вы точно столкнетесь в своих первых проектах:
Название | Код | Назначение |
---|---|---|
Вставка включаемой области | bitrix:main.include |
Подключает php-файл фиксированного названия из текущей папки. Если его нет в текущей папке — идет рекурсивно по папкам вплоть до корня сайта. Можно настроить на 1 фиксированный файл, тогда поведение аналогично php-инструкции include. В режиме редактирования позволяет править подключаемый файл. |
Меню | bitrix:menu |
Выводит пункты меню. В режиме редактирования позволяет править пункты меню. |
Постраничная навигация | bitrix:system.pagenavigation |
Выводит панель с постраничной навигацией по списку записей/.) Неявно подключается в составе большинства списочных компонентов (блоги, форумы, инфоблоки и т.д.)/ |
- | bitrix:system.show_message |
Выводит сообщение об успехе или ошибке в дизайне сайта. Неявно подключается в составе большинства компонентов с формами. |
Настраиваемая регистрация | bitrix:main.register |
Выводит форму регистрации пользователя. |
- | bitrix:system.auth.authorize |
Выводит форму авторизации пользователя. Неявно подключается константой NEED_AUTH. |
- | bitrix:system.auth.changepasswd |
Выводит форму смены пароля. Неявно подключается константой NEED_AUTH. |
- | bitrix:system.auth.forgotpasswd |
Выводит форму запроса ссылки для восстановления пароля. Неявно подключается константой NEED_AUTH. |
Форма авторизации | bitrix:system.auth.form |
Выводит форму авторизации пользователя. |
Авторизация | bitrix:main.auth.form |
Выводит форму авторизации пользователя. |
Стандартная страница поиска | bitrix:search.page |
Выводит форму поиска и результаты поиска. |
Поиск по заголовкам | bitrix:search.title |
Выводит форму поиска и результаты быстрого поиска (обычно размещается в шапке сайта). |
Форма обратной связи | bitrix:main.feedback |
Выводит форму для запроса обратной связи от посетителей сайта. |
Практика
В этом видео изучим механизм компонентов: настройку и размещение.
В примере:
- Размещение компонентов.
- Компонент "Включаемая область".
- Компонент "Меню".
- Компоненты для авторизации и регистрации пользователей на сайте.
- Шаблоны писем.
Размещение и настройка компонентов
19 мин