Использование параметров с типом CUSTOM в .parameters.php
Использование параметров с типом CUSTOM в .parameters.php
Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.
Заметки на полях: использование типа параметров CUSTOM на примере.
Заинтересовал функционал создания кастомных элементов управления в параметрах компонента, а именно тип параметров CUSTOM. В документации данный тип описан очень кратко:
Для типа элемента управления TYPE есть значения:
LIST - ... .
STRING - ... .
CHECKBOX - ... .
CUSTOM - позволяет создавать кастомные элементы управления.
Поиск навёл на интересную статью: произвольный тип параметров компонента в bitrix. Статья содержит описание основных опций данного типа параметров в файле .parameters.php и в качестве примера разбирает компонент map.google.view.
Решили использовать данный тип параметров для механизма комментариев в каталоге (bitrix:catalog.element). Комментарии реализованы с помощью модуля Форум. Идея состоит в том, чтобы указать идентификатор форума не для товара по отдельности, а для целого раздела, а затем в соответствии с разделом элемента каталога, подставлять нужный идентификатор форума в result_modifier.
Задача поставлена, приступаем к реализации. Создаём в файле .parameters.php запись о новом параметре.
Из указанной выше статьи получаем описание опций данного типа параметров.
JS_FILE - файл с JS кодом ответственным за отображение кастомной опции JS_EVENT - callback функция которая будет вызвана после загрузки JS_FILE JS_DATA - будет передана в JS_EVENT
вообще говоря в JS_EVENT будет передано не JS_DATA, а объект
{
data:JS_DATA, //как не трудно догадаться тут будет JS_DATA из .parameters.php
oCont: td, /* контейнер, в котором предлагается размещать кастомный контрол управления параметром */
oInput: input,//input в котором и будет предаваться значение параметра на сервер при сохранении
popertyID:"MAP_DATA",//название параметра
propertyParams: { /*...*/ },//Объект содержащий всё тоже, что и массив параметра в .parameters.php
fChange:function(){ /*...*/ },//callback для вызова, при изменении параметра
getElements:function(){ /*...*/ }//возвращает объект со всеми параметрами компонента
}
Естественно не забываем про обновление языкового файла.
<?php
...
$MESS["F_CUSTOM_FORUMS_LIST"] = "Список форумов для отзывов";
$MESS["F_CUSTOM_FORUMS_LIST_PATH"] = "Путь к файлу списка форумов";
$MESS["F_CUSTOM_FORUMS_LIST_PARAM_EDIT"] = "Изменить";
...
?>
Далее создаём в папке шаблона директорию /settings/. В этой директории создаём скрипт вызова диалогового окна (settings.js) и файл вывода формы редактирования значения параметра (settings.php).
Файл settings.js содержит создание объекта window.jsForumsListEditor, конструктор которого создаёт кнопку вызова диалога и делегирует на неё обработчик (JForumsListEditor.prototype.btnClick). В данном обработчике на основе параметров, переданных в опции JS_DATA, формируется URL и данные POST запроса к файлу-обработчику settings.php.
Также данный файл содержит подключение скрипта settings_load.js и файла-стилей settings.css. Скрипт settings_load.js содержит методы для формирования массива значений параметра (arItems), "ликвидации" повторяющихся значений (tmpArray) и сериализации этих значений в строку (jsFLEditor.__serialize).
Файл settings.css содержит стили кнопки удаления строки (системные стили в диалоговом окне оказались не доступны).
Таким образом механизм обработки параметров данного типа получается следующим: 1. Скрипт-обработчик параметров компонента встречает запись о параметре типа CUSTOM, загружает файл, указанный в опции JS_FILE и вызывает callback-функцию, указанную в опции JS_EVENT. При вызове в функцию передаётся объект с данными, указанными в опции JS_DATA. 2. Callback-функция создаёт объект window.jsForumsListEditor, конструктор которого размещает на основной форме настройки параметров компонента кнопку "Изменить" для редактирования значения параметра. 3. По нажатию на кнопку создаётся и отображается на экране экземпляр окна диалога new BX.CDialog({}). В этом окне, в соответствии с параметрами вызова диалога, подгружается форма редактирования значений (settings.php). 4. После заполнения формы и нажатия на кнопку "Сохранить", выполняется запись значения в сериализованном виде (jsFLEditor.__saveChanges) и закрытие диалогового окна.