Создание компонента

Видеоурок

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

В системе есть несколько способов создания собственных компонентов:

• вручную с нуля;
• на основе существующих компонентов;
• импортирование стороннего компонента.

Разберём первый способ.

Зайдите в раздел с компонентами: меню «Разработка → Компоненты». Нажмите на кнопку «Добавить компонент». В выпадающем списке выберите первый пункт «Создать новый компонент "с нуля"».

Нажмите на кнопку «Продолжить».

Введите название и выберите группу шаблона .

Нажмите на кнопку «Добавить компонент».

В качестве примера создайте компонент «Товары», который будет содержать поля:

При создании поля необходимо заполнить ряд данных:
 

Название поля (латинскими буквами)

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

Описание

Краткая характеристика поля. Это описание будет выводиться на сайте в форме добавления/редактирования и в административном разделе.
 

Тип поля

В поле возможны следующие варианты значений (подробные описания типов полей):

• Строка;
• Целое число;
• Текстовый блок;
• Список;
• Логическая переменная;
• Файл;
• Число с плавающей запятой;
• Дата и время;
• Связь с другим объектом;
• Множественный выбор;
• Множественная загрузка файлов.
   

Формат поля

Данное поле является логическим продолжением типа поля и в разных полях служит для разных целей. Например:

• Полю типа «Строка» можно задать значения url, email, телефон,тэги.
• Полю типа «Файл» задаётся максимально возможный размер файла для загрузки и тип файла.
• Полю типа «Дата и время» возможно задать автоматическое заполнение полей даты и времени путём добавление одной из записей: «event», «event_date», «event_time».
   

Связанное поле

В данное поле можно поместить дополнительное содержимое: js-скрипт, строку-подсказку, html-код и т.д. В содержимом можно использовать макропеременную %ID, при выводе она будет заменёна на идентификатор поля. Вывод содержимого происходит для поля с именем $field_name компонента $class_id. Если $class_id не указан - автоматически подставляется текущий класс. Для вывода содержимого поля существует функция nc_field_extension().
 

Обязательно для заполнения

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

Возможен поиск по данному полю

Подробне про поиск читайте в разделе «Поиск и выборка».
 

Приоритет

Значение данного поля определяет приоритетность вывода полей в компоненте и далее в формах добавления/редактирования объекта.
 

Значение по умолчанию

Будет записано данное значение, если поле не заполнено.
 

Тип доступа к полю

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

Добавление полей

Перейдите на вкладку «Поля» и последовательно создайте все поля, указанные в таблице. В результате вы получите набор полей:

Обратите внимание на поле «Производство», в нём подключается список «Producer». В подобном случае соответствующий список уже должен быть создан.

Теперь можно заняться подключением компонента к разделу (созданием инфоблока в разделе) и к правке шаблона компонента.

Откройте вкладку «Редактирование компонента».

На странице редактирования компонента расположены следующие поля:

• Префикс списка объектов. В поле размещается верхняя часть компонента. В том случае, если на странице размещается таблица, в это поле помещается её начало: тег <table>, заголовки таблицы, форма поиска и т.д.
• Объект в списке. Выводится повторяющаяся часть списка объектов. В случае с выводом списка в таблице, в поле помещаются теги <tr><td>Заголовок</td></tr>
• Суффикс списка объектов. Закрывающая часть списка. В этом поле размещаются закрывающие теги таблицы, постраничная навигация.
• Отображение объекта. В поле размещается информация, выводимая компонентом на странице объекта,
• Системные настройки.

Схематично шаблон отображения данных можно изобразить так:

Составим шаблон отображения списка товаров на примере созданного компонента «Товары». Код товара в списке имеет общий вид:

<div class="goods_list">
<div class="header">Товары</div>
<div class="content">
  <li><h3><a href="#">Первый товар</a></h3>
  <p>Описание первого товара</p>
  <p>Производитель: Россия</p></li>
  <li><h3><a href="#">Второй товар</a></h3>
  <p>Описание второго товара.</p>
  <p>Производитель: Россия</p></li>
</div>
</div>

Разделим эти данные по нужным полям.

В префикс списка объектов нужно поместить верхнюю часть:

<?=$f_AdminCommon?>
<div class="goods_list">
<div class="header">Товары</div>
<div class="content">

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

В поле «Объект в списке» нужно поместить вывод повторяющихся частей:

  <li><h3><a href="#">Первый товар</a></h3>
  <p>Описание первого товара</p>
  <p>Производитель: Россия</p></li>

