Как сделать компонент битрикс

Добавил пользователь Евгений Кузнецов
Обновлено: 05.10.2024

В данной статье будут рассмотрены различные вариации и примеры установки шаблона компонентов в Битрикс. Для начала немного теории: шаблон компонента – это часть кода в программе, который преобразует информацию, которая, в свою очередь, была подготовлена компонентом в HTML (с английского – Hyper Text Markup Language – это язык гипертекстовой разметки, стандартный язык, благодаря которому осуществляется разметка интернет-страниц). Мало кому известно, что в системе 1С:Битрикс существует множество шаблонов помимо стандартных, например, в шаблоне навигации постранично вмещается целых пять видов шаблонов.

У шаблона компонентов существует два вида:

Шаблон компонента может являться как папками, так и файлами. В случае, когда шаблон не нуждается в переводе на иной язык, дополнении новыми стилями и прочих изменениях, есть возможность его нахождения внутри файла. В ином случае его необходимо сохранить внутри папки.

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

2. Переменные для шаблона компонента

Подробнее рассмотрим переменные, которыми можно пользоваться для создания и редактирования шаблона компонента:

· $this – переменная, которая содержит ссылку на нынешний шаблон;

· $component – переменная, которая содержит ссылку на нынешний компонент (который вызвали);

· $templateFile – переменная, в которой указывается путь к шаблону;

· $templateName – переменная с именем шаблона компонента;

· $templateData – переменная, которая передаёт массив данных (эти данные попадут в кеш);

· $arResult – переменная с массивом, в котором содержаться результаты работы компонента;

· $arParams – переменная с массивом параметров, которые входят в компонент;

3. Шаблон для простого компонента Битрикс

Отдельно рассмотрим, какие файлы и папки будет содержать папка шаблона для простого компонента Битрикс:

4. Шаблон для комплексного компонента

Далее опишем шаблон комплексного компонента: в нём будут содержаться такие же файлы и папки, как в простом компоненте, но ещё и дополнительные составляющие, а именно:

· шаблоны для простых компонентов (если они находятся в составе комплексного);

· простые компоненты (если они находятся в составе комплексного компонента), они подключаются в шаблонах по страницам.

5. Как подключить шаблон компонентов

Перед тем как подключить шаблон компонентов, необходимо указать , название компонента и название шаблона. В начале ядро ведёт проверку наличия данного шаблона на конкретном сайте:

Рис. 1 Проверка наличия шаблона компонента

Шаблон компонентов подключается с помощью команды:

Рис. 2 Команда для подключения шаблона компонента

где $templatePage – это только для комплексного компонента, в ином случае – пустое место.

Пример комплексного компонента:

Рис. 3 Пример для комплексного компонента

Пример простого компонента:

Рис. 4 Пример для простого компонента Битрикс

6. Редакция шаблона компонента

Редактирование – это главный способ вывести шаблон из стандартных настроек и подстроить под конкретный сайт. Однако редактировать в системе управления Битрикс стоит только собственный шаблон (пользователя), иначе при первом обновлении в системе шаблон станет прежним.

Рис. 5 Копирование шаблона компонента

Рис. 6 Пример шаблона компонента

Вас могут заинтересовать следующие статьи:

94 [PROP_CODE] => TAGS2 [TITLE] => Вас могут заинтересовать следующие семинары: ) --> 95 [PROP_CODE] => TAGS [TITLE] => Вас могут заинтересовать следующие вебинары: ) -->

Вас могут заинтересовать следующие вебинары:

Как разбить шаблон на компоненты редактируемой области? В чем основная задача и ценность этой функции Битрикс? Подробно и наглядно рассмотрим в статье. Ранее я уже останавливался на этой теме в одном из видео. Рекомендую посмотреть для большего понимания.

Где взять код для подключения компонента редактируемой области?

Остановимся на параметрах компонента.

Важно! Технически в окне редактирования страницы также можно вносить изменения. Но есть вероятность сохранить код поверх другого или стереть дивы. Более безопасный способ работать в папке. В Битриксе редактор нужен только для получения кода определенного компонента. Выходим всегда без сохранения.

Копируем и выходим БЕЗ СОХРАНЕНИЯ.

В папке header.php при помощи скопированной области включаем компонент логотипа. Фрагмент, отвечавший за вывод лого, закомментируем (отключим) — обозначено серым кругом и зеленым маркером. После обновления на главной не будет отображаться логотип, так как logo.php еще предстоит создать.

