Размещение и настройка компонентов

Урок 5 из 10

35 мин

Легко

Немного теории

Компонент

Компонент - это логически завершенный код, объединяющий в себе работу с данными, взаимодействие с пользователем и генерацию html, отвечающий определенным стандартам.

Если модули в "1С-Битрикс: Управление сайтом" отвечают за “направление” (блог, интернет-магазин, CRM), то компоненты — это уже конкретные функциональные блоки, из которых строится сайт и его разделы (список комментариев блога, корзина, список лидов).

Правильный сайт должен решать абсолютное большинство задач силами компонентов. Искусство умелого разработчика в том, чтобы правильно выбрать компонент для решения конкретной задачи. Не бойтесь, их поведение можно настраивать (у редкого компонента меньше 10 параметров в окне настроек), дорабатывать и даже полностью кастомизировать.

При таком подходе писать код прямо на страницах или в шаблоне сайта не следует!

Компоненты размещаются на сайте разработчиком, редко — контент-редактором (только простые), и настраиваются/дорабатываются по требованию заказчика. А в инструкции уже можно описать полезные настройки, которые заказчик сможет менять самостоятельно.

По структуре компоненты делятся на простые и комплексные. О комплексных подробно расскажем в одной из следующих тем. Простые компоненты создают какую-либо область на одной странице: форму, список записей, меню.

Структура компонента

Компоненты сгруппированы по пространствам имен в папках /bitrix/components/ и /local/components/. Для системных компонентов - пространство имен bitrix. Таким образом, полный путь для них будет: /bitrix/components/bitrix/[техническое название компонента]/.

Компонент состоит из следующих файлов и папок:

  1. Главный файл class.php — “сердце” компонента, его логика или контроллер. Класс, который обрабатывает данные http-запроса и готовит данные для вывода с помощью шаблона. Основное средство коммуникации с шаблоном - массив $arResult.
  2. Вместо (или вместе) с файлом class.php может существовать component.php — устаревший процедурный формат описания компонента.
  3. Раздел 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, изображения).
  4. .parameters.php — файл с описанием настроек для интерфейса администратора. Чем больше настроек, тем сложнее будет логика и, следовательно, код компонента. Необязательный файл, но без него контент-редактор не сможет никак повлиять на работу компонента.
  5. lang-файлы компонента (файлы локализации или языковые файлы).
  6. Статические ресурсы компонента (файлы 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 мин