Select  вместо chekbox в умном фильтре 1С-битрикс

Просмотров: 9073 | Комментариев: 14

Рассмотрим как можно сделать выпадающий список свойств в умном фильтре Битрикс, вместо стандартного chekbox. Нужно это дастаточно редко однако случается.

 

В начале было вот так:

 

Станет вот так:

select  вместо chekbox

Для начала копируем шаблон стандартного smart.filter в папку со своим шаблоном сайта и подключаем его в шаблоне комплексного компонента каталога, заменив соответствующую строку в файле section.php.

 

Далее открываете шаблон компонента умного фильтра smart.filter . Для этого заходите в свой шаблон, например, /bitrix/templates/.default/components/bitrix/catalog.smart.fitr/myfilter и изменяете следующие файлы:

 

В файле script.js изменяете 2 метода click и reload:
Метод clickSelect() на этот :

JCSmartFilter.prototype.clickSelect = function(select)
{
if(this.timer)
clearTimeout(this.timer);
this.timer = setTimeout(BX.delegate(function(){
this.reloadSelect(select);
}, this), 1000);
}

Метод Метод reloadSelect():

JCSmartFilter.prototype.reloadSelect = function(select)
{
this.position = BX.pos(select, true);
this.form = BX.findParent(select, {'tag':'form'});
if(this.form)
{
var values = new Array;
values[0] = {name: 'ajax', value: 'y'};
this.gatherInputsValues(values, BX.findChildren(this.form, {'tag':'select'}, true));
BX.ajax.loadJSON(
this.ajaxURL,
this.values2post(values),
BX.delegate(this.postHandler, this)
);
}
}  

В файле template.php находим часть которая выводит инпуты с чекбоксами, примерно 147-я строка и полностью заменяем на:

<div>
<select id="<?=$arItem['CODE']; ?>" name="" onChange="smartFilter.clickSelect(this)" >
<option id="not-value" value="" >- - - -</option>
<?foreach($arItem["VALUES"] as $val => $ar) { ?>
<option <?echo $ar["CHECKED"]? 'selected="selected"': ''?> id="<?echo $ar["CONTROL_NAME"]?>" <?if ($ar["DISABLED"]){ ?>disabled<? } ?> value="Y" ><?echo $ar["VALUE"];?></option>
<? } //end foreach property values ?>
</select>
</div>

И в самый конец template.php вставляем скрипт который поможет стандартному AJAX  понять какие параметры ему предаются.  Для каждого списка обработчик свой:

<script>
$(document).ready(function(){
<? //Формируем дополнительные jquery обработчики для select-ов
foreach($arResult["ITEMS"] as $key=>$arItem) {
if(!empty($arItem["VALUES"]) && !isset($arItem["PRICE"])) {
?>
//Проставляем name select-ам с уже выбранными свойствами
setTimeout(function(){
var SelectOption = $("#<?=$arItem['CODE']; ?> option:selected").attr('id');
$("#<?=$arItem['CODE']; ?>").attr('name',SelectOption);
},1500);
//заполнение name с реакцией на change
$("#<?=$arItem['CODE']; ?>").on('change', function(){
var SelectOption = $("#<?=$arItem['CODE']; ?> option:selected").attr('id');
$("#<?=$arItem['CODE']; ?>").attr('name',SelectOption);
});
<?
}
}?>
});
</script>

В общем-то все, стилизовать внешний вид вы всегда сможете под себя. Написано на основе нескольких тем на форуме http://dev.1c-bitrix.ru/community/forums/


