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

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

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



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

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


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

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

Кейс №8. Как сбросить фильтры товаров

Сергей    21.01.2015    2316    5.0 из 5.0 (10)

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

    О чем здесь?

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

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

    Речь идет о фильтрах, которые оформлены через выпадающие списки. Случай с оформлением через наборы ссылок здесь не рассматривается, потому что его можно реализовать через CSS.

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

    Я рассчитывал написать скрипт минут за 30 в несколько строк, но получилось немного больше и дольше. Не будем подробно рассматривать, как это было. Если вам интересно, посмотрите комментарии в скрипте:

    
    $(document).ready(function(){
     $(".flist").after("<button>Сбросить фильтры</button>"); // После готовности документа разместить кнопку за блоком с фильтрами
     $(".flist").next("button").attr("onclick", "resetFilters(0);"); // Добавить функцию-обработчик (определена ниже)
     $(".flist").next("button").attr("disabled", "disabled"); // Сделать кнопку неактивной по умолчанию
     $(".flist").next("button").attr("class", "btn btn-default"); // Установить CSS класс кнопки
     // Проверить выпадающие списки на наличие примененных фильтров
     $(".flist-select").each(function(elem){
      if ($(this).val() != 0) {$(".flist").next("button").removeAttr("disabled");} // Один из фильтров активен
     });
     // Обработчик для выпадающих списков
     $(".flist-select").live("change",function(){
      if(this.value != 0) {
       $(".flist").next("button").removeAttr("disabled"); // Активировать кнопку, если фильтр применен
      }
     });
    });
    // Функция сброса фильтров
    var resetFilters = function(i, arr){
     $(".flist").next("button").attr("disabled", "disabled"); // "выключаем" кнопку сброса
     if(i == 0 && !arr){
      var arr = [];
      $(".flist-select").each(function(elem){
       arr.push($(this).attr("id").split("-")[2]); // Перебор полей по которым допускается фильтрация
      });
     }
     // Отправить запрос на сброс фильтров для всех полей
     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":""}});
      $(".flist-select option:first-child").attr("selected", "selected");
     }
    };
    

    Этот скрипт нужно сохранить в файл с расширением .js и подключить в шаблон каталога товаров.

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

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

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

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

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

    .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    }
    .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    }
    

    Как видите, чтобы поменять цвет кнопки нужно всего лишь изменить строки с цветом фона, шрифта и границы кнопки. Все они вынесены в класс .btn-default.

    Чтобы задействовать стили, скопируйте их в CSS интернет магазина.

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

    Обсуждение

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

    avatar
    1
    Спасибо за решение, чувствуется, что вы рассматриваете актуальные вопросы на которые люди не находят своевременного ответа на форуме ucoz.
    avatar
    0
    2
    Пожалуйста. Решение некоторых вопросов требует определенных навыков и времени. Не всегда возможно описать решение в одном сообщении на форуме.
    k
    3
    Сергей ,а тестовой странице нет. А то сколько не ставил ( не только я ) не появляется кнопка и все (((
    avatar
    0
    4
    Возможно, если Вы $FILTER_SELECTOR$ обернули в див с классом отличным от flist, то кнопка не появится. Как на Ваш сайт взглянуть? (можно в ЛС)
    k
    5
    отправил в личку
    avatar
    6
    Спасибо! Давно напрашивалась эта кнопка. Еще не хватает чтобы сбрасывалось автоматически при переходе в другую категорию.
    avatar
    7
    у меня не хочет работать сама  кнопка- не сбрасывает фильтр.  разместила вроде все как написано выше. сайт http://www.line-l.ru
    avatar
    8
    все поняла, этот скрипт работает только для выпадающих списков
    avatar
    0
    9
    да, точно, спасибо, надо поправить.
    S
    10
    
    Цитата
    Случай с оформлением через наборы ссылок здесь не рассматривается, потому что его можно реализовать через CSS
    Сергей, а не могли бы рассказать об этом подробней?
    avatar
    0
    12
    Эх, вспомнить бы, что я имел ввиду))
    o
    14
    Сергей, а подскажите, где в коде CSS можно настроить визуальное отображение блока фильтров?
    А то у меня очень некрасиво все это выводиться на данный момент..
    avatar
    1
    15
    Делается это в CSS интернет магазина: Дизайн - управление дизайном (шаблоны) - Интернет магазин - Таблица стилей (CSS).

    Нужно найти следующие классы и поменять их:
    Код
    .flist-item
    .flist-label
    .flist-select
    .flist-values
    o
    16
    Спасибо, Сергей. А не подскажите еще как менять внешний вид кнопок ценового диапазона? Из этого же фильтра,т.е. какой код отвечает за внешний вид полей начальная и максимальная цена и кнопок фильтровать и сбросить. Ведь это я так понимаю реализовано с помощью форм?
    avatar
    1
    17
    Код
    .flist-item button
    o
    18
    Это собственно сами кнопки сброса/фильтра, а именно код полей? В которых собственно и пишется ценовой диапазон - минимальный и максимальный.

    У меня именно эти поля визуально большие и поле начальной цены находиться рядом с названием  фильтра ЦЕНА и из за этого поля выстроены криво. Т.е. идет надпись цена а следом сразу поле. Я хотел бы чтобы поля просто находились под надписью цена.

    Вот страничка с фильтром слева http://ventcub.ru/shop/nastennye-kondicionery/nastennye-kondicionery-ballu
    avatar
    1
    19
    А у полей так:
    
    Код
    .flist-item input {
    display: block;
    margin: 5px 0;
    }
    o
    20
    Сергей, огромное спасибо!!! очень помогли!! =)
    o
    21
    Во! Еще вопрос назрел сам собой теперь:

    А можно ли как-то сделать отображение возможных вариантов фильтра просто в столбец? Т.е., к примеру, у меня выводится:

    Площадь помещения:
    Все · 20 кв. м. (2) · 30 кв. м. (2)

    А хотелось бы чтоб возможные варианты у всех фильтров просто шли списком друг под другом:

    Площадь помещения:
    • Все
    • 20 кв. м. (2) 
    • 30 кв. м. (2)

    ну и т.д.

    Извиняюсь за столь великое кол-во вопросов - вчера сидел до 5 утра пытался сам разобраться - нифига не вышло. Так что пора учить ccs
    avatar
    1
    22
    :)
    
    Код
    .flist-values>a, .flist-values>.active {
    display:block;
    }
    o
    23
    Большое спасибо! 

    Но теперь между вариантами фильтра стоит жуткая точка, которая шибко широко разделяет расстояние между вариантами.
    http://ventcub.ru/shop/nastennye-kondicionery

    Читал про то как убрать эту точку в другом разделе 
    http://ucozmagazines.ru/publ/urok_52_shablon_kataloga_tovarov/1-1-0-52#h2t-3

    Но там неподходящий способ.

    И еще - можно как-то помочь проекту финансово? За полезные советы и оперативность, я думаю, люди готовы были бы делать хоть и небольшие, но платежи. На оплату того же хостинга/модуля и т.п.
    avatar
    1
    24
    Пожалуй, тут только так

    Код
    .flist-values {
    visibility: hidden;
    }
    .flist-values>a, .flist-values>.active {
       display: block;
       visibility: visible;
       margin-top: -10px;
    }
    margin-top надо поиграться, чтобы достичь нужного результата.

    Чтобы помочь проекту, Вы можете купить что-нибудь из литературы в нашем магазине http://ucozmagazines.ru/shop/literatura или оставить отзыв здесь http://ucozmagazines.ru/gb

    Спасибо за желание помочь :)
    o
    25
    Большое спасибо, еще раз! Пошаманил - подстроил под себя ) Теперь надо разобраться с кнопкой сброса фильтров. Не планируете в ближайшее время выпуск урока на данную тематику? Думаю, многим было б интересно, кто использует ссылочный тип вывода фильтров.

    Насчет литературы - думаю, приобрету архив аудитов сайта. Полезная вещь, учтем ошибки коллег ) А отзыв - написал )
    o
    13
    Тоже хотел бы узнать про это )
    S
    11
    Прошу прощения за начертание, случайно получилось)
    avatar
    26
    Действительно, а расскажите как можно реализовать при оформлении через наборы ссылок? Что именно надо добавить в код css чтобы получить желаемый результат - сброс фильтров?
    avatar
    2
    27
    тут не совсем дело в css, вернее не только лишь в css... надо дописать скрипт. Как появится возможность, мы опубликуем его)
    v
    28
    Отлично! Бум ждать =)
    M
    29
    Подскажите, пожалуйста, как сделать, чтобы этот скрипт выполнялся автоматом при переходе из одной категории в другую?
    avatar
    0
    30
    Используйте его в таком виде:
    
    Код
    $(document).ready(function(){  
    resetFilters(0);
      });
    // Функция сброса фильтров
    var resetFilters = function(i, arr){
      $(".flist").next("button").attr("disabled", "disabled"); // "выключаем" кнопку сброса
      if(i == 0 && !arr){
       var arr = [];
       $(".flist-select").each(function(elem){
        arr.push($(this).attr("id").split("-")[2]); // Перебор полей по которым допускается фильтрация
       });
      }
      // Отправить запрос на сброс фильтров для всех полей
      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":""}});
       $(".flist-select option:first-child").attr("selected", "selected");
      }
    };
    avatar
    31
    Сергей, подскажите, можно ли сделать так, что бы, если фильтр выбран (selected), значение было например с красным фоном? Так пользователь сможет интуитивно заметить, что фильтр выбран...
    avatar
    0
    32
    Здравствуйте.

    На самом деле здесь все не так просто. Но при загрузке страницы подсветить то, что нужно, можно так:
    
    Код
    $('.flist-select').each(function(){
         if(!this.value) {} else {$(this).css({'background':'red'});}
    });

    Только код не будет подсвечивать только что примененный фильтр сразу, а лишь после перезагрузки страницы.
    avatar
    33
    Здравствуйте, можно ли сделать так, чтобы данный скрипт сбрасывал  еще и цену?
    Кейс №8. Как сбросить фильтры товаров