Skip to main content

module template - price range slider

More
11 years 3 weeks ago #2137 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.

Please Log in to join the conversation.

More
11 years 3 weeks ago - 10 years 9 months ago #2141 by redactie
Slider module for joomla 2.5 version

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.

More
11 years 3 weeks ago - 11 years 3 weeks ago #2142 by redactie
This module requires at least version SVN:1694

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.
The following user(s) said Thank You: niclas, webpilot

Please Log in to join the conversation.

  • Danny
  • Visitor
  • 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.

More
10 years 1 month ago #3196 by sidewind
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.

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
  • 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?
Last edit: 9 years 10 months ago by Danny.

Please Log in to join the conversation.

Time to create page: 0.675 seconds