Skip to content

Как переделать checkbox в select в компоненте catalog.smart.filter (умный фильтр) ?

Всем привет! Сегодня я расскажу как переделать компонет 1С Битрикс 14.0.x catalog.smart.filter (умный фильтр) таким образом чтобы вместо стандартных checkbox были выпадающие списки select.

Умный фильтр 1С Битрикс

В первую очередь Вам необходимо скопировать шаблон компонента catalog.smart.filter в шаблон вашего сайта и подключить его (новый шаблон) в комплексном компоненте каталога. Т.к. иногда не удаётся сделать это по средствам интерфейса «эрмитажа битрикс» копируем шаблон вручную по средствам FTP. Для этого идём в папку /bitrix/components/bitrix/catalog.smart.filter/template/ отсюда копируем папку visual_horizontal. В папке Вашего шаблона /components/bitrix/ создаём папку catalog.smart.filter в неё заливаем ранее скопированную папку visual_horizontal. Переименовываем visual_horizontal например так my_visual_horizontal. Теперь нам нужно подключить новый шаблон умного фильтра в комплексном компоненте каталога. Я подразумеваю что вы уже скопировали шаблон комплексного компонента bitrix:catalog в шаблон своего сайта, поэтому нам нужно открыть папку вашего шаблона далее /components/bitrix/catalog/имя_шаблона_комплексного_компонента_каталог/section.php найти в коде место где подключается компонент умного фильтра catalog.smart.filter и в коде вызова подставить имя нашего шаблона умного фильтра т.е. my_visual_horizontal.

Теперь переходим непосредственно к переделке checkbox в select, первый раз я поднял данную проблему на форуме битрикса тут. Что нам необходимо изменить:

 

Структура комплексного компонента

1) в файле script.js папки шаблона компонента catalog.smart.filter копируем и переименовываем 2 метода click и reload и слегка меняем их атрибуты (везде меняем input на select) :

Метод clickSelect()

JCSmartFilter.prototype.clickSelect = function(select)
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)
				);
			}
	}

2) затем в шаблоне компонента (вайл template.php) input заменяем select-ом вот таким образом. Для этого находим ветку условия отображения свойств не числового типа, это будет вот такой код:

 elseif(!empty($arItem["VALUES"]) && !isset($arItem["PRICE"])) {...

ниже него будет выводиться input, заменяем его на следующий код:

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

3) Для того чтобы стандартный ajax обработчик понимал что мы ему передаём, нам придётся налету подставлять в атрибуты name наших select-ов идентификаторы выбираемых свойств. А чтобы нам не пришлось каждый раз с добавлением нового свойства в умный фильтр добавляем в код «генератор jquery обработчиков». Для каждого выпадающего списка обработчик будет свой. Связываться они будут по ID значением которого будет выступать мнемонический код свойства задаваемый в информационном блоке.

<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);
			});

			<?
		}

	}?>
});

Осталось только подправить внешний вид фильтра под тему сайта и всё.

Желаю удачи!

 

Понравилось? Поделись с друзьями:Share on VKShare on FacebookTweet about this on TwitterShare on Google+
ОпубликованоРазработка сайтов на 1С Битрикс

2 комментов

  1. Павел Павел

    Удивительная статья для текущего времени. Уже давным-давно есть штатная настройка для внешнего вида фильтра, а с последним обновлением еще добавились подсказки.

    • maler1988 maler1988

      Эта статья писалась чёрт знает когда, помоему при версии 1С Битрикс 12.x

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Защита от ботов *

Оставляя комментарий на сайте, вы даёте согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности
© it-svalka.ru 2013 - 2016 г.