Добрый день!
Помоги разобраться, вроде все настроил, но все равно не работает ползунок цен в интернет-магазине. В чем может быть проблема?
Сайт:
https://fifaday.ru/shop/all
Код:
<div class="fg">
<div class="nav-cat">
<style>@import url(https://fifaday.ru/css/filter-sale.css);</style>
<script src="https://fifaday.ru/js/jquery-ui.min.js"></script>
<div class="flist-item" id="flist-item-price"><span class="flist-label" id="flist-label-price">Цена:</span> <input type="text" id="price_min" class="price_filter" value="">
<input type="text" id="price_max" class="price_filter" value="">
<button onclick="setPriceFilter();">Фильтровать</button>
<button onclick="cancelPriceFilter();">Сбросить</button>
<script type="text/javascript">
var shopFilterMinPrice = 0;
var shopFilterMaxPrice = 300000;
$('#price_min').on('change', function(){
var minEl = $(this);
var maxEl = $('#price_max');
var minElVal = correctPriceFilterMinValue(minEl.val());
var maxElVal = correctPriceFilterMaxValue(maxEl.val());
if(minElVal > maxElVal){
minElVal = maxElVal;
}
minEl.val(minElVal);
maxEl.val(maxElVal);
});
$('#price_max').on('change', function(){
var minEl = $('#price_min');
var maxEl = $(this);
var minElVal = correctPriceFilterMinValue(minEl.val());
var maxElVal = correctPriceFilterMaxValue(maxEl.val());
if(minEl.val()){
if(maxElVal < minElVal){
maxElVal = minElVal;
}
}else{
if(maxElVal < shopFilterMinPrice){
maxElVal = shopFilterMinPrice;
}
}
minEl.val(minElVal);
maxEl.val(maxElVal);
});
function correctPriceFilterMinValue(val){
var inpMinVal = val;
if(inpMinVal && /[^0-9]/.test(inpMinVal) == false){
inpMinVal = parseInt(inpMinVal);
if(inpMinVal < shopFilterMinPrice){
inpMinVal = shopFilterMinPrice;
}
}else{
inpMinVal = shopFilterMinPrice;
}
return inpMinVal;
}
function correctPriceFilterMaxValue(val){
var inpMaxVal = val;
if(inpMaxVal && /[^0-9]/.test(inpMaxVal) == false){
inpMaxVal = parseInt(inpMaxVal);
if(inpMaxVal > shopFilterMaxPrice){
inpMaxVal = shopFilterMaxPrice;
}
}else{
inpMaxVal = shopFilterMaxPrice;
}
return inpMaxVal;
}
function setPriceFilter(){
var error = '',
inpMinVal = $("#price_min").val(),
inpMaxVal = $("#price_max").val();
if(inpMinVal == undefined || price_min == ''){
inpMinVal = 0;
error += '<li>Не указано минимальное значение</li>';
}else{
if(inpMinVal < 0 || /[^0-9]/.test(inpMinVal) !== false){
inpMinVal = 0;
error += '<li>Недопустимое минимальное значение. Допустимо только целочисленные положительные значения.</li>';
}else{
inpMinVal = parseInt(inpMinVal);
if(inpMinVal > 100000000000000000){
error += '<li>Недопустимое минимальное значение. Слишком большое значение</li>';
}
}
}
if(inpMaxVal == undefined || inpMaxVal == ''){
inpMaxVal = 0;
error += '<li>Не указано максимальное значение</li>';
}else{
if(inpMaxVal < 0 || /[^0-9]/.test(inpMaxVal) !== false){
inpMaxVal = 0;
error += '<li>Недопустимое максимальное значение. Допустимо только целочисленные положительные значения.</li>';
}else{
inpMaxVal = parseInt(inpMaxVal);
if(inpMaxVal > 100000000000000000){
error += '<li>Недопустимое максимальное значение. Слишком большое значение</li>';
}
}
}
if(inpMaxVal < inpMinVal){
error += '<li>Минимальное значение должно быть меньше максимального.</li>';
}
if(!error){
return priceFilter('price', inpMinVal+'|'+inpMaxVal);
}else{
shop_alert(
'<ul>'+error+'</ul>',
window.uCoz.shopSigns[210178],
'warning',
350,
120,
{tm:8000, align:'left', icon:'img/warning.png'}
);
}
return false;
}
function cancelPriceFilter(){
priceFilter('price', '');
$("#price_min").val('');
$("#price_max").val('');
return false;
}
</script></div>
<div id="price-range-zone">
<div id="price-range-2"></div>
<div id="price-range-grid"></div>
</div>
<script>
if($("#price_min").val()!='') {
cancelPriceFilter();
}
$("#price_min").val(shopFilterMinPrice);
$("#price_max").val(shopFilterMaxPrice);
$("#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 ){
FiltGroup.fromHint = $('#price-range-zone');
return priceFilter('price', ui.values.join('|')), setTimeout(FiltGroup.postFilter, 1000);
}
});
$("#price-range-2").append('<span class="irs-min" style="visibility: hidden;"></span><span class="irs-max" style="visibility: hidden;"></span><span class="irs-from" style="visibility: visible; left: -3.125%;"></span><span class="irs-to" style="visibility: visible; left: 85.208333333%;"></span><span class="irs-single" style="visibility: hidden; left: 32.083333333%;"></span>');
$('.irs-min').html(shopFilterMinPrice).css({
'left': '0%',
'margin-left': $('.irs-min').outerWidth() / -2
});
$('.irs-max').html(shopFilterMaxPrice).css({
'left': '100%',
'margin-left': $('.irs-max').outerWidth() / -2
});
$('.irs-from').html(shopFilterMinPrice).css({
'left': '0%',
'margin-left': $('.irs-from').outerWidth() / -2
});
$('.irs-to').html(shopFilterMaxPrice).css({
'left': '100%',
'margin-left': $('.irs-to').outerWidth() / -2
});
$('.irs-single').html(shopFilterMinPrice + ' — ' + shopFilterMaxPrice);
$("#price-range-grid").append('<span class="irs-grid" style="width: 97.8%; left: 1%;"><span class="irs-grid-pol" style="left: 0%"></span><span class="irs-grid-text js-grid-text-0" style="left: 0%;"></span><span class="irs-grid-pol small" style="left: 20%"></span><span class="irs-grid-pol small" style="left: 15%"></span><span class="irs-grid-pol small" style="left: 10%"></span><span class="irs-grid-pol small" style="left: 5%"></span><span class="irs-grid-pol" style="left: 25%"></span><span class="irs-grid-text js-grid-text-1" style="left: 25%; visibility: visible;"></span><span class="irs-grid-pol small" style="left: 45%"></span><span class="irs-grid-pol small" style="left: 40%"></span><span class="irs-grid-pol small" style="left: 35%"></span><span class="irs-grid-pol small" style="left: 30%"></span><span class="irs-grid-pol" style="left: 50%"></span><span class="irs-grid-text js-grid-text-2" style="left: 50%; visibility: visible;"></span><span class="irs-grid-pol small" style="left: 70%"></span><span class="irs-grid-pol small" style="left: 65%"></span><span class="irs-grid-pol small" style="left: 60%"></span><span class="irs-grid-pol small" style="left: 55%"></span><span class="irs-grid-pol" style="left: 75%"></span><span class="irs-grid-text js-grid-text-3" style="left: 75%; visibility: visible;"></span><span class="irs-grid-pol small" style="left: 95%"></span><span class="irs-grid-pol small" style="left: 90%"></span><span class="irs-grid-pol small" style="left: 85%"></span><span class="irs-grid-pol small" style="left: 80%"></span><span class="irs-grid-pol" style="left: 100%"></span><span class="irs-grid-text js-grid-text-4" style="left: 100%;"></span></span>');
for (var i = 0; i <= 4; i++) {
$('.js-grid-text-' + i).html( Math.round(shopFilterMaxPrice / 4 * i) ).css({
'margin-left': $('.js-grid-text-' + i).outerWidth() / -2
});
}
function normaliseHint () {
$('.irs-from').html( $("#price_min").val() ).css({
'left': $('.ui-slider-handle').eq(0).position().left,
'margin-left': $('.irs-from').outerWidth() / -2
});
$('.irs-to').html( $("#price_max").val() ).css({
'left': $('.ui-slider-handle').eq(1).position().left,
'margin-left': $('.irs-to').outerWidth() / -2
});
var s = $('.ui-slider-handle').eq(1).position().left - $('.ui-slider-handle').eq(0).position().left;
$('.irs-single').html($("#price_min").val() + ' — ' + $("#price_max").val()).css({
'left': $('.ui-slider-handle').eq(0).position().left + (s / 2),
'margin-left': $('.irs-single').outerWidth() / -2
});
var w = $('.irs-single').outerWidth();
if (w > s) {
$('.irs-from, .irs-to').css({visibility: 'hidden', opacity: 0});
$('.irs-single').css({visibility: 'visible', opacity: 1});
} else {
$('.irs-from, .irs-to').css({visibility: 'visible', opacity: 1});
$('.irs-single').css({visibility: 'hidden', opacity: 0});
}
var w_min = $('.irs-min').outerWidth();
if ($('.irs-from').position().left > w_min) {
$('.irs-min').css({visibility: 'visible', opacity: 1});
} else {
$('.irs-min').css({visibility: 'hidden', opacity: 0});
}
var w_max = $('.irs-min').outerWidth();
if ( $('#price-range-2').width() - $('.irs-to').position().left > w_max) {
$('.irs-max').css({visibility: 'visible', opacity: 1});
} else {
$('.irs-max').css({visibility: 'hidden', opacity: 0});
}
}
$(document).mousemove(function () {
normaliseHint();
setTimeout(normaliseHint, 160);
});
</script>
</ul>
</div>
Спасибо!