Компоненты используются для переработки данных, с помощью которых строятся публичные части сайта. В нашей компании есть группа разработчиков, и они ежедневно работают с компонентами, которые мы создали на основе API битрикса. В этой статье мы привели список самописных компонентов Битрикс. Список будет дополняться новыми компонентами. Если у вас есть предложения по статье, можно оставить комментарий ниже.Будем рады получить обратную связь!

Elements

Компонент для вывода списка элементов инфоблока. Основан на CIBlockElement::GetList. Имеет настройки для вывода цен продуктов, нарезки изображений.

Можно передать стандартные параметры CIBlockElement::GetList:

  • sort - параметр arOrder для методаCIBlockElement::GetList
  • filter - параметр arFilter для методаCIBlockElement::GetList

Если в фильтре есть свойства, они должны обязательно отображаться в параметре props

Также можно передать параметры:

  • props - массив свойств символьных кодов, которые надо достать для элементов.
  • page - текущая страница пагинации Подробнее
  • count - количество элементов на странице Подробнее
  • pagn_id - название шаблона для пагинации (для компонента bitrix:main.pagenavigation). Подробнее
  • show_all - если true, подгрузятся все элементы (если нет настроек других, см. пагинации )
  • load_section - если правда, то для элементов будет использоваться информация о задействовании секции элемента (в том числе в регионах)
  • images - набор настроек для обработки изображений .
  • price_ids - массив ID цен ( правила работы с ценой ).
  • load_discounts - если правда, то для снижения цен в price_ids будут предлагаться скидки ( правила работы с ценой ).
  • load_urls - включение обработки шаблонов ссылок из настроек инфоблока. Эта настройка включает подгрузку раздела, как параметр load_section
  • load_catalog_fields - под поиск / не под поиск стандартные поля каталога (CATALOG_QUANTITY и т.д.)
  • CACHE_TIME - время кеширования в секундах. Если параметр передан, в компоненте кузова автокеширование на заданное время

Поддержка работы с торговыми предложениями

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


[
	'product' => [
		'filter' => [
			'NAME' => '',
			'PROPERTY_TEST' => ''
		],
		'props' => ['PROPERTY_MORE_PHOTO', 'NAME']
	]
]

Обратите внимание, все коды свойств продукта нужно писать с префиксом PROPERTY

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


$APPLICATION->IncludeCOmponent(
	'odva:elements',
	'',
	[
		'filter'         => ['IBLOCK_ID' => 7],
		'sort'           => ['CML2_ARTICLE' => 'ASC,nulls'],
		'page'           => 2,
		'count'          => 5,
		// 'pagn_id'        => 'nav',
		// 'show_all'       => true,
		'load_section'   => true,
		'price_ids'      => [1, 4],
		'load_discounts' => false,
		'props'          => ['MORE_PHOTO', 'CML2_ARTICLE'],
		'images'         => ['MORE_PHOTO' => ['small' => [100, 100]], 'PREVIEW_PICTURE' => ['small' => [100, 100]]],
		'product' => [
			'filter' => [
				'NAME' => '',
				'PROPERTY_TEST' => ''
			],
			'props' => ['PROPERTY_MORE_PHOTO', 'NAME']
		]
	]
);

Работа с ценами

Начало с версии 18.6.200 битрикс умеет работать с ценами "красиво". Для получения цены надо в arSelect функции GetList передать ключ PRICE_<price_id>. где price_id - ID типа цены. Посмотреть ID можно в админке: Магазин - Цены - Типы цен

В нашем комплекте цены передаются соответствующим параметром price_ids , который является массивом ID-шников (не PRICE_<price_id>, а только <price_id>), которые необходимо достать.

Сортировки и фильтры работают также - передачи ключа PRICE_<price_id>, где price_id - id типа цены. Но есть нюанс - не попадается скидка . Но это нормально, так как стандартный компонент битрикса тоже не умеет сортировать со скидками.

Если использовать скидки и их необходимо достать, необходимо добавить дополнительный параметр load_discounts со значением true . Однако надо помнить, что при получении скидок битрикс очень много поступил. Для 50 элементов делается около 1000 запросов к БД. Поэтому доставать скидки нужно только при необходимости.

В результирующем массиве всегда в ключе PRICE находится актуальная цена (с учетом скидок). Если есть скидка для данного товара, то добавится ключ OLD_PRICE, в котором будет старая цена без учета скидок.

Настройка обработки изображений.

Массив изображений - обязательно ассоциативный, где

ключ - код поля, который надо обработать. Ключи DETAIL_PICTURE и PREVIEW_PICTURE автоматически воспринимаются как стандартные выходы и детальная картинка. Остаются поиски в массиве свойств.

