// Blocklayered: Slider could be change with two inputs or a list of values

2011-12-01 09:16:10 +00:00
parent d019c03bb9
commit 59cbc01d4e
5 changed files with 132 additions and 58 deletions
--- a/modules/blocklayered/blocklayered.css
+++ b/modules/blocklayered/blocklayered.css
@@ -111,4 +111,10 @@
 #layered_form input[type=radio] {
 	margin-left: 2px;
 	vertical-align: middle;
+}
+.layered_price_range {
+	margin-left: 7px;
+}
+.layered_price_range_unit {
+	margin-right: 7px;
 }
--- a/modules/blocklayered/blocklayered.js
+++ b/modules/blocklayered/blocklayered.js
@@ -45,9 +45,30 @@ $(document).ready(function()
 	});
 	
 	// Click on checkbox
-	$('#layered_form input, #layered_form select').live('change', function()
+	$('#layered_form input, #layered_form select').live('keyup', function()
 	{
-		reloadContent();
+		if ($(this).attr('timeout_id'))
+			window.clearTimeout($(this).attr('timeout_id'));
+		
+		$(this).attr('timeout_id', window.setTimeout(function(it) {
+			var filter = $(it).attr('id').replace(/^layered_(.+)_range_.*$/, '$1');
+			
+			var value_min = parseInt($('#layered_'+filter+'_range_min').val()); 
+			if (isNaN(value_min)) 
+				value_min = 0;
+			$('#layered_'+filter+'_range_min').val(value_min);
+
+			var value_max = parseInt($('#layered_'+filter+'_range_max').val());
+			if (isNaN(value_max)) 
+				value_max = 0;
+			$('#layered_'+filter+'_range_max').val(value_max);
+			
+			if (value_max < value_min) {
+				$('#layered_'+filter+'_range_max').val($(it).val());
+				$('#layered_'+filter+'_range_min').val($(it).val());
+			}
+			reloadContent();
+		}, 500, this));
 	});

 	$('.radio').live('click', function() {
@@ -138,27 +159,6 @@ function initLayered()
 	}
 }

-function  getValueSelected(){
-	
-	var checkboxChecked = '';
-	$('#layered_form input:checkbox:checked').each(function(){
-		checkboxChecked += '#' + $(this).attr('id')+'='+$(this).val();
-	});
-	$('#layered_form input:hidden').each(function(){
-		checkboxChecked += '#' + $(this).attr('name')+'='+$(this).val();
-	});
-	$(['price','weight']).each(function(i, filter) {
-		if ($('#layered_'+filter+'_slider').length)
-		{
-			if (typeof($('#layered_'+filter+'_slider').slider('values', 0)) != 'object')
-			{
-				checkboxChecked += '#'+filter+'='+$('#layered_'+filter+'_slider').slider('values', 0)+'_'+$('#layered_'+filter+'_slider').slider('values', 1);
-			}
-		}
-	});
-	return checkboxChecked;
-}
-
 function paginationButton() {
 	$('#pagination a').not(':hidden').each(function () {
 		if ($(this).attr('href').search('&p=') == -1) {
@@ -196,9 +196,17 @@ function cancelFilter()
 	{
 		if ($(this).attr('rel').search(/_slider$/) > 0)
 		{
-			$('#'+$(this).attr('rel')).slider('values' , 0, $('#'+$(this).attr('rel')).slider('option' , 'min' ));
-			$('#'+$(this).attr('rel')).slider('values' , 1, $('#'+$(this).attr('rel')).slider('option' , 'max' ));
-			$('#'+$(this).attr('rel')).slider('option', 'slide')(0,{values:[$('#'+$(this).attr('rel')).slider( 'option' , 'min' ), $('#'+$(this).attr('rel')).slider( 'option' , 'max' )]});
+			if ($('#'+$(this).attr('rel')).lenght)
+			{
+				$('#'+$(this).attr('rel')).slider('values' , 0, $('#'+$(this).attr('rel')).slider('option' , 'min' ));
+				$('#'+$(this).attr('rel')).slider('values' , 1, $('#'+$(this).attr('rel')).slider('option' , 'max' ));
+				$('#'+$(this).attr('rel')).slider('option', 'slide')(0,{values:[$('#'+$(this).attr('rel')).slider( 'option' , 'min' ), $('#'+$(this).attr('rel')).slider( 'option' , 'max' )]});
+			}
+			else if($('#'+$(this).attr('rel').replace(/_slider$/, '_range_min')).length)
+			{
+				$('#'+$(this).attr('rel').replace(/_slider$/, '_range_min')).val($('#'+$(this).attr('rel').replace(/_slider$/, '_range_min')).attr('limitValue'));
+				$('#'+$(this).attr('rel').replace(/_slider$/, '_range_max')).val($('#'+$(this).attr('rel').replace(/_slider$/, '_range_max')).attr('limitValue'));
+			}
 		}
 		else
 		{
@@ -249,6 +257,14 @@ function reloadContent(params_plus)
 		if (typeof(sliderStart) == 'number' && typeof(sliderStop) == 'number')
 			data += '&'+$(this).attr('id')+'='+sliderStart+'_'+sliderStop;
 	});
+
+	$(['price', 'weight']).each(function(it, sliderType)
+	{
+		if ($('#layered_'+sliderType+'_range_min').length)
+		{
+			data += '&layered_'+sliderType+'_slider='+$('#layered_'+sliderType+'_range_min').val()+'_'+$('#layered_'+sliderType+'_range_max').val();
+		}
+	});
 	
 	$('#layered_form .select option:checked').each( function () {
 		data += '&'+$(this).attr('id') + '=' + $(this).val();
@@ -283,7 +299,8 @@ function reloadContent(params_plus)
 		success: function(result)
 		{
 			$('#layered_block_left').after('<div id="tmp_layered_block_left"></div>').remove();
-			$('#tmp_layered_block_left').html(result.filtersBlock).attr('id', 'layered_block_left');
+			if (result.filtersBlock)
+				$('#tmp_layered_block_left').html(result.filtersBlock).attr('id', 'layered_block_left');
 			
 			$('.category-product-count').html(result.categoryCount);

@@ -320,13 +337,19 @@ function reloadContent(params_plus)
 			// Get all sliders value
 			$(['price', 'weight']).each(function(it, sliderType)
 			{
-				if ($('#layered_'+sliderType+'_slider'))
+				if ($('#layered_'+sliderType+'_slider').length)
 				{
 					// Check if slider is enable & if slider is used
 					if(typeof($('#layered_'+sliderType+'_slider').slider('values', 0)) != 'object')
+					{
 						if ($('#layered_'+sliderType+'_slider').slider('values', 0) != $('#layered_'+sliderType+'_slider').slider('option' , 'min')
 						|| $('#layered_'+sliderType+'_slider').slider('values', 1) != $('#layered_'+sliderType+'_slider').slider('option' , 'max'))
 							current_friendly_url += '/'+sliderType+'-'+$('#layered_'+sliderType+'_slider').slider('values', 0)+'-'+$('#layered_'+sliderType+'_slider').slider('values', 1)
+					}
+				}
+				else if ($('#layered_'+sliderType+'_range_min').length)
+				{
+					current_friendly_url += '/'+sliderType+'-'+$('#layered_'+sliderType+'_range_min').val()+'-'+$('#layered_'+sliderType+'_range_max').val();
 				}
 			});
 			if (current_friendly_url == '#')
--- a/modules/blocklayered/blocklayered.php
+++ b/modules/blocklayered/blocklayered.php
@@ -2361,6 +2361,20 @@ class BlockLayered extends Module
 						
 					if ($priceArray['max'] != $priceArray['min'] && $priceArray['min'] != null)
 					{
+						if ($filter['filter_type'] == 2)
+						{
+							$priceArray['list_of_values'] = array();
+							$nbr_of_value = $filter['filter_show_limit'];
+							if ($nbr_of_value < 2)
+								$nbr_of_value = 4;
+							$delta = ($priceArray['max'] - $priceArray['min']) / $nbr_of_value;
+							$current_step = $priceArray['min'];
+							for ($i = 0; $i < $nbr_of_value; $i++)
+								$priceArray['list_of_values'][] = array(
+									(int)($priceArray['min'] + $i * $delta),
+									(int)($priceArray['min'] + ($i + 1) * $delta)
+								);
+						}
 						if (isset($selectedFilters['price']) && isset($selectedFilters['price'][0])
 						&& isset($selectedFilters['price'][1]))
 						{
--- a/modules/blocklayered/blocklayered.tpl
+++ b/modules/blocklayered/blocklayered.tpl
@@ -131,35 +131,64 @@ param_product_url = '';
 								</select>
 							{/if}
 						{else}
-							<label for="{$filter.type}">{l s='Range:' mod='blocklayered'}</label> <span id="layered_{$filter.type}_range"></span>
-							<div style="margin: 6px 0 6px 6px; width: 93%;">
-								<div style="margin-top:5px;" class="layered_slider" id="layered_{$filter.type}_slider"></div>
-							</div>
-							<script type="text/javascript">
-							{literal}
-								var filterRange = {/literal}{$filter.max}-{$filter.min}{literal};
-								var step = filterRange / 100;
-								if (step > 1)
-									step = parseInt(step);
-								addSlider('{/literal}{$filter.type}{literal}',{
-									range: true,
-									step: step,
-									min: {/literal}{$filter.min}{literal},
-									max: {/literal}{$filter.max}{literal},
-									values: [ {/literal}{$filter.values[0]}{literal}, {/literal}{$filter.values[1]}{literal}],
-									slide: function( event, ui ) {
-										$('#layered_{/literal}{$filter.type}{literal}_range').html(ui.values[ 0 ] + '{/literal}{$filter.unit}{literal}' + ' - ' + ui.values[ 1 ] + '{/literal}{$filter.unit}{literal}');
-									},
-									stop: function () {
-										reloadContent();
-									}
-								}, '{/literal}{$filter.unit}{literal}');
-								$(document).ready(function()
-								{
-									$('.layered_{/literal}{$filter.type}{literal}').show();
-								});
-							{/literal}
-							</script>
+							{if $filter.filter_type == 0}
+								<label for="{$filter.type}">{l s='Range:' mod='blocklayered'}</label> <span id="layered_{$filter.type}_range"></span>
+								<div style="margin: 6px 0 6px 6px; width: 93%;">
+									<div style="margin-top:5px;" class="layered_slider" id="layered_{$filter.type}_slider"></div>
+								</div>
+								<script type="text/javascript">
+								{literal}
+									var filterRange = {/literal}{$filter.max}-{$filter.min}{literal};
+									var step = filterRange / 100;
+									if (step > 1)
+										step = parseInt(step);
+									addSlider('{/literal}{$filter.type}{literal}',{
+										range: true,
+										step: step,
+										min: {/literal}{$filter.min}{literal},
+										max: {/literal}{$filter.max}{literal},
+										values: [ {/literal}{$filter.values[0]}{literal}, {/literal}{$filter.values[1]}{literal}],
+										slide: function( event, ui ) {
+											$('#layered_{/literal}{$filter.type}{literal}_range').html(ui.values[ 0 ] + '{/literal}{$filter.unit}{literal}' + ' - ' + ui.values[ 1 ] + '{/literal}{$filter.unit}{literal}');
+										},
+										stop: function () {
+											reloadContent();
+										}
+									}, '{/literal}{$filter.unit}{literal}');
+								{/literal}
+								</script>
+							{else if $filter.filter_type == 1}
+								<li>
+									{l s='From' mod='blocklayered'} <input class="layered_{$filter.type}_range" id="layered_{$filter.type}_range_min" type="text" value="{$filter.values[0]}" style="width:30px;"/>
+									<span class="layered_price_range_unit">{$filter.unit}</span>
+									{l s='to' mod='blocklayered'} <input class="layered_{$filter.type}_range" id="layered_{$filter.type}_range_max" type="text" value="{$filter.values[1]}" style="width:40px;"/>
+									<span class="layered_price_range_unit">{$filter.unit}</span>
+									<script type="text/javascript">
+									{literal}
+										$('#layered_{/literal}{$filter.type}{literal}_range_min').attr('limitValue', {/literal}{$filter.min}{literal});
+										$('#layered_{/literal}{$filter.type}{literal}_range_max').attr('limitValue', {/literal}{$filter.max}{literal});
+									{/literal}
+									</script>
+								</li>
+							{else}
+								{foreach $filter.list_of_values as $values}
+									<li onclick="$('#layered_{$filter.type}_range_min').val({$values[0]});$('#layered_{$filter.type}_range_max').val({$values[1]});reloadContent();" style="{if $filter.values[1] == $values[1] && $filter.values[0] == $values[0]}font-weight: bold;{/if}">
+										- {l s='From' mod='blocklayered'} {$values[0]} {$filter.unit} {l s='to' mod='blocklayered'} {$values[1]} {$filter.unit}
+									</li>
+								{/foreach}
+								<li style="display: none;">
+									<input class="layered_{$filter.type}_range" id="layered_{$filter.type}_range_min" type="hidden" value="{$filter.values[0]}" style="width:30px;"/>
+									<input class="layered_{$filter.type}_range" id="layered_{$filter.type}_range_max" type="hidden" value="{$filter.values[1]}" style="width:40px;"/>
+								</li>
+							{/if}
+								<script type="text/javascript">
+								{literal}
+									$(document).ready(function()
+									{
+										$('.layered_{/literal}{$filter.type}{literal}').show();
+									});
+								{/literal}
+								</script>
 						{/if}
 						</ul>
 						{if count($filter.values) > $filter.filter_show_limit && $filter.filter_show_limit > 0 && $filter.filter_type != 2}
--- a/modules/blocklayered/fr.php
+++ b/modules/blocklayered/fr.php
@@ -110,7 +110,7 @@ $_MODULE['<{blocklayered}prestashop>blocklayered_02ecc2cbb645a2b859deba6907334cc
 $_MODULE['<{blocklayered}prestashop>blocklayered_cc72ed9534a489b5d2e5882735bf1364'] = 'Filtre poids du produit (slider)';
 $_MODULE['<{blocklayered}prestashop>blocklayered_2d9b9a764fb0be4be10e1b2fce63f561'] = 'Slider';
 $_MODULE['<{blocklayered}prestashop>blocklayered_7e650380ef2b9cec2f2a96e6266ca93d'] = 'Zones de saisies';
-$_MODULE['<{blocklayered}prestashop>blocklayered_010359888c6e811caee8e540221f0a21'] = 'Listes de valeurs';
+$_MODULE['<{blocklayered}prestashop>blocklayered_010359888c6e811caee8e540221f0a21'] = 'Liste de valeurs';
 $_MODULE['<{blocklayered}prestashop>blocklayered_0649bb392812f99ff6b0e2ba160675fa'] = 'Filtre prix du produit (slider)';
 $_MODULE['<{blocklayered}prestashop>blocklayered_d73c57be7aad115d20508215e8ea9951'] = 'Groupe d\'attributs :';
 $_MODULE['<{blocklayered}prestashop>blocklayered_736b91750e516139acc13c5eb6564f92'] = 'attributs';
@@ -124,5 +124,7 @@ $_MODULE['<{blocklayered}prestashop>blocklayered_1262d1b9fbffb3a8e85ac9e4b449e98
 $_MODULE['<{blocklayered}prestashop>blocklayered_ea4788705e6873b424c65e91c2846b19'] = 'Annuler';
 $_MODULE['<{blocklayered}prestashop>blocklayered_853ae90f0351324bd73ea615e6487517'] = ' :';
 $_MODULE['<{blocklayered}prestashop>blocklayered_75954a3c6f2ea54cb9dff249b6b5e8e6'] = 'Tranche';
+$_MODULE['<{blocklayered}prestashop>blocklayered_5da618e8e4b89c66fe86e32cdafde142'] = 'De';
+$_MODULE['<{blocklayered}prestashop>blocklayered_01b6e20344b68835c5ed1ddedf20d531'] = 'à';
 $_MODULE['<{blocklayered}prestashop>blocklayered_146ffe2fd9fa5bec3b63b52543793ec7'] = 'Voir plus';
 $_MODULE['<{blocklayered}prestashop>blocklayered_c74ea6dbff701bfa23819583c52ebd97'] = 'Voir moins';