07.11.2014
к сожалению не работает :(
Михаил 11.11.2014
Цитата
Игорь пишет:
к сожалению не работает
Только что проверил- все работает, в тексте опечаток нет
04.12.2014
Спасибо!
20.01.2015
Доброго времени суток! Все сделал как Вы написали! Но вышла нехорошая штука: при добавлении компонента  в select  ниже появляется дополнительный select. В итоге у меня на одно свойство имеются два селекта с одинаковыми компонентами. Как быть??? Заранее очень благодарен!
13.03.2015
Добрый день!
Есть ли способ переделать поля аналогично в input?
Михаил 13.03.2015
Цитата
Guest пишет:
Добрый день!
Есть ли способ переделать поля аналогично в input?
Пока не приходилось сталкиваться с такой задачкой. но чем-то сверхсложным быть не должно.
08.05.2015
Спасибо за инфу, хотелось бы увидеть урок по переносу умного фильтра на главную страницу
Михаил 08.05.2015
Цитата
Guest пишет:
Спасибо за инфу, хотелось бы увидеть урок по переносу умного фильтра на главную страницу
Умный фильтр работает только когда находится перед компанентом catalog.section сам по себе он не действует. Что бы вывести на главную надо работать с обычным "тупым" фильтром
18.08.2015
Добрый день!

Спасибо Вам за Вашу работу здесь. Для  меня, как новичка в Bitrix, очень много полезного!

Буду признательна за ответ: можно ли штатными средствами Bitrix Управление сайтом сделать такую выборку по товарам. Если нет, то каким образом не штатными внутри системы?

http://www.inwool.de/alpakadecken

Спасибо.
Александр 23.07.2016
Михаил, здравствуйте!
Не работает умный фильтр для не авторизованных пользователей, как это можно исправить?
Александр 29.04.2018
Здравствуйте Михаил! Вопрос немножко не по ветке ваших тем, но хотелось бы получить совет от грамотного специалиста.

Вопрос в том, что сейчас на стандартной сборке Битрикс Малый Бизнес есть необходимость видоизменить умный фильтр под свои нужды, а именно: изменить шаблон вывода параметров, версткой бутстрап в 4 колонки и в определенной очередности. Но открыв программный код поняли, что видимо все параметры дополнительные свои созданные выводятся не отдельным кодом на каждый параметр, а общим, а в шаблоне соответственно необходимо разделить свойства отдельными столбцами, и вообще изменить общий дизайн всего фильтра, кардинально. Возможно ли реализовать это и что бы вы посоветовали сделать в данном случае?
Михаил 29.04.2018
Цитата
Александр Си написал:
Здравствуйте Михаил! Вопрос немножко не по ветке ваших тем, но хотелось бы получить совет от грамотного специалиста.

Вопрос в том, что сейчас на стандартной сборке Битрикс Малый Бизнес есть необходимость видоизменить умный фильтр под свои нужды, а именно: изменить шаблон вывода параметров, версткой бутстрап в 4 колонки и в определенной очередности. Но открыв программный код поняли, что видимо все параметры дополнительные свои созданные выводятся не отдельным кодом на каждый параметр, а общим, а в шаблоне соответственно необходимо разделить свойства отдельными столбцами, и вообще изменить общий дизайн всего фильтра, кардинально. Возможно ли реализовать это и что бы вы посоветовали сделать в данном случае?
Там, по большому счету, все параметры (их вид точнее), обвернуты в case-ы
Можете просто разобрать их на более гибкие if-ы
Да, листинг будет просто огромный. Но зато поубираете не нужные case-ы. За счет этого, немного подсократите.

Само собой, это стоит делать, если реально нужно переделать шаблон фильтра- "под орех"
В целом, отвечая на вопрос: Да, с шаблоном фильтра можно сотворить что угодно.
Александр 13.10.2018
Цитата
Михаил Базаров пишет:
Там, по большому счету, все параметры (их вид точнее), обвернуты в case-ы
Можете просто разобрать их на более гибкие if-ы
Да, листинг будет просто огромный. Но зато поубираете не нужные case-ы. За счет этого, немного подсократите.

Само собой, это стоит делать, если реально нужно переделать шаблон фильтра- "под орех"
В целом, отвечая на вопрос: Да, с шаблоном фильтра можно сотворить что угодно.
С этим моментом поняли, но пока не сообразим как правильнее сделать, у нас требуется расположить горизонтально фильтр, как на примере:
http://prntscr.com/l5q2px
Конструкция по верстке:

  •        <select>
                <option label="Хиты продаж" value="1" selected>
                       <span class="active">Хиты продаж</span>
                 </option>
                 <option>
                     <span>Да</span>
                   </option>
                   <option>
                      <span>Нет</span>
                   </option>
             </select>
       
То есть каждое свойство фильтра это селект со значением, и тут ряд проблемок, во первых каким образом в виде цикла раскидать каждое свойство в отдельный селект (у нас 2 типа - первый открывает ниже окно с диапазоном цен, а второй тип это селекты со значением в выпадающем списке).
В чем сложности:
http://prntscr.com/l5q3yv
Свойство по клике на которое открывается значение, при клике на которое открывается список, вот необходимо чтобы была главная ссылка, при клике на которую сразу бы выпадали значения (причем хорошо бы, чтобы значения Все не было вообще в списке).
И соответственно как вообще фильтр сделать в одну строку и распределить свойства как бы отдельным li друг от друга.
кейсы мы сократили до выпадающего списка и чекбоксов, ну и диапазон цен: http://prntscr.com/l5q5kn
28.08.2019
Михаил Базаров подскажите  - как в этом селекте реализовать выбор нескольких значений?
Михаил 30.08.2019
Цитата
a13z2005@yandex.ru написал:
Михаил Базаров  подскажите  - как в этом селекте реализовать выбор нескольких значений?
Заметка уже староватая. В штатном фильтре должна быть такая возможность- если память не изменяет.
Если нет, можно переделать чекбоксы- нужно будет плотненько поверстать и попотеть- но сымитировать такую возможность через них
Обсудить статью на форуме

Кроме создания сайтов, я так же веду блог с заметками о вебразработке, записываю бесплатные видеоуроки и содержу форум, на котором можно задавать вопросы и просто общаться. Заметки, преимущественно - это короткие или подробные рецепты, по реализации часто требуемого функционала- в рамках разработки сайтов на 1С-Битрикс

Использование название раздела новостей в Title битрикс

Если нужно вывести название раздела инфоблока новостей в Title, например использовать для вывода заголовка первого уровня из названия раздела в Битрик...

Заполнить свойство инфоблока ценой из торгового каталога

Если вам по какой-то причине нужно скопировать цену товара в свойство этого же инфоблока. Например, для вывода старой цены в редакции Битрикс "Ма...

Мобильные версии страниц и поисковые системы

Согласно требования поисковых систем: Яндекс и Google, в случае если у вашего сайта имеется мобильная версия, нужно уведомить поисковые системы о ...

Данные о заказе текущего пользователя

Иногда нужно получить данные о заказе текущего пользователя. Не через компонент, а непосредственно через API Битрикс. Вариантов, где ожто может понадо...

Простые калькуляторы в карточке товара каталога на Битрикс

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

Вывод даты создания элемента в правильном формате в Битрикс

Если нужно вывести дату создания новости, статьи или товара в каталоге, в принципе любого элемента инфоблока- можно воспользоваться вызовом $arResult[...

Показать еще
Авторизация
Напомнить пароль Зарегистрироваться
Быстрый вход через соц. сеть