Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!
Как настроить фильтр по ценам с бегунком
Как настроить фильтр по ценам с бегунком
Материал добавлен: 29 Марта 2021
Материал обновлен: 23 Апреля 2025
В этой статье вы узнаете, как настроить на вашем сайте (в системе uCoz или uWeb) удобный фильтр товаров по цене с помощью ползунка. Это позволит посетителям быстро находить товары в нужном ценовом диапазоне.
Как настроить фильтр с ползунком для магазина
- Перейдите в настройки модуля «Интернет-магазин».
- Найдите пункт «Фильтры» и убедитесь, что активирован параметр «Выводить меню для фильтрации материалов».
- В списке фильтров выберите только «Цена» и сохраните изменения.
Стиль №1
Установка фильтра (стиль №1)
Код фильтра размещается в одном из контейнеров сайта — обычно в первом или втором. Создайте новый блок, в разделе «Содержимое HTML» вставьте следующий код:
<?if($FILTER_SELECTOR$ && ($PAGE_ID$ != 'allgoods') && ($PAGE_ID$ != 'wishlist'))?>
<a name="filter" id="filter"></a>
<div class="filter" align="center">
<div class="flist-item" id="flist-item-price"><span class="flist-label" id="flist-label-price"></span>
<div class="ramka-filter">
<span class="des" style="font-size:14px;">Укажите диапазон цен. <br>Просто двигайте ползунки!</span>
</div>
<div class="inputs">
<input id="price_min" class="price_filter" value="" type="text">
<input id="price_max" class="price_filter" value="" type="text">
</div>
<div id="price-range-2"></div>
<div id="clear-filter"><a class="clear" onclick="cancelPriceFilter();"><i class="fa fa-window-close" aria-hidden="true" style="color:red;"></i> Очистить фильтр</a></div>
</div>
<div id="multfilter"><div class="other-filter"><?if($FILTER_SELECTOR$)?><?$DRAW_BLOCK$('FILTER_SELECTOR','flist')?><?endif?></div></div>
</div>
<?endif?>
<?if($FILTER_SELECTOR$ && ($PAGE_ID$ != 'allgoods'))?>
<script type="text/javascript" src="/.s/src/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/.s/src/jquery-ui/themes/smoothness/smoothness.min.css">
<style>@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
#multfilter .flist {display: none;}
.inputs input {font-size:14px;padding:5px;}
.ramka-filter {width: 250px; text-align: center; padding: 5px; margin-top: 5px; border: 2px solid #16a238; border-radius: 3px;}
input.price_filter {width: 120px; height: 30px; border: 1px solid #b1afaf; border-radius: 3px;}
#price-range-2 {max-width: 250px;margin-top: 10px;}
#clear-filter,.inputs {margin-top: 10px;}
#clear-filter a {font-size: 14px;cursor: pointer;}
</style>
<?endif?>
<?if($FILTER_SELECTOR$ && ($PAGE_ID$ != 'allgoods'))?>
<script>
$("#price-range-2").slider({
range: true,
min: shopFilterMinPrice,
max: shopFilterMaxPrice,
values: [shopFilterMinPrice, shopFilterMaxPrice],
step: 1,
slide: function(event, ui){
$("#price_min").val(ui.values[0]);
$("#price_max").val(ui.values[1]);
},
change: function( event, ui ){
return priceFilter('price', ui.values.join('|'))
}
});
</script>
<script>
$(function(){
$(".inputs #price_min").val($(".flist #price_min").attr("value"));
$(".inputs #price_max").val($(".flist #price_max").attr("value"));
});
</script>
<?endif?>
Стиль №2
Установка фильтра (стиль №2)
Как и в первом варианте, разместите код фильтра в одном из контейнеров сайта, создав под него отдельный блок. Вкладка «Содержимое HTML»:
<?if($FILTER_SELECTOR$)?>
<div class="flist-item">
<span class="flist-label" id="flist-label-other1"><div><a href="javascript:;" onclick="cancelPriceFilter();clearInput()">Сбросить</a></div>Цена:</span>
<div class="main">
<form action="#" method="post">
<div class="formCost">
<input type="text" id="minCost" value="0" onchange="setPriceFilter();"/> -
<input type="text" id="maxCost" value="1000" onchange="setPriceFilter();" />
</div>
<div class="sliderCont">
<div id="slider" onchange="setPriceFilter();"></div>
</div>
</form>
</div>
</div>
<script>
function clearInput() {
jQuery("input#minCost, #price_min").val(shopFilterMinPrice);
jQuery("input#maxCost, #price_min").val(shopFilterMaxPrice);
}
jQuery(document).ready(function(){
jQuery("input#minCost, #price_min").val(shopFilterMinPrice);
jQuery("input#maxCost, #price_min").val(shopFilterMaxPrice);
jQuery("#slider").slider({
min: shopFilterMinPrice,
max: shopFilterMaxPrice,
values: [0,shopFilterMaxPrice],
range: true,
stop: function(event, ui) {
jQuery("input#minCost, #price_min").val(jQuery("#slider").slider("values",0));
jQuery("input#maxCost, #price_max").val(jQuery("#slider").slider("values",1));
setPriceFilter();
},
slide: function(event, ui){
jQuery("input#minCost, #price_min").val(jQuery("#slider").slider("values",0));
jQuery("input#maxCost, #price_max").val(jQuery("#slider").slider("values",1));
}
});
jQuery("input#minCost").change(function(){
var value1=jQuery("input#minCost").val();
var value2=jQuery("input#maxCost").val();
if(parseInt(value1) > parseInt(value2)){
value1 = value2;
jQuery("input#minCost").val(value1);
}
jQuery("#slider").slider("values",0,value1);
});
jQuery("input#maxCost").change(function(){
var value1=jQuery("input#minCost").val();
var value2=jQuery("input#maxCost").val();
if (value2 > 1000) { value2 = 1000; jQuery("input#maxCost").val(1000)}
if(parseInt(value1) > parseInt(value2)){
value2 = value1;
jQuery("input#maxCost").val(value2);
}
jQuery("#slider").slider("values",1,value2);
});
jQuery('input').keypress(function(event){
var key, keyChar;
if(!event) var event = window.event;
if (event.keyCode) key = event.keyCode;
else if(event.which) key = event.which;
if(key==null || key==0 || key==8 || key==13 || key==9 || key==46 || key==37 || key==39 ) return true;
keyChar=String.fromCharCode(key);
if(!/\d/.test(keyChar)) return false;
});
});
</script>
<style>
.formCost {text-align:right}
.formCost input { width: 42%; height: 20px; margin: 2px!important; border-radius: 5px; }
.formCost #minCost {float:left}
#flist-item-price {display:none}
.sliderCont {margin-top:15px;margin-bottom:30px;padding:0px 6px}
.sliderCont #slider {width: 100%;}
.ui-widget-header {background:#3498db;}
.ui-slider {position: relative;}
.ui-slider .ui-slider-handle {position: absolute;z-index: 2;width: 9px;height: 9px;background:#fff;border: 2px solid #535353;cursor: pointer}
.ui-slider .ui-slider-range {position: absolute;z-index: 1;font-size: .7em;display: block;border: 0;overflow: hidden;}
.ui-slider-horizontal {height: 4px;}
.ui-slider-horizontal .ui-slider-handle { top: -5px;margin-left: -6px;}
.ui-slider-horizontal .ui-slider-range {top: 0;height: 100%;}
.ui-slider-horizontal .ui-slider-range-min { left: 0;}
.ui-slider-horizontal .ui-slider-range-max {right: 0;}
.ui-widget-content { border: 1px solid #fff;background: #dedede;}
.ui-widget-header { border: 1px solid #fff;}
.ui-corner-all {-moz-border-radius: 21px;-webkit-border-radius: 21px;border-radius: 21px;}
.flist-item {margin-bottom:20px}
.flist-label {display:block;}
.flist-values {font-size:0px;border:1px solid #dedede;display:block;border-bottom:0px}
.flist-values a, .flist-values .active {display:block;padding:16px 20px; font-size:14px;border-bottom:1px solid #dedede}
.flist-values .active {background:#f1f1f1}
.flist-values a {color:#666;text-decoration:none;}
#price_min {float:left;margin-right:3%}
#price_min, #price_max {width:48%;}
.sliderCont #slider {overflow:inherit;}
.flist-label {font-family:'Ubuntu';font-weight:700;color:#535353!important;}
.flist-label {font-size:18px;margin-bottom:20px}
.flist-label div {float:right}
.flist-label div a { font-size: 18px; color: #535353; text-decoration: none; }
.flist-label div a:hover {color:#666}
</style>
<?endif?>
<?if($FILTER_SELECTOR$ && ($PAGE_ID$ != 'allgoods2'))?><?$DRAW_BLOCK$('FILTER_SELECTOR','flist')?><?endif?>
Проверка работы фильтра
После настройки фильтра перейдите в любую категорию интернет-магазина. Если всё сделано правильно, в выбранном контейнере отобразится блок фильтра с ползунком.
Если на вашем сайте размещено более 5000 товаров и фильтр не отображается, это связано с техническими ограничениями. Обратитесь в техподдержку.
Как связаться с техподдержкой
Для этого перейдите в раздел «Помощь» → «Служба поддержки» в панели управления сайтом или воспользуйтесь формой обратной связи.
После обращения специалисты службы поддержки увеличат лимит на отображение фильтров для вашего магазина.
Как настроить фильтр по ценам с бегунком