значение - массив настроек для изображения. Это тоже обязательно ассоциативный массив, где

ключ - код, с предметами будет добавлена ​​картинка в результирующий массив картинок

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

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

Коды свойств товара переданы без префиксаPROPERTY_

Настройка пагинации.

Пагинацию можно получить с помощью компонента bitrix:main.pagenavigation . Нормальной документации не нашел, но про подключение можно почитать тут , так же есть пример шаблона вместе с описанием в этой репозитории (bitrixComponetns)

В $arResultесть ключ NAV_OBJECT, который необходимо передать при подключении.

Пример подключения пагинации в шаблоне odva:elemetns:


$APPLICATION->IncludeComponent(
	"bitrix:main.pagenavigation",
	"",
	[
		"NAV_OBJECT"  => $arResult['NAV_OBJECT']
	],
	false
);

Естественно необходимо создать шаблон для пагинации, и вывести там данные. Пример шаблона (с многоточиями: 1 2 ... 10) есть в этом же репозитории.

Логика прослушивания параметров пагинации:

1. Если передается pagn_id:

  • игнорируем параметр show_all
  • параметр page берется либо из arParams, либо с URL страницы
  • создаем объект пагинации и записываем его в arResult
  • берем все данные для пагинации из URL
  • количество элементов ставим либо из count, либо 20
  • передаем в getlist параметры iNumPage и nPageSize, значения которых берем из объекта nav

2. Если pagn_id не передан:

  • объект пагинации не создаем

3. Если есть page:

  • передаем в getlist параметры iNumPage и nPageSize
  • iNumPage берем из page
  • nPageSize либо из count, либо 20

4. Если нет page:

  • если есть count
  • передаем в getlist параметр nTopCount
  • если нет count
  • если есть параметр show_all
  • оставляем параметры навигации пустым массивом
  • если нет параметра show_all
  • передаем в getlist параметр nTopCount

Element

Element-компонент для вывода детальной информации элемента или простого продукта (торговые предложения не поддерживаются)

Принимаемые параметры:

  • idилиcodeилиfilter- соответственно, ID или CODE элемента или массив для фильтрования.Один из этих параметров надо передать обязательно.Если переданы несколько,то отбираются по приоритету id -> code -> filter.
  • IBLOCK_ID- ID инфоблока, в котором лежит элемент.Обязателен, если не передается в параметре filter
  • props- массив CODE свойств, которые нужно достать (если в массиве будет элемент *, то загрузятся все поля)
  • load_product_fields- подгружать / не подгружать поля товара 
  • load_section- подгружать / не подгружать информацию о разделе
  • price_ids- массив ID типов цен, которые нужно достать. Посмотреть ID можно в админке:Магазин - Цены - Типы цен
  • images - массив настроек для обработки изображений.
  • set_code_404- если значение отличается от "N" или не задано, то при неудачном поиске будет отдаваться 404
  • кодshow_errors- если значение не установлено или не равно "N", при неудачном поиске будет показываться текст "Элемент не найден", иначе будет подключаться шаблон
  • SET_CANONICAL_URL- установить канонический URL для страницы
  • SET_TITLE- установить заголовок страницы
  • SET_BROWSER_TITLE- установить заголовок окна браузера
  • ADD_ELEMENT_CHAIN- добавить элемент в breadcrumb
  • SET_META_KEYWORDS- вывести meta-тег keywords
  • SET_META_DESCRIPTION- вывести meta-тег description

Настройка обработки изображений

Массив images - обязательно ассоциативный, где:

  • ключ- код поля, которое надо обработать. Ключи DETAIL_PICTURE и PREVIEW_PICTURE автоматически воспринимаются как стандартные анонс и детальная картинка. Остальные ищутся в массиве свойств.
  • значение - массив настроек для изображения. Это тоже обязательно ассоциативный массив, где ключ - код, с которым будет добавлена картинка в результирующий массив картинок; значение - массив, в котором первые два значения- ширина и высота для обрезания картинки (их нужно обязательно передать). Кроме того можно передать третий параметр - тип обрезания resizeType (см.документацию по обрезанию картинок).

Коды свойств, которые передаются в images, обязательно нужно передать так же в props, иначе они не будут подгруженны и соответственно не обработаны.

Smart  Filter

Этот компонент предназначен для парсинга строки с ЧПУ фильтром и генерации массива фильтров. Сгенерированные фильтры можно передавать в GetList без дополнительной обработки.

