Сегодня мы рассмотрим материал, как для вашего сайта Магазина в uCoz или uWeb, вы можете настроить фильтр, который предоставит возможность поиска товаров по ценам (по заданному диапазону) лишь используя бегунок, который можно двигать и искать необходимые товары.

Как настроить фильтр с бегунком для магазина ?

1. Основное, что вам нужно сделать, перейти в настройки модуля Интернет-магазин, далее найти пункт "Фильтры", напротив должен быть отмечен пункт "Выводить меню для фильтрации материалов".
2. В настройках списка фильтров для отображения, у вас должна быть выбрана лишь "Цена", выберите и сохраните изменения.

Стиль № 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?>

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

Примечание

Отметим, если у вас на сайте 5 и более тыс товаров и фильтр не отображается, вам стоит оформить запрос в техподдержку с панели управления сайтом раздел Помощь - Служба поддержки или через форму обратной связи: https://www.ucoz.ru/contact

После обращения в техподдержку, сотрудник поддержки настроит отображение фильтров (расширит лимит) сайта при большом количестве товаров.