Ползунок цены для модуля фильтра Joomshopping

В стандартном фильтре товаров в компоненте интернет магазина Joomshopping сортировка по цене происходит путем вписывания ценовых диапазонов в два поля - input. Во многих фильтрах эти поля заменены простым ползунком, при перемещении которого значения цен в полях изменяется.

Прочитав интересную статью тут решил прикрутить этот ползунок к стандартному фильтру.

Итоговая картинка как это выглядит у меня (демо пока нет):

Шаг 1.

Создаем в папке шаблона папку модуля фильтра (это в случае когда все модификация хранятся в самом шаблоне)

Акутуально для Joomla 2.5 + JoomShopping 3.11.

Структура папок будет такой вот: site/templates/name_tmpl/html/mod_jshopping_filters/default.php

Открываем этот файлик и дописываем в месте, в котором нужен вывод цены (старый вывод можно пока закоментировать до поры до времени):

<?php if ($show_prices){?>
<span class="filter_price"><?php print JText::_('PRICE')?>:<br/>
<span class="box_price_from"><?php print JText::_('FROM')?>
<input type = "text" class = "inputbox" name = "fprice_from" id="fprice_from" size="7" value="<?php if ($fprice_from>0) print $fprice_from?>" />
</span>
<span class="box_price_to"><?php print JText::_('TO')?>
<input type = "text" class = "inputbox" name = "fprice_to" id="fprice_to" size="7" value="<?php if ($fprice_to>0) print $fprice_to?>" />
</span>
<?php print $jshopConfig->currency_code?>
</span>
<div id="slider"></div>
<?php }?>

Далее, привязываем стили к этому слайдеру (выбирайте для себя какие вам по душе):

/* Ширина слайдера */
#slider {
width: 200px;
margin: 15px 0;
}

/* Контейнер слайдера */
.ui-slider {
position: relative;
}

/* Ползунок */
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 20px; /* Задаем нужную ширину */
height: 20px; /* и высоту */
background: url(../images/row2.png) no-repeat;
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: 5px; /* задаем высоту согласно дизайна */
}

/* позиционируем ползунки */
.ui-slider-horizontal .ui-slider-handle {
top: -10px;
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 #D4D4D4;
background: #fff;
}

/* оформление активного участка (между двумя ползунками) */
.ui-widget-header {
border: 1px solid #D4D4D4;
background: #26C00C;
}

/* скругление для полосы слайдера */
.ui-corner-all {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

 

И в самый конец добавляем вызов js скрипта, который всем этим добром управляет: 

<script type="text/javascript">

jQuery(document).ready(function() {
var val1=jQuery("input#fprice_from").val();
var val2=jQuery("input#fprice_to").val();
jQuery("#slider").slider({
min: 0,
max: 20000,
values:[val1,val2],
range: true,
stop: function(event, ui) {
jQuery("input#fprice_from").val(jQuery("#slider").slider("values",0));
jQuery("input#fprice_to").val(jQuery("#slider").slider("values",1));
document.jshop_filters.submit();
},
slide: function(event, ui){
jQuery("input#fprice_from").val(jQuery("#slider").slider("values",0));
jQuery("input#fprice_to").val(jQuery("#slider").slider("values",1));
}
});

jQuery("input#fprice_from").change(function(){
var value1=jQuery("input#fprice_from").val();
var value2=jQuery("input#fprice_to").val();

if(parseInt(value1) > parseInt(value2)){
value1 = value2;
jQuery("input#fprice_from").val(value1);
}
jQuery("#slider").slider("values",0,value1);
});

jQuery("input#fprice_to").change(function(){
var value1=jQuery("input#fprice_from").val();
var value2=jQuery("input#fprice_to").val();
if (value2 > 1000) { value2 = 1000; jQuery("input#fprice_to").val(1000)}
if(parseInt(value1) > parseInt(value2)){
value2 = value1;
jQuery("input#fprice_to").val(value2);
}
jQuery("#slider").slider("values",1,value2);
});
});
</script>

 Кроме этого не забываем подключить сам jQuery и JQuery UI (отмечаем галочкой Slider и всё что необходимо для его работы будет отмечено автоматически).

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery-ui-1.8.24.custom.min.js"></script>
comments powered by Disqus
info@webinmd.com
+373 69 82 88 12
panicaz
Напишите нам