Как в Битрикс распределить элементы страницы по папкам?

Создание каталога Создание include

Документация Битрикс Создание документов для элементов

В logo.php вставляем из папки header.php закомментированный ранее компонент. На слайде выше обозначен зеленым маркером или воспользуйтесь подсказкой ниже. Из хедера код можно удалить.

Подключение логотипа Редактирование логотипа

Важно! Редактируемая область будет видна только в режиме правки. Компонент появится после создания документации.

В окне редактора пользователь может видоизменять компонент. В Битриксе предусмотрен набор опций в визуальном редакторе – можно залить другое изображение, менять размер и местоположения. Но в идеале, конечно, использовать код.

Как определить какой фрагмент кода отвечает за компонент?

Вопрос рассмотрим на примере телефонного номера. Очень важна внимательность в работе, чтобы не удалить лишнюю строчку.

Появится код страницы и, наводя курсор мышки на соответствующую строку, под номером телефона появится отметка.

Далее повторяем тот же алгоритм, как описано выше при работе с логотипом. Для включения редактируемой области в каталоге header.php можно не повторять действия с компонентами. Просто копируем код, которым мы включили логотип и дублируем ниже. Обязательно меняем название документа, к которому будет обращаться программа.

В дальнейшем он будет удален из header.php. Будьте крайне внимательны при удалении в Битрикс. Ниже подсказка для копирования и самоконтроля.

В папке include создаем файл number.php и переносим код компонента из хедера.

Обновим. В режиме правки, если навести курсор на контакт, появляется кнопка вызова окна редактора компонента. Можно легко поменять номер либо добавить еще один.

Для закрепления материала включим меню. Что понадобится нам в будущих уроках

Закрепление материала. Итоги

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

Такая система Битрикс позволяет видоизменять компоненты без риска испортить весь шаблона.

Копируем код меню из хедера (строка. 33—61) и переносим в созданный документ.

Или воспользуйтесь подсказкой.

Подключаем компонент. Указываем правильный путь.

Так будет выглядеть хедер после подключения всех компонентов.

Помним, что редактируемые элементы в Битрикс видны только в режиме правки.

Хотелось бы обратить внимание читателей, что с активной функцией редактирования страница имеет такой вид. При выключении режима правки все станет на свои места.

Надеюсь, материал статьи будет полезен. Буду очень благодарен за комментарии и вопросы.

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

Еще пару лет назад я и сам бы предпочел написать еще один компонент по выборке/добавлению/изменению элементов инфоблока. Да, в каких-то ситуациях это имеет смысл: нужен компонент для своего модуля, скорость работы стандартного компонента не устраивает (и ни что не получается с этим сделать), слишком много ненужного функционала (а отключить все, кроме нужного нельзя). Но как правило это не будет лучшим решением.

Механизм компонентов Bitrix имеет ряд инструментов, позволяющих расширять стандартный функционал, изменяя их под свои нужды.

Кроме этого, существует пара приемов, облегчающих работу с шаблонами: они позволяют вынести css и js код в файлы шаблона и вызывать только на страницах, где они действительно нужны.

1. Добавляем пользовательские настройки

Файл .parameters.php в шаблоне компонента

При создании шаблона компонента, часто возникает необходимость ввести какие-то дополнительные настройки. Для примера представим, что необходимо сделать слайдер последних новостей. Мы, как опытные разработчики, решили использовать компонент списка новостей (bitrix:news.list) и подключить в шаблоне JS библиотеку. Но вот незадача, для нашего любимого скрипта необходимо проставить скорость смены слайда и эффект перехода.

Боже, сколько раз я сталкивался с тем, что такие параметры просто хардкодят в шаблонах. Ну да, правильно, так же быстрее, да и работает отлично. Только вот заказчикам придется бегать к разработчикам каждый раз, когда нужно сменить эффект или чуть-чуть уменьшить скорость (читай каждый день).

Слава богу, этого можно легко избежать. Скопируем для начала шаблон компонента.

Если сейчас заглянуть в структуру, можно заметить, что у нас уже есть файлы .parameters.php и style.css. Они скопировались из дефолтного шаблона, для чистоты эксперимента давайте представим, что их не было (тем более, в большинстве случаев, стандартные шаблоны содержат только template.php и папку с lang файлами).

