Customizable options dropdown showing comma as decimal separator

Question

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.

Answer 1

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;
};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.