О чем здесь?
В разделе уроков есть материал по настройке фильтров, которые позволяет внедрить удобные инструменты подбора товаров.
Иногда мы забываем о том, что использовали фильтры, а как вернуться обратно не все понимают. В этой заметке рассматривается внедрение в фильтры кнопки, при нажатии на которую произойдет сброс всех примененных фильтров.
Речь идет о фильтрах, которые оформлены через выпадающие списки. Случай с оформлением через наборы ссылок здесь не рассматривается, потому что его можно реализовать через 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 интернет магазина.
0