Дальше создадим файл .parameters.php, его структура схожа с параметры компонента. Подробнее про настройки параметров компонента я писал здесь.

А теперь опишем необходимые свойства: SLIDER_EFFECT со списком возможных переходов и SLIDER_TIME, куда мы будем вводить время смены слайдов

Теперь наши свойства можно найти в настройках компонента в разделе "Дополнительные настройки" и использовать в шаблоне, как и другие параметры $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 и получим необходимые данные.
Готово. Теперь в шаблоне мы можем по ключу вывести имена пользователей.

3. Добавляем много JS кода

Файл script.js

Вызывать скрипт в шаблоне сайта. Но тогда он будет подключаться на каждой странице, вне зависимости есть там компонент или нет
Вызывать скрипт вне компонента на странице. Чуть лучше, но есть большая вероятность, что контент редактор случайно сотрет ваш код, и слайдер перестанет работать.
Написать код в шаблоне компонента. Не самое изящное решение, js код большой, он перемешается с кодом шаблона, работать будет неудобно.
Создать файл script.js, который подключится к шаблону автоматически. Идеально.

4. Добавляем стили компонента

Файл style.css

Такая же ситуация и с CSS. Если вы не хотите, чтоб template_styles.css шаблона сайта неимоверно разрастался и тянул за собой всё оформление (используется оно на странице или нет) можно вынести специфичные стили в style.css шаблона компонента.

После создания, файл подключится автоматически везде, где используется компонент с данным шаблоном.

Покажу как сделать в 1С-Битрикс форму обратной связи, как её настроить, чтобы принимать лиды.

Будет использоваться модуль bitrix webforms.

Создание и настройка формы в административном разделе

Прежде, чем приступать, рекомендую выключить упрощенный режим редактирования форм в настройках модуля Вебформы. И сохранить настройку, соответственно.

Теперь идем в Сервисы -> Веб формы -> Настройка форм и жмем там Создать, чтобы создать форму.

Во вкладке Свойства заполняем все необходимые поля. Во вкладке "Доступ" проверьте, чтобы для группы "Все пользователи" было право "Заполнение формы".

Капчу на данном этапе включать не будем.

Жмем Применить, чтобы создать форму.

Переходим во вкладку Вопросы и добавляем их.

Настройка полей для формы:

Так же создаем статус по умолчанию для результатов, если он не создался.

Заголовок: Default. Во вкладке Доступ для всех операций поставьте "Создатель результата".

В панели администратора всё добавили и сохранили, молодцы!

Вывод формы в публичном разделе сайта

Если вы хотите разместить форму на отдельной странице, создайте страницу для формы.

А если хотите разместить в шаблоне, например в шапке, тогда создайте временную страницу, чтобы настраивать форму там. После скопируете вызов компонента формы с временной страницы. Я создам файл test.php.

Открываем редактирование страницы в визуальном редакторе, в компонентах ищем form.result.new, перетягиваем в окно правки.

Если нет поиска компонентов, то нажмите на кнопку у правой границы редактора.

Через несколько секунд появится окно настройки компонента.

Там нам надо заполнить:

После сохранения компонента, на странице появится форма. Она не очень красивая, поэтому установим свой шаблон.

Включим режим правки, наведем курсор на форму, там скопируем шаблон, как показано на картинке.

Укажем новое название шаблона, шаблон сайта - текущий.

В шаблоне компонента сразу удалим все лишние файлы. Если их не удалить, в будущем они будут создавать путаницу при доработке шаблона, потому что будем иметь полно файлов не понятного назначения. А еще сайт будет тяжелый, так как пользователь будет получать много не нужных скриптов и стилей.

Оставим только файл template.php

Приступим к редактированию шаблона.

В template.php доступны следующие переменные:

$arResult["F_RIGHT"] - код права на доступ к текущей форме (вкладка Доступ формы)
$arResult["WEB_FORM_NAME"] - символьный код формы
$arResult["arrVALUES"] - значения полей введенные пользователем
$arResult["CAPTCHACode"] - уникальный код капчи. Требуется для вывода картинки.
$arResult["arForm"]["STAT_EVENT1"] - event1 с вкладки Статистика формы
$arResult["arForm"]["STAT_EVENT2"] - event2 с вкладки Статистика формы
$arResult["arForm"]["STAT_EVENT3"] - event3 с вкладки Статистика формы

