magentomagento2magento-2.3

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.

enter image description here


Solution

  • 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.