О Битрикс

Ajax фильтр по подразделам


Структура в данном примере следующая:
Имеются основные разделы, в каждом из которых по несколько подразделов, которые выводятся в виде выпадающего списка:

filter.png
"Тип квартиры" - это основной раздел, все остальные элементы списка - подразделы.

Данная форма сформирована с помощью следующего кода

<div class="smart-filter">
<div class="row">
<div class="col-4">
<select>
<option value="nouse">Тип квартиры </option>
<?$rayon = CIBlockSection::GetByID(31);
if ($arrayon = $rayon->GetNext())
{$arFilter = array('IBLOCK_ID' => $arrayon['IBLOCK_ID'],'>LEFT_MARGIN' => $arrayon['LEFT_MARGIN'],'<RIGHT_MARGIN' => $arrayon['RIGHT_MARGIN'],'>DEPTH_LEVEL' => $arrayon['DEPTH_LEVEL']);
$rsSect = CIBlockSection::GetList(array('left_margin' => 'asc'),$arFilter);
while ($arSect = $rsSect->GetNext()){?>
<option value="<?= $arSect["ID"] ?>"> <?=$arSect["NAME"];?>
</option>
<?}
}?>
</select>
</div>
<div class="col-4">
<select>
<option  value="nouse">Цена</option>
<?$klass = CIBlockSection::GetByID(32);
if ($arklass = $klass->GetNext())
{$arFilter = array('IBLOCK_ID' => $arklass['IBLOCK_ID'],'>LEFT_MARGIN' => $arklass['LEFT_MARGIN'],'<RIGHT_MARGIN' => $arklass['RIGHT_MARGIN'],'>DEPTH_LEVEL' => $arklass['DEPTH_LEVEL']);
$rsSect = CIBlockSection::GetList(array('left_margin' => 'asc'),$arFilter); while ($arSect = $rsSect->GetNext())
{?>
<option value="<?= $arSect["ID"] ?>">
<?=$arSect["NAME"];?>
</option>
<?}
}?>
</select>
</div>
<div class="col-4">
<select>
<option  value="nouse">Площадь</option>
<?$year = CIBlockSection::GetByID(34);
if ($aryear = $year->GetNext())
{$arFilter = array('IBLOCK_ID' => $aryear['IBLOCK_ID'],'>LEFT_MARGIN' => $aryear['LEFT_MARGIN'],'<RIGHT_MARGIN' => $aryear['RIGHT_MARGIN'],'>DEPTH_LEVEL' => $aryear['DEPTH_LEVEL']);
$rsSect = CIBlockSection::GetList(array('left_margin' => 'asc'),$arFilter); while ($arSect = $rsSect->GetNext())
{?>
<option value="<?= $arSect["ID"] ?>">
<?=$arSect["NAME"];?>
</option>
<?}
}?>
</select>
</div>
</div>
</div>

В каждом select с помощью CIBlockSection::GetByID(31); мы получаем подразделы нужного раздела (в данном случае код для трех разделов) и выводим их в цикле while.

Далее по клику на кнопку "Применить" происходит ajax-запрос: Скачать скрипт

В данном скрипте по клику на кнопку с классом do_filter-fl формируется массив данных с ключами option_id и значениями выбранных option select-а. В качестве значений выступают id выбранных подразделов.

После срабатывает ajax-запрос к файлу flat.php и передача массива с данными. В случае успеха получаемые от файла данные записываются в блок с классом fl-list (этот блок надо создать предварительно), где должны отображаться элементы выбранных в фильтре подразделов.

В flat.php (Скачать файл) в массив result мы записываем массив с разделами по id, исключая при этом основные разделы (if($res['option_id'] != "nouse"). Далее в GLOBAL $arrFilter посредством логики AND создается фильтр для компонента списка новостей. 

В итоге подключается компонент списка новостей c "FILTER_NAME" => 'arrFilter'.


Возврат к списку

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

Социальные сети

Рандом новостей