cancel
Showing results for 
Search instead for 
Did you mean: 

Customizable options dropdown showing comma as decimal separator

SOLVED

Customizable options dropdown showing comma as decimal separator

I have a Magento 2.3.6 website using a custom theme. I have added customizable options to products. In the select dropdown, it shows the additional price with comma as decimal separator. Everywhere else the decimal separator is dot. How to change it to dot.

 

6KzhbXBM.png

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Customizable options dropdown showing comma as decimal separator

@consultant07db  Thanks. My theme was developed by extending Luma theme. So I overridden the price-utils function using mixins. First I created a file named price-util in app/design/frontend/Vendor/theme-name/web/js/price-utils-mixin.js with the content 

 

define(['jquery'], function ($) {
    'use strict';

    return function (targetModule) {
        
        // Overriding or extending existing method
        var originalMethod = targetModule.formatPrice;
        targetModule.formatPrice = function (amount, format, isShowSign) {
            
            var s = '',
            precision, integerRequired, decimalSymbol, groupSymbol, groupLength, pattern, i, pad, j, re, r, am;

        format = _.extend(globalPriceFormat, format);

        // copied from price-option.js | Could be refactored with varien/js.js

        precision = isNaN(format.requiredPrecision = Math.abs(format.requiredPrecision)) ? 2 : format.requiredPrecision;
        integerRequired = isNaN(format.integerRequired = Math.abs(format.integerRequired)) ? 1 : format.integerRequired;
        decimalSymbol = format.decimalSymbol === undefined ? '.' : format.decimalSymbol;
        groupSymbol = format.groupSymbol === undefined ? '.' : format.groupSymbol;
        groupLength = format.groupLength === undefined ? 3 : format.groupLength;
        pattern = format.pattern || '%s';

        if (isShowSign === undefined || isShowSign === true) {
            s = amount < 0 ? '-' : isShowSign ? '+' : '';
        } else if (isShowSign === false) {
            s = '';
        }
        pattern = pattern.indexOf('{sign}') < 0 ? s + pattern : pattern.replace('{sign}', s);

        // we're avoiding the usage of to fixed, and using round instead with the e representation to address
        // numbers like 1.005 = 1.01. Using ToFixed to only provide trailing zeroes in case we have a whole number
        i = parseInt(
                amount = Number(Math.round(Math.abs(+amount || 0) + 'e+' + precision) + ('e-' + precision)),
                10
            ) + '';
        pad = i.length < integerRequired ? integerRequired - i.length : 0;

        i = stringPad('0', pad) + i;

        j = i.length > groupLength ? i.length % groupLength : 0;
        re = new RegExp('(\\d{' + groupLength + '})(?=\\d)', 'g');

        // replace(/-/, 0) is only for fixing Safari bug which appears
        // when Math.abs(0).toFixed() executed on '0' number.
        // Result is '0.-0' :(

        am = Number(Math.round(Math.abs(amount - i) + 'e+' + precision) + ('e-' + precision));
        r = (j ? i.substr(0, j) + groupSymbol : '') +
            i.substr(j).replace(re, '$1' + groupSymbol) +
            (precision ? decimalSymbol + am.toFixed(precision).replace(/-/, 0).slice(2) : '');

        return pattern.replace('%s', r).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        };

        return targetModule;
    };
});

 

The line for the decimal separator is 

 

groupSymbol = format.groupSymbol === undefined ? '.' : format.groupSymbol;

 

Then I created the config file in app/design/frontend/Vendor/theme-name/requirejs-config.js with the content

 

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/price-utils': {
                'Vendor_theme-name/js/price-utils-mixin': true
            }
        }
    }
};

Then I ran the below commands.

 

bin/magento cache:clean
bin/magento cache:flush
bin/magento setup:static-content:deploy

And that solved the issue.

 

View solution in original post

2 REPLIES 2

Re: Customizable options dropdown showing comma as decimal separator

Hi.


