- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
Solved! Go to Solution.
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
Mageplaza | Top-Rated Magento Extension and Solution Provider
Should you have any questions or concerns, feel free to contact us via consultant@mageplaza.com
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@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.