Рассмотрим как можно сделать выпадающий список свойств в умном фильтре Битрикс, вместо стандартного chekbox. Нужно это достаточно редко однако случается.
В начале было вот так:
Станет вот так:
select вместо chekbox
Для начала копируем шаблон стандартного smart.filter в папку со своим шаблоном сайта и подключаем его в шаблоне комплексного компонента каталога, заменив соответствующую строку в файле section.php.
Далее открываете шаблон компонента умного фильтра smart.filter . Для этого заходите в свой шаблон , например, /bitrix/templates/.default/components/bitrix/catalog.smart.fitr/myfilter и изменяете следующие файлы:
В файле script.js изменяете 2 метода click и reload:
Метод clickSelect() на этот :
{
if(this.timer)
clearTimeout(this.timer);
this.timer = setTimeout(BX.delegate(function(){
this.reloadSelect(select);
}, this), 1000);
}
Метод Метод reloadSelect():
{
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-ая строка и полностью заменяем на:
<select id="<?=$arItem['CODE']; ?>" name="" on Change="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/
