1С Битрикс: создание фильтра товаров, сортировка товаров по скидке, по названию, по цене

Содержание:
1. 1. Создание формы с выбором значений для фильтрации товаров в 1С Bitrix

Задача: создать фильтр, в котором будут выводится товары со скидкой, ниже товары без скидки. А также будет сортировка цены по возрастанию и убыванию, по названию в алфавитном порядке и обратном. Также будет фильтрация по популярности (просто рандомная фильтрация).

1. Создание формы с выбором значений для фильтрации товаров в 1С Bitrix

Для начала создадим саму форму, для выбора значений фильтрации. Для этой цели подойдет простейший select. Но проблема в том, что для тегов option сложно задать определенные отступы и стили, и поэтому можно сделать выбор значений используя обычный список, и доработав его стилями и скриптом подменять нужное значение.

Там где у нас находится каталог в файле section_horizontal.php (может и быть section_vertical.php, зависит от настроек компонента) добавляем следующий код, который задает параметры сортировки:


// здесь задаются параметры сортировки
if ($_GET["sort"] === "price")   $arParams["ELEMENT_SORT_FIELD"] = "catalog_PRICE_1";
                            if ($_GET["order"] === "up")     $arParams["ELEMENT_SORT_ORDER"] = "asc";
                            if ($_GET["order"] === "down")   $arParams["ELEMENT_SORT_ORDER"] = "desc";
                            if ($_GET["sort"] === "name")    $arParams["ELEMENT_SORT_FIELD"] = "NAME";

                            if ($_GET["order"] === "asc")    $arParams["ELEMENT_SORT_ORDER"] = "asc";
                            if ($_GET["order"] === "desc")   $arParams["ELEMENT_SORT_ORDER"] = "desc";
                            if ($_GET["order"] === "popular")   $arParams["ELEMENT_SORT_FIELD"] = "rand";
                            if ($_GET["order"] === "sale"){
// эта функция сортировки по скидке, класс находится в /local/php_interface/init.php
                                $res = AllProductDiscount::getFull(
                                    array("ACTIVE" => "Y", "SITE_ID" => SITE_ID),
                                    array()
                                );
                                foreach($res['IDS'] as $ID) {
                                    $sale_id[] = $ID;
                                }
                                $GLOBALS['arrFilter'] = array("ID"=>$sale_id);
                            }

Далее уже подключаем форму, в которой задаются и отправляются все параметры сортировки, а также подключаем стили, скрипты.


<link rel="stylesheet" type="text/css" href="<?=SITE_TEMPLATE_PATH?>/css/generic.css" />

     <div class="select">
        <input class="select__input" type="hidden" name="">
        <div class="select__head">
            <? if (isset($_GET["sort"]) && !empty($_GET["sort"])) {
                    if($_GET["order"]==="up"){?>
                        По возрастанию цены
                    <?}elseif($_GET["order"]==="down"){?> 
                        По убыванию цены
                     <?}elseif($_GET["sort"] == "name"){?>
                            <?if($_GET["order"]==="asc"){?>
                                По алфавиту А-Я
                            <?}elseif($_GET["order"]==="desc"){?>
                                По алфавиту Я-А
                            <?}elseif($_GET["order"]==="popular"){?>
                                Популярности
                            <?}elseif($_GET["order"]==="sale"){?>
                                Со скидкой
                            <?}?>
                    <?
                    }
                }else{?>
                    Популярности
                <?}?>

        </div>
        <ul class="select__list" style="display: none;">
            
             <? if (isset($_GET["sort"]) && !empty($_GET["sort"])) {
                    if($_GET["order"]==="up"){?>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=up">По возрастанию цены</li>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=down">По убыванию цены</li>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=sale">Со скидкой</li>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=popular">Популярности</li>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=desc">По алфавиту Я-А</li>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=asc">По алфавиту А-Я</li>
                        <?}elseif($_GET["order"]==="down"){?>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=down">По убыванию цены</li>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=up">По возрастанию цены</li>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=sale">Со скидкой</li>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=popular">Популярности</li>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=desc">По алфавиту Я-А</li>
                            <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=asc">По алфавиту А-Я</li>
                        <?}elseif($_GET["sort"] == "name"){?>
                            <?if($_GET["order"]==="asc"){?>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=asc">По алфавиту А-Я</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=desc">По алфавиту Я-А</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=popular">Популярности</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=up">По возрастанию цены</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=down">По убыванию цены</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=sale">Со скидкой</li>
                            <?}elseif($_GET["order"]==="desc"){?>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=desc">По алфавиту Я-А</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=asc">По алфавиту А-Я</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=popular">Популярности</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=up">По возрастанию цены</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=down">По убыванию цены</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=sale">Со скидкой</li>
                            <?}elseif($_GET["order"]==="popular"){?>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=popular">Популярности</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=desc">По алфавиту Я-А</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=asc">По алфавиту А-Я</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=up">По возрастанию цены</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=down">По убыванию цены</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=sale">Со скидкой</li>
                            <?}elseif($_GET["order"]==="sale"){?>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=sale">Со скидкой</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=popular">Популярности</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=desc">По алфавиту Я-А</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=asc">По алфавиту А-Я</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=up">По возрастанию цены</li>
                                <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=down">По убыванию цены</li>
                            <?}?>
                    <?
                    }
                }else{?>
                    <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=popular">Популярности</li>
                   <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=up">По возрастанию цены</li>
                   <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=price&order=down">По убыванию цены</li>
                   <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=sale">Со скидкой</li>
                    <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=asc">По алфавиту А-Я</li>
                    <li class="select__item" data-url="<?=$arResult["SECTION_PAGE_URL"]?>?sort=name&order=desc">По алфавиту Я-А</li>
                <?}?>
        </ul>
    </div>