Замените статичный текст на вывод переменных. Переменные вывода информации формируются следующим образом: $f_ + имя поля. Например, если имя поля Name, переменная выводящая значение будет писаться как $f_Name.

Ссылка на просмотр полного текста объекта указывается переменными: $fullLink или $fullDateLink. Вторая переменная выводит в url дату добавления записи. Например, для того, чтобы вывести ссылку на полный просмотр новости, в шаблоне вывода нужно прописать: <a href="<?= $fullLink?>"><?= $f_Name?></a>

Остальные переменные вывода формируются по этому же правилу $f_ + имя поля:

• Description => $f_Desciption
• Text => $f_Text
• Photo => $f_Photo

Примеры использования:

<img src="<?= $f_Photo?>" alt="<?= $f_Name?>" title="<?= $f_Name?>"> — вывод изображения
<a href="<?= $f_File?>">Скачать файл</a> — вывод ссылки на файл

Таким образом, получаем следующий блок:

  <?=$f_AdminButtons?>
  <li><h3><a href="<?= $fullLink?>"><?= $f_Name?></a></h3>
  <p><?= $f_Description?></p>
  <p>Производитель: <?= $f_Producer?></p></li>

$f_AdminButtons является служебной переменной, в обычном режиме она пуста, а в режиме администрирования содержит управляющие кнопки: изменить, удалить и включить/выключить.

Здесь же, в выводе объекта в списке, и далее, в полном отображении объекта, рекомендуется проводить проверки на наличие переменной. Например, редактор при добавлении товара не указал производителя, на сайте выведется просто «Производитель: ». Чтобы этого избежать вводим условие:

  <?= ($f_Producer?”<p>Производитель: “.$f_Producer.”</p>”:NULL);?>

В суффикс списка объектов нужно поместить оставшуюся часть кода:

 </div>
</div>

Кроме этого в нижней части обычно размещается постраничная навигация.

На странице отображения объекта код можно выводить в любом удобном для вас виде, используя все созданные у компонента поля, а также системные поля объекта:

• $f_Checked — включен или выключен объект
• $f_IP — IP пользователя добавившего объект
• $f_LastIP — IP пользователя, который последним редактировал объект
• $f_LastUpdated — время последнего обновления объекта
• $f_LastUserAgent — User Agent пользователя, который последним редактировал объект
• $f_LastUserID — ID пользователя, который последним редактировал объект
• $f_RowID — номер (ID) объекта в таблице БД (MessageXX)
• $f_RowNum — порядковый номер объекта на странице
• $f_UserID — номер пользователя, создавшего объект
• $f_UserAgent — User Agent пользователя, добавившего объект
• $f_ИмяПоля — содержит значение поля компонента
• $fullDateLink —ссылка на страницу полного вывода объекта с датой добавления
• $fullLink — ссылка на страницу полного вывода объекта
• $editLink, $deleteLink, $dropLink, $checkedLink — ссылки для работы с данными: редактирование, удаление, отключение/включени
• $MODULE_VARS[КлючевоеСловоМодуля][ИмяПеременной] — содержит значения переменных настроек модулей
• $nextLink —  содержит ссылку на следующую страницу списка объектов
• $parent_sub_tree[ ] — массив свойств текущего раздела и его родителей всех уровней
• $prevLink — содержит ссылку на предыдущую страницу списка объектов
• $recNum — количество объектов для вывода
• $sub — номер (ID) текущего раздела (в таблице Subdivision)
• $sub_level_count — содержит текущий уровень вложенности навигации
• $subHost — содержит текущий хост (домен) вида «www.company.ru»
• $subLink — содержит URI текущего раздела вида «/about/news/»
• $totRows — cодержит общее количество объектов данного инфоблока

Дополнительные примеры:

Используя различные условия в выводе компонентов можно добиваться различных вариаций отображения. Например:

Вывод записей в несколько колонок

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

Зайдите на вкладку «Пользовательские настройки» и добавьте новое поле со следующими значениями:

В настройках инфоблока отобразятся необходимые настройки

Внесите изменения в шаблон вывода.

В системные настройки поместите обработчик:

<?=( !isset($nc_num_cols) ? $NumCols = &$cc_settings[NumCols] : $NumCols= (int)$nc_num_cols );
$ColWidth= ( $NumCols>1 ? 'width="'.(floor(100/$NumCols)).'%"' : NULL);?>

В префиксе списка объектов:

<table >
<?=( $NumCols>1 ? str_repeat("<col $ColWidth />",$NumCols) : NULL );?>
<tr>

В поле объекта в списке:

