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

Elements

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

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

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

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

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

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


[
	'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:

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

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

4. Если нет page:

Element

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

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

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

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

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

Smart  Filter

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

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

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

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

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

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

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

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',
]

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


// подключаем фильтр и записываем возвращаемые значения в переменную $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- это компонент предназначен для обработки форм и сохранения отправленных данных в инфоблок.

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

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


//подключения компонента
$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 с небольшими дополнениями.

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

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


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

Рrofile

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

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

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


$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:

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

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


$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