Результирующий массив состоит из двух ключей - products и offers. Offers заполняется автоматически, если инфоблок продуктов - это инфоблок, являющийся каталогом и имеющий инфоблок с торговыми предложениями.

Работа фильтра основана на фасетном индексе - по сути это просто sql индексы, просто немного сложнее и с использованием API битрикса. Для нормальной работы фильтра надо создать фасетные индексы, настроить свойства и правильно передать параметры.

Параметры фильтра:

1. IBLOCK_ID-обязательныйпараметр, указывается ID инфоблока, с которым будет работать фильтр;

2. FILTER_URL- строка вида "test/1/test2/2-3/", в которой передаются фильтры. Множественные значения (чекбоксы, радио кнопки, цена от и до) разделяются знаком "-";

3. PRICE- массив для настройки работы с ценами.Без этого парамтера цены игнорируются. В этот параметр могут входить следующие ключи:

  • TITLE- подпись поля в фильтре (обычно "Цена")
  • FIELD- название поля с ценой - ключ, по которому будет искаться цена в строке URL. Этот же ключ будет передаваться в результирующий массив с фильтрами.
  • SORT- сортировка, для остальных полей задается в админке в настройках инфоблока

4. SECTION_IDилиSECTION_CODE- ID или CODE раздела соответственно. На сколько я понял, ни на что не влияют, но в фасетном индексе битрикса используются.

Фасетные индексы

При создании свойств инфоблока (возможно еще в каких то случаях) битрикс начинает показывать предупреждение, что надо создать новый фасетный индекс. Надо нажать на ссылку в предупреждении и создать этот индекс. Так же можно перейти в админке на страницу /bitrix/admin/iblock_reindex_admin.php?lang=ru и создать там индексы. Эти индексы надо создавать каждый раз, когда создается свойство (возможно и в других случаях, в общем, каждый раз, когда битрикс этого требует).

Подключение свойств в фильтр

Чтобы свойство отображалось в фильтре, надо его настроить - в админке, в настройках свойств инфоблока зайти в расширенные настройки конкретного свойства (нажать "...") и поставить галочку "Показывать в умном фильтре".

Также можно выбрать, в каком виде будет отображаться это свойство - флажки, радиокнопки, выпадающий список.

Чтобы свойство работало, обязательно нужно указать свойству символьный код (CODE).

Если, есть свойства, которые необходимо отобразить в фильтре, но для них нельзя включить фасетные индексы, то их можно передать в параметре ADDITIONAL_PROPERTIES

Сортировка значений свойств фильтра

Для сортировки необходимо при получении значений методом getValues(), передать массив вида


[
	'PROP' => 'DISPLAY_VALUE',
	'ORDER' => 'SORT_ASC',
]
  • PROP - свойство для сортировки
  • ORDER - SORT_ASC для сортировки по возрастанию, или SORT_DESC для сортировки по убыванию.

Пример подключения фильтра:


// подключаем фильтр и записываем возвращаемые значения в переменную $filter
// в $_GET['_filter'] хранится строка фильтра, полученная с помощью правильно настроенного . Вместо этого может быть другая переменная.
$filter = $APPLICATION->IncludeCOmponent(
	'odva:smart.filter',
	'',
	[
		'IBLOCK_ID'  => 7,
		'PRICE'      => [
			'TITLE' => 'Цена',
			'FIELD' => 'price'
		],
		'FILTER_URL' => $_GET['_filter'],
		'ADDITIONAL_PROPERTIES' => ['>CATALOG_QUANTITY', 'PROPERTY_BESTSALLER_VALUE']
	]
);

// передаем фильтр в другой компонент
// важно помнить, что $filter - массив с двумя ключами - products и offers
// по умолчанию (если нет торговых предложений) заполняется только products
$APPLICATION->IncludeCOmponent(
	'odva:elements',
	'',
	[
		'filter'       => $filter['products']
	]
);

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

Odva Form

Odva Form- это компонент предназначен для обработки форм и сохранения отправленных данных в инфоблок.

Парамерты компонента:

  • IBLOCK_ID - ID инфоблока, в который нужно сохранять данные, обязательный параметр
  • ELEMENT_NAME - название нового элемента инфоблока, по умолчанию будет ставиться "Новый элемент"
  • PROTECTED_PARAMS - параметры, которые нужно защитить от подделки пользователем. Как работает - описано ниже
  • REQUIRED_FIELDS - определяет, какие поля формы обязательны для заполнения

Пример подключения:


//подключения компонента
$APPLICATION->IncludeComponent(
	'odva:odva.form',
	'.default',
	[
		'IBLOCK_ID' => 1,
		'ELEMENT_NAME' => 'Новая заявка',
		'REQUIRED_FIELDS' => ['EMAIL'],
        'PROTECTED_PARAMS' => ['REQUIRED_FIELDS']
	]
);

