Bitrix фильтрация и сортировка элементов по свойству на примере списка статей.

// Путь до компонента, например:
// или /local/templates/ваш_шаблон_сайта/components/bitrix/news
// или /bitrix/templates/ваш_шаблон_сайта/components/bitrix/news

|- blogs/                # название папки шаблона компонента bitrix:news
| |- bitrix/
| |- images/
| |- lang/
| |- .parameters.php
| |- detail.php         # файл в котором настраивается Детальная страница новости
| |- news.php           # файл в котором настраивается страница общего Списка новостей
| |- rss_section.php
| |- rss.php            
| |- search.php         # файл для настройки страницы результатов поиска по новостям
| |- section.php        # файл для настройки страницы раздела списка новостей
|
        

<?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();

// Получаем массив $arResult['GROUP'] в котором содержатся данные об элементах свойства-справочника
if (CModule::IncludeModule('highloadblock')) {
    $ID_GROUP = '1'; // ID highload-блока справочника
    $hldata = Bitrix\Highloadblock\HighloadBlockTable::getById($ID_GROUP)->fetch();
    $hlentity = Bitrix\Highloadblock\HighloadBlockTable::compileEntity($hldata);
    $hlDataClass = $hldata["NAME"] . "Table";
	
    $result = $hlDataClass::getList(array(
    "select" => array("ID", "UF_NAME", "UF_XML_ID", "UF_DESCRIPTION", "UF_FILE"), // Поля для выборки
    "order" => array("UF_SORT" => "ASC"),
    "filter" => array(),
	));
    while ($res = $result->fetch()) {
	$arResult['GROUP'][] = $res;
    }
}

// Функция для получения количества элементов в указанной рубрике
function getElementsCount($xml_id){
    $rsData = CIBlockElement::GetList(
	array('SORT' => 'ASC'),
	array(
	'IBLOCK_ID' => $arParams['IBLOCK_ID'],
	'=PROPERTY_SECTION' => $xml_id // SECTION - символьный код свойства

	),
	false,
	false,
	array('NAME', 'IBLOCK_ID', 'CODE')
    );
    return $rsData->SelectedRowsCount();
}
        

<div class="bx-news-list-filter-wrap">
	<? foreach ($arResult['GROUP'] as $group):?>
		<? if ($_GET['group'] != $group['UF_XML_ID']):?>
			<a class="bx-news-list-filter-item" href="<?=$APPLICATION->GetCurPageParam("group=".$group['UF_XML_ID'], array("group"));?>">
				<span class="bx-news-list-filter--text">
					<span class="bx-news-list-filter-name"><?=$group['UF_NAME'];?></span>
					<span class="bx-news-list-filter-count">(<?=getElementsCount($group['UF_XML_ID']);?>)</span>
				</span>
			</a>
		<?else:?>
			<div class="bx-news-list-filter-item active">
				<span class="bx-news-list-filter-text">
					<span class="bx-news-list-filter-name"><?=$group['UF_NAME'];?></span>
					<span class="bx-news-list-filter-count">(<?=getElementsCount($group['UF_XML_ID']);?>)</span>
				</span>
			</div>
		<?endif;?>
	<?endforeach;?>
	<? if ($_GET['group']):?>
		<a class="bx-news-list-filter-item clear" href="<?=$APPLICATION->GetCurPageParam("", array("group"));?>">
			<span class="bx-news-list-filter-name">Сбросить фильтр</span>
		</a>
	<?endif;?>
</div>
        

<? 
if ($_GET['group']):
	// Задаём глобальный фильтр groupFilter
	$GLOBALS['groupFilter'] = array(
		'=PROPERTY_SECTION' => $_GET['group']  // SECTION - символьный код свойства
	);
	// Передаём имя глобального фильтра в настройки компонента news.list
	$arParams["FILTER_NAME"] = 'groupFilter';
endif;
?>
        

.bx-news-list-filter-wrap {
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: 30px;
}

.bx-news-list-filter-item{
  padding: 5px;
  display: inline-block;
}

.bx-news-list-filter-item:hover{
  text-decoration: none;
}

.bx-news-list-filter-text{
  display: flex;
  align-items: center;
  font-weight: 400;
  padding: 3px 10px 6px 10px;
  background-color: #dddddd;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s ease background;
}

.bx-news-list-filter-item.active .bx-news-list-filter-text,
.bx-news-list-filter-item:hover .bx-news-list-filter-text{
  background-color: #BBBBBB;
}

.bx-news-list-filter-item.clear .bx-news-list-filter-name{
  color: #0065ff;
  transition: 0.3s ease;
}

.bx-news-list-filter-item.clear:hover .bx-news-list-filter-name{
  border-bottom: 1px dashed #0065ff30;
}

.bx-news-list-filter-name,
.bx-news-list-filter-count{
  display: inline-block;
  font-size: 13px;
  line-height: 18px;
  color: #333;
}

.bx-news-list-filter-count{
  margin-left: 3px;
}