- Posts: 11
- Thank you received: 0
module template - price range slider
11 years 3 weeks ago #2137
by niclas
module template - price range slider was created by niclas
Hi
Is there any one who has build an module template with a range slider for prices?
Like this one: jqueryui.com/slider/#range
Thanks in advance.
Is there any one who has build an module template with a range slider for prices?
Like this one: jqueryui.com/slider/#range
Thanks in advance.
Please Log in to join the conversation.
11 years 3 weeks ago - 10 years 9 months ago #2141
by redactie
Replied by redactie on topic Price range slider for joomla 2.5
Slider module for joomla 2.5 version
jQuery may conflict with mootools on your site. good luck : I will not dig into those issues
jQuery may conflict with mootools on your site. good luck : I will not dig into those issues
Code:
<?php
#modules/mod_datamenu/tmpl/slider_custom.php
$dataitems=modDatamenuHelper::getMinMax($params);
$min=floor($dataitems[0]['min']);
$max=ceil($dataitems[0]['max']);
$url=$params->get( 'baselink', '' );
if ( $min >= $max ) { return; }
for ($v=1;$v<=9;$v++) {
$x=$params->get("q$v",'');
if ($x) { $url .="&q$v=".urlencode($x); }
}
$x=$params->get("q",'');
if ($x) { $url .="&q=".urlencode($x); }
$url .='&format=raw&ajax=1&tmpl=component';
//Ugly way to include css/javascript in joomla
//feel free to add it to your template or use script declaration
?>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery( "#slider-range" ).slider({
range: true,
min: <?php echo $min;?>,
max: <?php echo $max;?>,
values: [ <?php echo $min;?>,<?php echo $max;?> ],
slide: function( event, ui ) {
jQuery( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
stop: function( event, ui ) {
url='<?php echo $url?>'+'&q10='+ui.values[ 0 ]+'&q11='+ui.values[ 1 ];
jQuery.get(url, function(data) {
if( data) {
jQuery('#com_datafeeds').html(data);
} else {
jQuery('#com_datafeeds').html('Nothing found in this price range');
}
});
}
});
jQuery( "#amount" ).val( "$" + jQuery( "#slider-range" ).slider( "values", 0 ) +
" - $" + jQuery( "#slider-range" ).slider( "values", 1 ) );
});
</script>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
<div id="slider-range"></div>
Last edit: 10 years 9 months ago by redactie.
The following user(s) said Thank You: webpilot
Please Log in to join the conversation.
11 years 3 weeks ago - 11 years 3 weeks ago #2142
by redactie
Replied by redactie on topic Price range slider for joomla 3.0
This module requires at least version SVN:1694
Demo online.bloemen-laten-bezorgen.nl/
modules/mod_datamenu/tmpl/slider_custom.php
Demo online.bloemen-laten-bezorgen.nl/
modules/mod_datamenu/tmpl/slider_custom.php
Code:
<?php
$dataitems=modDatamenuHelper::getMinMax($params);
$min=floor($dataitems[0]['min']);
$max=ceil($dataitems[0]['max']);
$url=$params->get( 'baselink', '' );
if ( $min >= $max ) { return; }
for ($v=1;$v<=9;$v++) {
$x=$params->get("q$v",'');
if ($x) { $url .="&q$v=".urlencode($x); }
}
$x=$params->get("q",'');
if ($x) { $url .="&q=".urlencode($x); }
$url .='&format=raw&ajax=1&tmpl=component';
?>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery( "#slider-range" ).slider({
range: true,
min: <?php echo $min;?>,
max: <?php echo $max;?>,
values: [ <?php echo $min;?>,<?php echo $max;?> ],
slide: function( event, ui ) {
jQuery( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
stop: function( event, ui ) {
url='<?php echo $url?>'+'&min='+ui.values[ 0 ]+'&max='+ui.values[ 1 ];
jQuery.get(url, function(data) {
if( data) {
jQuery('#com_datafeeds').html(data);
} else {
jQuery('#com_datafeeds').html('Nothing found in this price range');
}
});
}
});
jQuery( "#amount" ).val( "$" + jQuery( "#slider-range" ).slider( "values", 0 ) +
" - $" + jQuery( "#slider-range" ).slider( "values", 1 ) );
});
</script>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
<div id="slider-range"></div>
Last edit: 11 years 3 weeks ago by redactie.
Please Log in to join the conversation.
- Danny
- Visitor
10 years 6 months ago #2792
by Danny
Replied by Danny on topic Re: Price range slider for joomla 2.5
Iemand een idee waarom hij wel naar het minimum bedrag kijkt maar niks met de maximale waarde doet?
Please Log in to join the conversation.
10 years 1 month ago #3196
by sidewind
Joomla versie: 2.5.28 & 3.4.3
Datafeed component versie: 2.5.2038 & 3.1.2072
www.kledingstunts.nl
www.bestelsuperdeals.nl
test shop: test.superdeals-online.nl
Replied by sidewind on topic Price range slider for joomla 3.0
Bram,
Can you please help with the issue that i can only select a price one time.
The slider dissapeares when i slide it one time.
It also doesn't work well with the page navigation and the menu module.
I can't figure it out.
Thx in advance,
Sander.
Can you please help with the issue that i can only select a price one time.
The slider dissapeares when i slide it one time.
It also doesn't work well with the page navigation and the menu module.
I can't figure it out.
Thx in advance,
Sander.
Joomla versie: 2.5.28 & 3.4.3
Datafeed component versie: 2.5.2038 & 3.1.2072
www.kledingstunts.nl
www.bestelsuperdeals.nl
test shop: test.superdeals-online.nl
Please Log in to join the conversation.
- Danny
- Visitor
9 years 10 months ago - 9 years 10 months ago #3286
by Danny
Replied by Danny on topic Price range slider for joomla 3.0
Hello Sander have you solved this problem?
I also have this on my website.
Any ideas?
I also have this on my website.
Any ideas?
Last edit: 9 years 10 months ago by Danny.
Please Log in to join the conversation.
Time to create page: 0.675 seconds