Как передавать данные на сервер.

Запрос отправляется к отдельному файлу, путь к нему хранится в переменной $arResult['PATH_AJAX'] в шаблоне.

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

Кроме данных на сервер надо обязательно отправлять параметр TOKEN. В нем хранится набор защищенных параметров. Без этого параметра форма будет возвращать ошибку.

Как работает защита параметров.

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

По умолчанию там уже зашиты параметры IBLOCK_ID и ELEMENT_NAME. Кроме них можно отправлять какие то свои параметры. Самый простой пример - защита параметра REQUIRED_FIELDS. Но можно передавать любые параметры, которые есть в $arParams.

Sections

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

Список разделов:

  • sort - параметр arOrder для методаCIBlockSection::GetList
  • filter - параметр arFilter для методаCIBlockSection::GetList
  • element_cnt - параметр bIncCnt для методаCIBlockSection::GetList
  • select - параметр Select для методаCIBlockSection::GetList
  • count - количество доставаемых секций (по умолчанию достаются все)
  • load_urls - если указан параметр, то будут загружаться ссылкиLIST_PAGE_URLиSECTION_PAGE_UR

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


$APPLICATION->IncludeComponent(
	'odva:sections',
	'sections',
	[
		'sort'        => ['SORT' => 'ASC'],
		'filter'      => [],
		'element_cnt' => true,
		'select'      => [],
		'count'       => 100,
	]
);

Рrofile

Компонент для вывода информации пользователя в личном кабинете. Есть возможность редактирования данных пользователя, изменения пароля и авторизация через социальные сети с помощью сервиса ulogin.

Можно передать параметры:

  • NEED_FIELDS - массив обязательный полей профиля
  • LOGIN_IS_EMAIL - со значением Y, если логин и емайл совпадают

Пример подключения:


$APPLICATION->IncludeComponent("odva:profile",//имя пространства имен:имя компонента
                               "profile.info",//шаблон копонента
                               []
                           );

Примерные шаблоны:


- "profile.info" - шаблон вывода и изменения личной информации
- "chenge.password" - шаблон смены пароля

Переменные, которые нужны для ajax:


$arResult['SAVE_PROFILE_PATH']// - путь к файлу для изменения профиля
	$arResult['SAVE_PASSWORD_PATH']// - путь к файлу для изменения пароля
	$arResult['ADD_SOCIAL_NETWORK_PATH']// - путь к файлу для измения соцсети

Section

Используются для вывода детальной информации о разделе инфоблока. Работает на основе метода CIBlockSection::GetList.

Можно передать некоторые стандартные параметры CIBlockSection::GetList:

  • sort - параметр arOrder для метода CIBlockSection::GetList
  • filter - параметр arFilter для метода CIBlockSection::GetList

Также можно передать параметры:

  • id или code - соответственно, ID или CODE раздела. Один из этих параметров надо передать обязательно. Если переданы несколько,то отбираются по приоритету id -> code
  • IBLOCK_ID - ID инфоблока, в котором находится раздел___Обязателен
  • props - массив CODE свойств, которые нужно достать (если в массиве будет элемент *, то загрузятся все поля)
  • show_element_cnt - количество элементов у раздела

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


$APPLICATION->IncludeCOmponent(
	'odva:elements',
	'',
	[
		'id' => 2,
		'code' => $_GET['SECTION_ELEMENT_CODE'],
		'iblock_id' => 3,
		'props' => ['UF_CASES_CONSULTATION', 'UF_TREATING_DISEASES'],
		'show_element_cnt' => true,
	]
);

Orders

Компонент предназначен для вывода списка заказов. С помощью компонента Orders мы видим следующую информацию: 

  • о пользователе, оформившем заказ;
  • о заказе;
  • списке  продуктов в заказе;
  • его оплате;
  • доставке; 
  • и  другой полезной информации о заказах.

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


IncludeComponent('odva:orders', 'template'//template -- имя шаблона компонента
    ,[
	'filter' => [
		'@ID' => [1,2,3],// массив ид заказов
		//параметры передаются в GetList филтр
	]
]);?>

Cart

Компонент для вывода информации о корзине пользователя. Подключается без параметров. В arResult есть массив продуктов, количество и цены (со скидкой и без). Можно использовать как в шапке сайта, так и на странице корзины. Cart не работает без модуля odva.helpers.

Пример подключения:


$APPLICATION->IncludeComponent('odva:cart', '', []);

Поделиться:

Facebook Twitter Vkontakte