Кейс №9. Как сбросить фильтры. Часть 2

Скрипт сброса фильтров

Вот сам скрипт:

$(document).ready(function(){
 // здесь будет список id фильтров, которые надо сбросить 
 var fArr = [],
 // Функция сброса фильтров
 resetFilters = function(i, arr){
 $('.reset-filters').attr("disabled", "disabled"); // "выключаем" кнопку сброса
 // Отправить запрос на сброс фильтров для всех полей в fArr
 if (i<arr.length-1) {
 _uPostForm('',{type:"POST",url:location.href,data:{"mode":"filter", "field":arr[i], "value":""}, success: function(){resetFilters(i+1, arr);}});
 } else {
 _uPostForm('',{type:"POST",url:location.href,data:{"mode":"filter", "field":arr[i], "value":""}});
 }
 },
 // Функция удаление элемента из массива по имени
 delFArr = function(str){
 if(!str){return false};
 for(j=0;j<fArr.length;j++){
 if(fArr[j] == str) {
 fArr.splice(j,1);
 
 }
 }
 },
 // Функция проверки элемента на вхождение в массив по имени
 isInFArr = function(str){
 if(!str){return false};
 for(j=0;j<fArr.length;j++){
 if(fArr[j] == str) {
 return true
 }
 }
 }
 // Добавить функцию-обработчик (определена ниже) кнопка с классом "reset-filters" <button class="reset-filters" disabled="disabled">Сбросить фильтры</button>
 $('.reset-filters').live('click', function(){resetFilters(0,fArr);}); 
 // Проверить выпадающие списки и поля цен на наличие примененных фильтров
 $('.flist-select, .price_filter').each(function(elem){
 if ($(this).val() != 0) {
 // Один из фильтров активен
 $('.reset-filters').removeAttr('disabled');
 if($(this).attr("id").split("-")[2]) {
 fArr[fArr.length] = [$(this).attr("id").split("-")[2]]
 } else {
 if(!isInFArr('price')){fArr[fArr.length] = 'price';}
 }
 } 
 });
 // Проверить фильтры списки
 $('.flist-values>.active').each(function(){
 if($(this).text() != $(this).parent().children(':first-child').text()) {
 $('.reset-filters').removeAttr('disabled');
 fArr[fArr.length] = $(this).parent().attr("id").split("-")[2];
 }
 });
 // Обработчик для выпадающих списков
 $(".flist-select").live("change",function(){
 if(this.value != 0) {
 $(".reset-filters").removeAttr("disabled"); // Активировать кнопку, если фильтр применен
 if(!isInFArr($(this).parent().attr("id").split("-")[2])){fArr[fArr.length] = $(this).parent().attr("id").split("-")[2];}
 } else {
 delFArr($(this).attr("id").split("-")[2]);
 if(fArr.length == 0){$(".reset-filters").attr('disabled','disabled');}
 }
 });
 // Обработчик набора ссылок
 $('.flist-values>a').live('click',function(){
 if($(this).text() != $(this).parent().children(':first-child').text()) {
 $(".reset-filters").removeAttr("disabled");
 if(!isInFArr($(this).parent().attr("id").split("-")[2])){fArr[fArr.length] = $(this).parent().attr("id").split("-")[2];}
 } else {
 delFArr($(this).parent().attr("id").split("-")[2]);
 if(fArr.length == 0){$(".reset-filters").attr('disabled','disabled');}
 }
 });
 // Обработчик кнопки фильтровать по ценам
 $('button[onclick="setPriceFilter();"]').live('click',function(){
 $(".reset-filters").removeAttr("disabled");
 if(!isInFArr('price')){fArr[fArr.length] = 'price';}
 });
 // Системный сброс фильтры цены
 $('button[onclick="cancelPriceFilter();"]').live('click',function(){
 if(fArr.length == 0){$(".reset-filters").attr('disabled','disabled');}
 delFArr('price');
 }); 
});

Сюда включены фильтры типа "Выпадающие списки", "Набор ссылок" и фильтр по цене.

Подключаем скрипт

Скачайте файл reset-filters.js и загрузите его на свой сайт с помощью файлового менеджера.

Зайдите в панель управления: Дизайн - Управление дизайном (шаблоны) - Каталог товаров и в коде шаблона перед </body> разместите следующее:

<?if $FILTER_SELECTOR$?>
<script src="/путь к файлу"></script>
<?endif?>

Размещение кнопки сброса фильтров

В этой версии скрипта необходимо самостоятельно разместить кнопку сброса фильтров в том месте, где захочется, а также украсить ее по своему усмотрению. Главное выполнить одно условие: элемент, который будет сбрасывать фильтры должен иметь класс reset-filters. Пример:

<button class="reset-filters" disabled="disabled">Сбросить фильтры</button>

Чтобы разместить кнопку перейдите в Панель управления - Дизайн - Управление дизайном (шаблоны). Где-то рядом с $FILTER_SELECTOR$ добавьте кнопку.