How to dynamically change currency format for product price via JavaScript in Magento stores?

In this blog, we’ll tell you the coding procedure to format product price according to local price (i.e the procedure to change currency) format while a price is updated due to change in quantities by users.

Why?

In some case, while changing the quantity, a product’s total price should also be updated immediately. While updating the price we should format it according to local price format (currency format) before displaying.

Magento Price & Quantity

Here we go

In magento we have a file named called js.js in “js/varien/” directory. In this file we have a function “formatCurrency”, which is meant for formating the price in magento store by javascript.

Function in js => formatCurrency(price, format, showPlus)

It has 3 parameters.

1. Price – (price to be converted integer/decimal).
2. Format – (JSON contains pattern/decimal etc according to Locale) will be like [JSON (pattern, decimal, decimalsDelimeter, groupsDelimeter)]
3. ShowPlus – true (always show ‘+’or ‘-’),false (never show ‘-’ even if number is negative) -or- null (show ‘-’ if number is negative)

The code provided below will help to get JS price format(having pattern/decimal etc) in Magento.

      Mage::app()->getLocale()->getJsPriceFormat();



And we can write the code given below in Block file to return the price format as JSON to .phtml.

   public function getCurrentPriceFormat(){
        /* Return the current price format as JSON */
        return Mage::helper('core')->jsonEncode(
                Mage::app()->getLocale()->getJsPriceFormat() );
   }


In .phtml file initialize variable with the value from getCurrentPriceFormat ().

   	<script>
   	    /* Save the returned JSON in variable to use it further */
	    var currentPriceFormat = <?php echo $this->getCurrentPriceFormat();?>
	</script>

Now we are very close towards getting the price format.

	<script>
	    /* Calculate the price may be price with quantity */
	    var newPrice =  parseFloat( price ) * parseFloat( quantity );
	    /* Save the price format returned by formatCurrency to use */
	    var priceToDisplay = formatCurrency( price, currentPriceFormat );
	    /* replace formatted price in priceArea HTML element */
	    document.getElementById( 'priceArea' ).innerHTML = priceToDisplay;
	</script>

That’s all, the desired result will be placed in priceArea HTML element.

Follow these instructions for changing price format using JavaScript. Hope the codes helped.

Do write to us in case of queries or any other ideas for the same in the comment section below. We’ll be glad to read your suggestions.

Realated Posts

One thought on “How to dynamically change currency format for product price via JavaScript in Magento stores?

  1. Tushar soni

    Nice Blog!

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">