Number & currency formatting in Product Filter

  • Posts: 6
  • Thank you received: 0
  • Hikashop Business
9 years 1 month ago #217544

-- HikaShop version -- : 2.5.0
-- Joomla version -- : 3.4.3

Hello,

I need to customize the format of numbers as they appear on the labels for each filter, the spacing of the labels and proper

See attached the snapshot of the filter as it appears right now. This is what I need your guidance on:




1) The label for each filter appears too far above from the content box. How can I correct this? via CSS? or PHP? on a particular view?
2a) The currency symbol of the cursor filter labeled "Price Range" is displayed to the right of the number rather than on the left. Hikashop is setup for US Dollar and to use the symbol on the left, but I think the filters are not following the same instruction. How can I move it to the left here in the filters? PHP? CSS? edit a particular view?
2b) the 30,000 is missing the "," comma for US dollar (thousands). How can I format it?
3) The numbers in the cursor filter labeled "Carat Size range" are setup in the filter to be range from 0.40 for minimum and 10.00 for maximum using 2 decimal points. How can I display in the front-end so that it shows the 2 decimal points?

Please also see attached the overall look I am targeting for the product filter:




Please help.

Many Thanks.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 82867
  • Thank you received: 13374
  • MODERATOR
9 years 1 month ago #217597

Hi,

The cursor system that HikaShop integrates with isn't really made to support prices. That's why it doesn't display them with the same formatting as everything else in HikaShop. We had to choose a default formatting for them and we chose the most common.
If you want to change it, you'll have to edit the code:

if(!hkjQuery) window.hkjQuery = window.jQuery;
hkjQuery(document).ready(function(){
	hkjQuery("#slider_'.$filter->filter_namekey.'_'.$divName.'").prop(\'slide\',null).slider({
		'.$cursorEffect.'
		range: true,
		min: '.$cursorMin.',
		max: '.$cursorMax.',
		'.$cursorStep.'
		values: ['.$minVal.', '.$maxVal.'],
		slide: function( event, ui ) {
			hkjQuery( "#filter_'.$filter->filter_namekey.'_'.$divName.'_values" ).val(  ui.values[ 0 ] + " - " + ui.values[ 1 ] );
			hkjQuery( "#filter_'.$filter->filter_namekey.'_'.$divName.'" ).val(1);
			';
		if($currencies[$crurency_id]->currency_locale['p_cs_precedes']){
			$js .= '
			hkjQuery( "#filter_span_'.$filter->filter_namekey.'_'.$divName.'" ).html( "'.$currency.' " + ui.values[ 0 ] + " - '.$currency.' " + ui.values[ 1 ] );
			';
		}else{
			$js .= '
			hkjQuery( "#filter_span_'.$filter->filter_namekey.'_'.$divName.'" ).html(  ui.values[ 0 ] + "'.$currency.' - " + ui.values[ 1 ] + "'.$currency.'" );
			';
		}
		$js .= '
		},
		change: function( event, ui ) {' .
			$onClick .'
		}
	});
	hkjQuery( "#filter_'.$filter->filter_namekey.'_'.$divName.'_values" ).val(  hkjQuery( "#slider_'.$filter->filter_namekey.'_'.$divName.'" ).slider( "values", 0 ) + " - " + hkjQuery( "#slider_'.$filter->filter_namekey.'_'.$divName.'" ).slider( "values", 1 ) );
	';
	if($currencies[$crurency_id]->currency_locale['p_cs_precedes']){
		$js .= '
			hkjQuery( "#filter_span_'.$filter->filter_namekey.'_'.$divName.'" ).html( "'.$currency.' " + hkjQuery( "#slider_'.$filter->filter_namekey.'_'.$divName.'" ).slider( "values", 0 ) + " - '.$currency.' " + hkjQuery( "#slider_'.$filter->filter_namekey.'_'.$divName.'" ).slider( "values", 1 ) );
		';
	}else{
		$js .= '
			hkjQuery( "#filter_span_'.$filter->filter_namekey.'_'.$divName.'" ).html(  hkjQuery( "#slider_'.$filter->filter_namekey.'_'.$divName.'" ).slider( "values", 0 ) + "'.$currency.' - " + hkjQuery( "#slider_'.$filter->filter_namekey.'_'.$divName.'" ).slider( "values", 1 ) + "'.$currency.'" );
		';
	}
	$js .= '
	hkjQuery(\'#dialog_link, ul#icons li\').hover(
		function() { hkjQuery(this).addClass(\'ui-state-hover\'); },
		function() { hkjQuery(this).removeClass(\'ui-state-hover\'); }
	);
});';
of the file administrator/components/com_hikashop/classes/filter.php

Please Log in or Create an account to join the conversation.

  • Posts: 6
  • Thank you received: 0
  • Hikashop Business
9 years 1 month ago #217761

Thank you for your reply.

I applied you code edit and now the currency symbol shows properly on the left of the number. Thanks.

I still need guidance on the remaining issues I asked about.

1) The label for each filter appears too far above from the content box. How can I correct this? via CSS? or PHP? on a particular view?
2b) the 30,000 is missing the "," comma for US dollar (thousands). How can I format it?
3) The numbers in the cursor filter labeled "Carat Size range" are setup in the filter to be range from 0.40 for minimum and 10.00 for maximum using 2 decimal points. How can I display in the front-end so that it shows the 2 decimal points?

Thank you for your help so far!

Please Log in or Create an account to join the conversation.

  • Posts: 82867
  • Thank you received: 13374
  • MODERATOR
9 years 1 month ago #217767

Hi,

1. That can be done with normal CSS. You can add CSS to HikaShop as explained here:
www.hikashop.com/support/support/documen...ize-the-display.html

2b. Well, it's in that same code I gave before. You have the modify the display of the price bondaries with the format you want. But it's not easy as you need to change both the PHP for the default values and the javascript for the dynamic values when the customer use the cursors. As it's not just one or two lines to change and it requires proper development and testing, I can't give you a solution like that. If you're a developer, it shouldn't be too much of a problem though if you read and analyze that code.

3. It's the same as point 2.

Please Log in or Create an account to join the conversation.

Time to create page: 0.071 seconds
Powered by Kunena Forum