Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

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

Сергей    27.05.2015    1485    5.0 из 5.0 (4)

Оцените материал:

    О чем здесь?

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

    Также ранее в блоге рассматривался вопрос сброса выпадающих списков.

    В этой заметке мы соберем все вместе и решим вопрос со сбросом фильтров.

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

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

    $(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$ добавьте кнопку.

    Статьи по теме

    Обсуждение

    Всего комментариев: 0

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