Да код не претендует на мега вау, зато работает как нужно.

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



        jQuery(($) => {
            $('.select').on('click', '.select__head', function () {
                if ($(this).hasClass('open')) {
                    $(this).removeClass('open');
                    $(this).next().fadeOut();
                } else {
                    $('.select__head').removeClass('open');
                    $('.select__list').fadeOut();
                    $(this).addClass('open');
                    $(this).next().fadeIn();
                }
            });

            $('.select').on('click', '.select__item', function () {
                $('.select__head').removeClass('open');
                $(this).parent().fadeOut();
                $(this).parent().prev().text($(this).text());
                $(this).parent().prev().prev().val($(this).text());
//здесь происходит переход по ссылке, чтобы сразу фильтр срабатывал
                window.location.href = $(this).context.dataset.url;
                console.log($(this).context.dataset.url);
            });


            $(document).click(function (e) {
                if (!$(e.target).closest('.select').length) {
                    $('.select__head').removeClass('open');
                    $('.select__list').fadeOut();
                }
            });
        });

В папку шаблона добавляем папку css добавляем файл generic.css, файл будет в архиве.

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


"ELEMENT_SORT_FIELD" => $arParams["ELEMENT_SORT_FIELD"],
"ELEMENT_SORT_ORDER" => $arParams["ELEMENT_SORT_ORDER"],

Далее уже идет запуск компонента "bitrix:catalog.section","". То есть шаблон у меня находится в папке /local/ и кастомизирован. Но если и используется шаблон по умолчанию, то тоже должно все прекрасно работать.

И также в файле section_horizontal.php добавим следующий код, который будет при фильтре со скидкой, выводить ниже отфильтрованных товаров скидкой, товары без скидки.


if ($_GET["order"] === "sale"){
                  // эта функция сортировки по скидке, класс находится в /local/php_interface/init.php
                        $res = AllProductDiscount::getFull(
                            array("ACTIVE" => "Y", "SITE_ID" => SITE_ID),
                            array()
                        );
                        foreach($res['IDS'] as $ID) {
                            $sale_id[] = $ID;
                        }

                        $sect_params["ADD_SECTIONS_CHAIN"] = "N";

                        $GLOBALS['arrFilter'] = array("!ID"=>$sale_id);
                        $intSectionID1 = $APPLICATION->IncludeComponent(
                            "bitrix:catalog.section",
                            "catalog_sale",
                            $sect_params,
                            $component
                        );

                }

Функцию(точнее класс) AllProductDiscount::getFull был найден в сети интернет, поэтому не публикую здесь его, будет в архиве. Чтобы вывести товары без скидки пришлось выводить только товар один, без описания. Для этого в компоненте catalog_sale нужно убрать описание секции, например так:


if ($arParams['HIDE_SECTION_DESCRIPTION'] !== 'Y')
{
	?>
	<div class="bx-section-desc bx-<?=$arParams['TEMPLATE_THEME']?>">
		<p style="font-weight: 600;font-size: 24px;color:#574E5D; text-align: center;" class="bx-section-desc-post"><?//=$arResult['DESCRIPTION']?></p>
	</div>
	<?
}

Далее в самом дефолтном компоненте catalog.section также убрать описание.


if ($arParams['HIDE_SECTION_DESCRIPTION'] !== 'Y')
{
	?>
	<div class="bx-section-desc bx-<?=$arParams['TEMPLATE_THEME']?>">
		<p style="font-weight: 600;font-size: 24px;color:#574E5D; text-align: center;" class="bx-section-desc-post"><?if($_GET['order']==="sale"){}else echo $arResult['DESCRIPTION'];?></p>
	</div>
	<?
}

Скачать исходники

И таким образом можно создать сортировку со скидкой в каталоге товаров 1С Битрикс, сортировку по названию и цене в Bitrix.

1. Создание формы с выбором значений для фильтрации товаров в 1С Bitrix

Категории