1. Custom price-box.js
- Locate the file in the theme that have custom the priceFomat like Magento_Catalog/js/price-box.js
- Look the onUpdatePrice, reloadPrice, or some funtion  same. If it have custom format Price , you need to change to Magento_Catalog/js/price-utils.

2. Custom price-utils
May be Magento_Catalog/js/price-utils have been custom by theme. Look the formatPrice in this file and edit that.
Magento format like this

image.png

Mageplaza | Top-Rated Magento Extension and Solution Provider


Should you have any questions or concerns, feel free to contact us via consultant@mageplaza.com

Re: Customizable options dropdown showing comma as decimal separator

@consultant07db  Thanks. My theme was developed by extending Luma theme. So I overridden the price-utils function using mixins. First I created a file named price-util in app/design/frontend/Vendor/theme-name/web/js/price-utils-mixin.js with the content 

 

define(['jquery'], function ($) {
    'use strict';

    return function (targetModule) {
        
        // Overriding or extending existing method
        var originalMethod = targetModule.formatPrice;
        targetModule.formatPrice = function (amount, format, isShowSign) {
            
            var s = '',
            precision, integerRequired, decimalSymbol, groupSymbol, groupLength, pattern, i, pad, j, re, r, am;

        format = _.extend(globalPriceFormat, format);

        // copied from price-option.js | Could be refactored with varien/js.js

        precision = isNaN(format.requiredPrecision = Math.abs(format.requiredPrecision)) ? 2 : format.requiredPrecision;
        integerRequired = isNaN(format.integerRequired = Math.abs(format.integerRequired)) ? 1 : format.integerRequired;
        decimalSymbol = format.decimalSymbol === undefined ? '.' : format.decimalSymbol;
        groupSymbol = format.groupSymbol === undefined ? '.' : format.groupSymbol;
        groupLength = format.groupLength === undefined ? 3 : format.groupLength;
        pattern = format.pattern || '%s';

        if (isShowSign === undefined || isShowSign === true) {
            s = amount < 0 ? '-' : isShowSign ? '+' : '';
        } else if (isShowSign === false) {
            s = '';
        }
        pattern = pattern.indexOf('{sign}') < 0 ? s + pattern : pattern.replace('{sign}', s);

        // we're avoiding the usage of to fixed, and using round instead with the e representation to address
        // numbers like 1.005 = 1.01. Using ToFixed to only provide trailing zeroes in case we have a whole number
        i = parseInt(
                amount = Number(Math.round(Math.abs(+amount || 0) + 'e+' + precision) + ('e-' + precision)),
                10
            ) + '';
        pad = i.length < integerRequired ? integerRequired - i.length : 0;

        i = stringPad('0', pad) + i;

        j = i.length > groupLength ? i.length % groupLength : 0;
        re = new RegExp('(\\d{' + groupLength + '})(?=\\d)', 'g');

        // replace(/-/, 0) is only for fixing Safari bug which appears
        // when Math.abs(0).toFixed() executed on '0' number.
        // Result is '0.-0' :(

        am = Number(Math.round(Math.abs(amount - i) + 'e+' + precision) + ('e-' + precision));
        r = (j ? i.substr(0, j) + groupSymbol : '') +
            i.substr(j).replace(re, '$1' + groupSymbol) +
            (precision ? decimalSymbol + am.toFixed(precision).replace(/-/, 0).slice(2) : '');

        return pattern.replace('%s', r).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        };

        return targetModule;
    };
});

 

The line for the decimal separator is 

 

groupSymbol = format.groupSymbol === undefined ? '.' : format.groupSymbol;

 

Then I created the config file in app/design/frontend/Vendor/theme-name/requirejs-config.js with the content

 

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/price-utils': {
                'Vendor_theme-name/js/price-utils-mixin': true
            }
        }
    }
};

Then I ran the below commands.

 

bin/magento cache:clean
bin/magento cache:flush
bin/magento setup:static-content:deploy

And that solved the issue.