Умный фильтр с иерархией вложенности

Не единожды поступала задача вывести фильтр с многоуровневой структурой. Здесь будет показана одна реализация на основе свойств инфоблока. Вторая реализация выглядит как фильтр, на самом деле является выводом catalog.section.list, закомуфлированным под фильтр и подающим в ajax данные для фильтрации catalog.section либо по свойствам, либо по разделам. Эта реализация основана на интуитивно понятной структуре разделов инфоблока и является ее отображенинм. Она накладывает определенные ограничения на структуру разделов и выводит только два уровня. На момент написания реализацию можно посмотреть здесь: http://locationhunters.ru/catalog/

Умный фильтр обладает бОльшими возможностями и выглядит для заказчика более предпочтительным, чем выше описанный пример. Естественно, что все зависит от конкретной задачи в рамках которой разработчик делает свой выбор. Для описаной здесь реализации использован следующий подход: многоуровневость заложена в [spoiler]свойство инфоблока типа строка и реализовано с помощью перечисления через точку запятой разных данных, первая часть до точки с запятой считается разделом верхнего уровня и должна повторяться у тех элементов которые должны быть объеденены в одну группу. Эти данные приходят из 1С и формируются на основе внутренней структуры 1С, при этом на этапе обмена они трансформируются к виду <занчение1> ; <значение2>. Далее в умном фильтре мы выводим сначала стандартными средствами эти свойства, а после непродолжительного "смотрения" на них по условию ID-свойства "натравливаем" на них JS и получаем структуру как здесь: http://wpart.ru/catalog/zapchasti_kalina_vaz_1117_19_2192_94/
Следует заметить, что сгенерированный с помощью JS chekbox верхнего уровня не являются чистыми элементами для филтрации по свойствам, они лишь несут вспомогательную роль для объеденинения в группу свойств и возможности пометить все элементы подгруппы. В рамках показанной реализации этого было достаточно.

                        if ($arItem[ID]==<ID нужного свойства>){?>
<script type="text/javascript">
   var catgroup = $('.cataloggroup');
   var textgroup = [];
   for (i=0; i<catgroup.length; i++){
      textgroup[i] = catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML.split(';',1);
   }
   var groupname = '';
   var str = '';
   var checkitem;
   for (i=0; i<textgroup.length; i++){
      str = textgroup[i].join('');;
      if (i==0) {
         groupname = str;
         var divgrop = document.createElement('div');
         divgrop.className = 'groupcat';
         var lastId = 'groupcat'+i;
         divgrop.id = lastId;
         $(catgroup[i].parentNode).append('<span class="labelchek" data-for="'+lastId+'"></span><label class="bx_filter_param_label cataloggroup cathand" id="labelgroup'+i+'" for="arrFilter_group_'+i+'"><span class="bx_filter_input_checkbox"><input type="checkbox" value="Y" name="arrFilter_group_'+i+'" id="arrFilter_group_'+i+'" onclick="checkfunc(\''+lastId+'\', \'arrFilter_group_'+i+'\');"><span class="bx_filter_param_text">'+str+'</span></span></label>');
         catgroup[i].parentNode.appendChild(divgrop);
         catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML=catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML.replace(str+'; ','');
         $(catgroup[i]).appendTo('#'+lastId);
         // create div, label, input, span
      }
      else
         if (groupname==str){
            catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML=catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML.replace(str+'; ','');
            $(catgroup[i]).appendTo('#'+lastId);
            // поместить i-ый элемент из catgroup в контейнер
         }
         else{
            checkitem = $('#'+lastId).find('input:checked');
            if (checkitem.length>0) {
               $('#'+lastId).attr('style','display: block;');
               $('[data-for="'+lastId+'"]').addClass('active');
            }
            // create div, label, input, span
            groupname = str;
            divgrop = document.createElement('div');
            divgrop.className = 'groupcat';
            lastId = 'groupcat'+i;
            divgrop.id = lastId;
            $(catgroup[i].parentNode).append('<div style="clear:both;"></div><span class="labelchek" data-for="'+lastId+'"></span><label class="bx_filter_param_label cataloggroup cathand" id="labelgroup'+i+'" for="arrFilter_group_'+i+'"><span class="bx_filter_input_checkbox"><input type="checkbox" value="Y" class="inpcathand" name="arrFilter_group_'+i+'" id="arrFilter_group_'+i+'" onclick="checkfunc(\''+lastId+'\', \'arrFilter_group_'+i+'\');"><span class="bx_filter_param_text">'+str+'</span></span></label>');
            catgroup[i].parentNode.appendChild(divgrop);
            catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML=catgroup[i].getElementsByClassName('bx_filter_param_text')[0].innerHTML.replace(str+'; ','');
            $(catgroup[i]).appendTo('#'+lastId);
         }
   }
   checkitem = $('#'+lastId).find('input:checked');
   if (checkitem.length>0) {
      $('#'+lastId).attr('style','display: block;');
      $('[data-for="'+lastId+'"]').addClass('active');
   }
   $('.labelchek').click(function(){
      $(this).toggleClass('active');
      $('#'+$(this).attr('data-for')).toggle();
      $(this).parent().parent().height('auto');
   });
   function checkfunc(param, idinput){
      if ($('#'+idinput).prop('checked')==false) {
         $('#'+param).find('input:checked').click();
      }
      else {
         $('#'+param).find('input:checked').click();
         $('#'+param).find('input').click();
      }
   }
</script>

                        <? }
 


Компетентные специалисты оказывают техническую поддержку сайтов на любых CMS https://ivit.pro/internet-marketing/tekhnicheskaya-podderzhka-saytov/