<?=(!($f_RowNum%$NumCols) && $f_RowNum?” </tr><tr>”:NULL);?>
<td>
    Содержимое ячейки
</td>

В суффиксе списка объектов:

<?=( $f_RowNum%$NumCols ? str_repeat('<td>&nbsp;</td>',($NumCols-$f_RowNum%$NumCols)) : NULL );?>
</tr>
</table>

Таким образом, вы получите табличную вёрстку с необходимым количеством колонок.

Возможен вариант с использованием div'ов. В этом случае необходимо через указанное количество div'ов вставить <div class='clear'></div>. В поле объекта в списке нужно в конец добавить код:

<?=($f_RowNum % $NumCols ? "<div class='clear'></div>" : NULL )?>

Системные настройки при этом заполняются аналогично.
 

Чередование фона у строк

Для чередования фона у ячеек таблицы или списка, можно воспользоваться кодом из предыдущего примера. В поле объекта в списке поместите код:

<li<?=($f_RowNum % 2? " class='even'" : NULL );?>><?=$f_Name?></li>

или так же с таблицей

<tr<?=($f_RowNum % 2? " class='even'" : NULL );?>><td>$f_Name</td></tr>

Класс even задаёт цвет фона. Идеальным вариантом решения будет использование только классов.
 

Вывод произвольного блока через каждые n объектов

Данный пример уже полностью разобран немного выше. Предположим, что у вас есть список новостей и через каждую третью новость в списке нужно вывести рекламный блок. Смотрите в первом примере и выполняете по аналогии: создаёте пользовательскую настройку «Выводить через n объектов», в системные настройки добавляете код, в поле объекта в списке помещаете код:

<?=($f_RowNum % $NumCols ? "Здесь код рекламного блока или баннера" : NULL );?>

Подобным образом можно решить похожие задачи.
 

Группировка сообщений по дате

Необходимо выполнить группировку новостей по дате добавления (Created):

Дата_2:
— Новость 4
— Новость 3

Дата_1:
— Новость 2
— Новость 1

В поле «Сортировать объекты по полю» добавляете сортировку по полю Created DESC.

В поле вывода объекта в списке:

<div class=''>
    <?=($f_Created_day.$f_Created_month.$f_Created_year!=$myCr?"<h2>$f_Created_day.$f_Created_month.$f_Created_year</h2>":NULL);?>
    <a href='<?=$fullLink?>'><?=$f_Title?></a>
    <?=($myCr=$f_Created_day.$f_Created_month.$f_Created_year?"":NULL);?>
</div>

Группировка товаров по производителю

Необходимо выполнить группировку товаров по производителю (Producer):

Производитель_1:
— Товар 1
— Товар 2

Производитель_2:
— Товар 3
— Товар 4

В поле «Сортировать объекты по полю» добавляете сортировку по полю Producer.

В поле вывода объекта в списке:

<div class=''>
    <?=($f_Producer!=$Prod?"<h2>$f_Producer</h2>":NUL);?>
    <a href='<?=$fullLink?>'><?=$f_Title?></a>
    <?=(($Prod=$f_Producer)?"":NULL);?>
</div>

Существуют так же ссылки для действий с компонентом и с объектом. Они формируются автоматически и записываются в переменные:

Использовать их можно в любом нужном месте. Например, для формирования ссылки на редактирование объекта для пользователя достаточно прописать ссылку на странице: <a href='$editLink'>Редактировать новость</a>.

Постраничная навигация

Предположим, что на странице предусмотрена постраничная навигация и она должна иметь следующий вид:
Новости 11 - 20 из 35 предыдущая | 1 | 2 | 3 | следующая

Для реализации примера в суффикс или префикс вывода данных нужно поместить код:

Новости <?=$begRow?> - <?=$endRow?> из <?=$totRows?> &nbsp; &nbsp; <?=($prevLink?"<a href='$prevLink'>предыдущая</a>":NULL);?><?=browse_messages($cc_env, 10);?><?=($nextLink?"<a href='$nextLink'>следующая</a>":NULL);?>

В шаблон вывода навигации нужно поместить массив:

$browse_msg['prefix']   = "| ";
$browse_msg['suffix']   = " |";
$browse_msg['active']   = "<b>%PAGE</b>";
$browse_msg['unactive'] = "<a title='%FROM - %TO' href='%URL'>%PAGE</a>";
$browse_msg['divider']  = " | ";

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

Основной функцией в примере является функция: browse_messages($cc_env, $range), где $range — количество одновременно видимых ссылок на страницы.