How to Set Price Format using JavaScript in Magento 2

Hello Magento Friends,

Today I am going to explain How to Set Price Format using JavaScript in Magento 2.

At the time of Magento 2 development, you may need to pass the price amount to js and display the currency from the js. At that time you can change the price format using JavaScript in Magento 2. You can convert plain number into price format with currency symbol using JavaScript in Magento 2.

Steps to Set Price Format using JavaScript in Magento 2:

Step 1: You need to use the below Magento file

Magento_Catalog\js\price-utils

If you have already created a javascript file then just add the getFormattedPrice() function and define the Magento_Catalog\js\price-utils file into js.

File Path – app\code\Vendor\Extension\view\frontend\web\js\checkpriceformate.js

define([
    'ko',
    'Magento_Catalog/js/price-utils'
], function (
    ko,
    priceUtils
) {
    'use strict';

    return {

        getFormattedPrice: function (price)
        {
            var priceFormat = {
                decimalSymbol: '.',
                groupLength: 3,
                groupSymbol: ",",
                integerRequired: false,
                pattern: "$%s",
                precision: 2,
                requiredPrecision: 2
            };

            return priceUtils.formatPrice(price, priceFormat);
        }
    }
});

Step 2: After that call getFormattedPrice() function where you want and it returns the price as per the below format.

Price Formate : $12.00

Step 3: After adding this code run the below commands

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Conclusion:

Accordingly, you can set the price format with the help of JavaScript in Magento 2. You may also like to read – Get Formatted Price with Currency using Block File in Magento 2

In case of any issues, you can reach out to me via the comment box. Share the article on your social media platforms and stay updated with us!

Happy Coding!