Роман.
Идем читать документацию, например http://jqueryui.com/slider/#range . Смотрим как все устроено.
В диафане уже есть почти все необходимые файлы поэтому копировать их не следует, все что нам необходимо сделать:
1) Открываем shop.view.show_search.php (или предварительно создав шаблон свой) и находим там участок кода отвечающий за вывод цены (99 строка по умолчанию) и меняем
if (!empty($result["price"]))
{
echo '<div class="shop_search_price">
<span class="infofield">'.$this->diafan->_('Цена').':</span>
'.$this->diafan->_('от').' <input type="text" name="pr1" size="5" value="'.$result["price"]["value1"].'" class="inpnum"> '
. $this->diafan->_('до').' <input type="text" name="pr2" size="5" value="'.$result["price"]["value2"].'" class="inpnum">
</div>';
}
на
if (!empty($result["price"]))
{
echo '<div class="formCost">
<label for="minCost">
<span class="infofield">' . $this->diafan->_('Цена') . ':</span>
' . $this->diafan->_('от') . '
</label>
<input type="text" name="pr1" size="5" id="minCost" value="0" value="' . $result["price"]["value1"] . '" class="inpnum">
<label for="maxCost"> '. $this->diafan->_('до') . '</label>
<input type="text" name="pr2" id="maxCost" value="12000" size="5" value="' . $result["price"]["value2"] . '" class="inpnum"></div>
<div class="sliderCont">
<div id="slider"></div>
</div><br>
';
}
2) Далее открываем файл шаблона (по умолчанию shop.php) и вставляем перед </head> скрипт от slider ui
<script type="text/javascript">jQuery(document).ready(function(){
/* слайдер цен */
jQuery("#slider").slider({
min: 0,
max: 12000,
values: [0,12000],
step: 100,
animate: 1,
range: true,
stop: function(event, ui) {
jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
jQuery("input#maxCost").val(jQuery("#slider").slider("values",1));
},
slide: function(event, ui){
jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
jQuery("input#maxCost").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 > 12000) { value2 = 12000; jQuery("input#maxCost").val(12000)}
if(parseInt(value1) > parseInt(value2)){
value2 = value1;
jQuery("input#maxCost").val(value2);
}
jQuery("#slider").slider("values",1,value2);
});});</script>
Этот скрипт можно вынести и в отдельный файл.
Естественно в шаблоне должен быть шаблонный тег вывода поиска <insert name="show_search" module="shop">
На рисунке 1 видно что получилось: слайдер работает, осталось только покрасить ленту - по умолчанию она белая и ее не видно. Открываем jquery-ui-1.8.18.custom.css и находим .ui-widget-header (65 строка по умоланию) - там меняем цвет на свой + оформление .ui-slider (блок начиная с 402 строки). То есть оформляем уже как нам надо. Впринципе все.
Замечу, что я описал простой способ, когда минимальные и максимальные значения слайдера задаются вручную (в скрипте 0 и 12000). Все действия проводил на чистой системе, параллельно данному описанию, чтобы постараться дать работающий код.
Автоматический вывод мин и макс значения по цене - это уже отдельная тема.