Для вывода полей надо брать вопросы из $arResult["QUESTIONS"] по символьному коду.

CAPTION - имя поля
IS_HTML_CAPTION - имя поля в формате HTML, Y/N.
REQUIRED - обязательно к заполнению, Y/N.
IS_INPUT_CAPTION_IMAGE - есть ли изображение вопроса
HTML_CODE - HTML код поля
STRUCTURE - детальное описание поля
IMAGE - описание изображения вопроса, если IS_INPUT_CAPTION_IMAGE равен Y.

Например, чтобы вывести инпут поля с символьным кодом NAME надо сделать в шаблоне так:

На основе переменных выше соберем шаблон

Логика его такая:

Вначале проверяем, подключает ли файл Битрикс или его открыл пользователь введя в браузере адрес шаблона. Если не битрикс - блокируем генерацию шаблона.

- выводит открытие формы со служебными скрытыми полями.

Поле web_form_submit в значении Y - триггер для Битрикс, говорящее о том, что форма отправлена и надо бы проверить, что там ввел пользователь.

Если есть ошибки - выводим их в диве с классом errors.

Далее выводим три поля, у каждого: Имя, если обязательное - галочка, HTML код инпута для ввода.

На этом можно закончить, форма уже будет работать.

Ajax отправка

Еще не забыли про ajax? Сейчас покажу вариант, который работает даже без JQuery.

Создайте в папке шаблона компонента файл script.js с контентом:

В шаблон (наш template.php) после добавьте строку

Выше мы привязали через функцию ajaxForm() ajax к форме. В $templateFolder хранится ссылка на папку текущего шаблона, в ней мы создадим файл ajax.php. Путь файла, например, может получиться такой: /bitrix/templates/books/components/bitrix/form.result.new/request_form/ajax.php.

Последний штрих - создать файл обработчик ajax запросов.

Создайте в папке шаблона компонента файл ajax.php с контентом:

В этом файле мы принимаем запрос от пользователя, если есть ошибки, выводим их в JSON, если всё успешно, так же через JSON говорим об успешности.

Аналогично компоненту веб формы, запускаем обработчики событий.

В этом варианте нет минусов, как в варианте с битриксовым аякс, потому что битрикс подменяет каждый раз HTML в нашей форме, а в текущем варианте DOM страницы не трогается.

Ajax. Битриксовый вариант.

Чтобы форма отправлялась без перезагрузки страницы, надо добавить в параметры вызова компонента следующее:

"AJAX_MODE" => "Y",
"AJAX_OPTION_SHADOW" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"AJAX_OPTION_HISTORY" => "N",

Кстати, с помощью этих параметров добавить AJAX можно в любой компонент. Эти параметры - не особенность вебформ, реализована работа с ajax в базовом классе компонентов.

Теперь Битрикс сам добавит нужные скрипты.

Алгоритм работы Ajax формы:

Из этой логики мы получаем некоторые нюансы. Поля формы, обработанные на джаваскрипте при загрузке страницы, снова будут не обработанные, так как они заменились, а события загрузки страницы заново не было.

Особенность 1

Если в форме в поле телефона на JS ставится маска, например $('.my_phone_input').mask('9 (999) 999 9999'), то маска пропадет после замены битриксом формы. Поэтому маску придется накладывать в файле template.php, чтобы она накладывалась каждый раз заново.

Особенность 2

Если мы форму используем в попапе, а при открытии окна верстка копируется в отдельный блок (так работает fancybox) ajax режим работать не будет.

Представим ситуацию: верстку всего попапа мы убрали в шаблон формы. Имеем структуру на странице, как показано ниже.

Настройка капчи

Чтобы в форме появилась капча:

Добавьте в шаблон формы следующий код:

В настройках формы включите показ капчи.

На этом капча уже будет работать.

Обновление капчи пользователем.

Теперь, если пользователь не может прочитать код, он может обновить картинку.

Настройка формата изображения капчи

Вид капчи можно настроить в панели администратора в разделе Настройки > Настройки продукта > CAPTCHA.

Своя верстка полей ввода в форме

До этого момента поля в форму мы вставляли HTML_CODE вопроса, в котором уже содержится код инпута. Давайте и его сами генерировать, ведь бывает и такая необходимость.

Функцию генерации поля ввода объявим как анонимную, чтобы можно было копировать шаблон компонента и не было ошибок на странице, что одна функция объявлена 2 раза.

Читайте также: