Price Format in Blocklayered Module

[derthis]

Hi Everyone,

 

Is there a way to display price in blocklayered module (slider filter) in the default price formatting style (set in BO -> Payment)?

 

Thanks in advance!

[derthis]

Well, I will answer myself, as I found a way to do this.

 

First, you need to create file in override/controllers called CategoryController.php with this content:

 

class CategoryController extends CategoryControllerCore
{
public function setMedia()
{
 parent::setMedia();
 Tools::addCSS(array(
  _PS_CSS_DIR_.'jquery.cluetip.css' => 'all',
  _THEME_CSS_DIR_.'scenes.css' => 'all',
  _THEME_CSS_DIR_.'category.css' => 'all',
  _THEME_CSS_DIR_.'product_list.css' => 'all'));
 if (Configuration::get('PS_COMPARATOR_MAX_ITEM') > 0)
  Tools::addJS(_THEME_JS_DIR_.'products-comparison.js');
  Tools::addJS(_THEME_JS_DIR_.'tools.js');
}
}

The last line is important. It will add Tools.js to your category page. Why? We will use the function called formatCurrency() to format the price according to our specific needs.

 

Next step is to edit modules/blocklayered/blocklayered.js, function initSliders() for the price in the slider to change. We modify it like this:

 

function initSliders()
{
$(sliderList).each(function(i, slider){
					$('#layered_'+slider['type']+'_slider').slider(slider['data']);
 $('#layered_'+slider['type']+'_range').html(formatCurrency(($('#layered_'+slider['type']+'_slider').slider('values', 0)), 2, slider['unit'], true) +
  ' - ' + formatCurrency(($('#layered_'+slider['type']+'_slider').slider('values', 1)), 2, slider['unit'], true));
});
}

You can see we are now using formatCurrency function there.

 

The final step is editing modules/blocklayered/blocklayered.tpl, there, on line 111, starts javascript code for slider manipulation.

 

We modify lines 121-124 accordingly:

 

   slide: function( event, ui ) {
	   stopAjaxQuery();
	   $('#layered_{/literal}{$filter.type}{literal}_range').html(formatCurrency(ui.values[0], 2, '{/literal}{$filter.unit}{literal}', true) + ' - ' + formatCurrency(ui.values[1], 2, '{/literal}{$filter.unit}{literal}', true));
	  },

Compare it to originals. Done in Prestashop 1.4.6.1.

 

We are done. Just be aware of the syntax - formatCurrency(price, format, unit, space) - price is the price in plain number, format is the number of respective format used (look it up in tools.js in your theme js folder), unit is just unit, space is either true or false, if you require space between your price and unit.

 

Enjoy!

 

Result I do attach.

[derthis]

Still, after I put price formatting in place, I wasn't fully satisfied with price display in blocklayered, because in the Czech Republic, there are prices which are relatively higher to US dollar prices, for the $USD is 20 CZK, .. something costing 100USD costs 2000 CZK. I needed a way to adjust price slider to move by hunderts and to have two zeros at the end - that means using rounding.

 

I found two useful functions in tools.js which I've included into category page through controller override in previous post. These functions are ceilf() and floorf(). I investigated how to use them in blocklayered to round prices.

 

Modifying this code in blocklayered.tpl:

 

	<script type="text/javascript">
	{literal}
	 var filterRange = {/literal}{$filter.max}-{$filter.min}{literal};
	 var step = filterRange / 100;
	 var rMax = ceilf(({/literal}{$filter.max}{literal} / 100),0) * 100;
	 var rMin = floorf(({/literal}{$filter.min}{literal} / 100),0) * 100;
	 if (step > 1)
	  step = parseInt(step);
	 addSlider('{/literal}{$filter.type}{literal}',{
	  range: true,
	  step: 100,
	  min: rMin,
	  max: rMax,
	  values: [ {/literal}{$filter.values[0]}{literal}, {/literal}{$filter.values[1]}{literal}],
	  slide: function( event, ui ) {
	   stopAjaxQuery();
	   $('#layered_{/literal}{$filter.type}{literal}_range').html(formatCurrency(ui.values[0], 2, '{/literal}{$filter.unit}{literal}', true) + ' - ' + formatCurrency(ui.values[1], 2, '{/literal}{$filter.unit}{literal}', true));
	  },
	  stop: function () {
	   reloadContent();
	  }
	 }, ' {/literal}{$filter.unit}{literal}');
	{/literal}
	</script>

I used those the two functions, I rounded min and max values by a very simple trick (dividing by 100, then rounding, then multiplying by 100 back) and that meant prices in sliders started appearing in 2400 - 140 000 style. Two zeros at the end, moving by a hundert (the step parameter inside addSlider()).

 

But for correct behaviour, I had to change blocklayered.php (in modules/blocklayered). There is a controller inside loooong filterblock function, on line approx. 2928:

 

 $nFilters = 0;
 if (isset($selectedFilters['price']))
  if ($priceArray['min'] >= $selectedFilters['price'][0] && $priceArray['max'] <= $selectedFilters['price'][1])
unset($selectedFilters['price']);
 if (isset($selectedFilters['weight']))
  if ($weightArray['min'] >= $selectedFilters['weight'][0] && $weightArray['max'] <= $selectedFilters['weight'][1])
unset($selectedFilters['weight']);

I changed "==" to ">=" in first condition and to "<=" in second condition. Why? Because when it was "equal", the system couldn't recognize my rounding up the prices, so it felt like filters were applied when they actually were not.

 

I tested it just for a while, but it seems it works fine. Because floorf() rounds all numbers down and ceilf() rounds all numbers up, all prices fit inside the price range. Numbers just look prettier, don't you think?

[derthis]

I am sorry that I misplaced this topic into a wrong forum section. Could it please be moved to Development? Thank you.

[mouse1]

Hi, derthis. Would you possibly know how to add a space between price and currency? Now I'm getting e.g. 50Kc - 500Kc. I would like to have 50 Kc - 500 Kc, but can't figure out how. :-( Thank you for any help with this small but annoying problem. 

 

UPDATE! 

 

I figured that out myself after reading the posts above. My fault I never read them properly before. :-} My problem was that in /modules/blocklayered/blocklayered.js I had the following code: 

function blocklayeredFormatCurrency(price, currencyFormat, currencySign, currencyBlank)
{
	// if you modified this function, don't forget to modify the PHP function displayPrice (in the Tools.php class)
	blank = '';
	price = parseFloat(price.toFixed(6));
	price = ps_round(price, priceDisplayPrecision);
	if (currencyBlank > 0)
		blank = ' ';

I added a space to get:

blank = ' '; 

Now it works the way I want - I have a space between price and currency. Wohooo ! Thanks again. Jana 

Edited September 21, 2013 by mouse1 (see edit history)

[somits1]

Hello Everyone,

 

I am using Prestashop English v 1.5.6 for my website http://slmobileprice.com , could you please tell me how to configure in v 1.5.6 for price range.

 

Please help me to configure.

 

 

Thanks,

Somit