vuestorefront · andrzejewsky · Feb 16, 2020 · Feb 5, 2020 · Feb 5, 2020 · Feb 5, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `Intl.NumberFormat()`/`toLocaleString()` via polyfill support in NodeJs - @cewald (#3836, #4040)
 - Added `saveBandwidthOverCache` parameter for skipping caching for products data - @andrzejewsky (#3706)
 - New zoom effect for product gallery images - @Michal-Dziedzinski (#2755)
+- Add custom currency separators and amount of fraction digits - @EndPositive (#3553)
 - Product Page Schema implementation as JSON-LD - @Michal-Dziedzinski (#3704)
 
 ### Fixed

diff --git a/config/default.json b/config/default.json
@@ -485,6 +485,9 @@
     "defaultLocale": "en-US",
     "currencyCode": "USD",
     "currencySign": "$",
+    "currencyDecimal": "",
+    "currencyGroup": "",
+    "fractionDigits": 2,
     "priceFormat": "{sign}{amount}",
     "dateFormat": "HH:mm D/M/YYYY",
     "fullCountryName": "United States",

diff --git a/core/filters/price.js b/core/filters/price.js
@@ -1,14 +1,21 @@
 import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
-const formatValue = (value, locale) => {
-  const price = Math.abs(parseFloat(value))
-  const formatter = new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-  return formatter.format(price)
-}
-
 const applyCurrencySign = (formattedPrice, { currencySign, priceFormat }) => {
   return priceFormat.replace('{sign}', currencySign).replace('{amount}', formattedPrice)
-}
+};
+
+const getLocaleSeparators = (defaultLocale) => {
+  return {
+    decimal: (0.01).toLocaleString(defaultLocale).replace(/[0-9]/g, ''),
+    group: (1000).toLocaleString(defaultLocale).replace(/[0-9]/g, '')
+  }
+};
+
+const replaceSeparators = (formattedPrice, currencySeparators, separators) => {
+  if (currencySeparators.decimal) formattedPrice = formattedPrice.replace(separators.decimal, currencySeparators.decimal);
+  if (currencySeparators.group) formattedPrice = formattedPrice.replace(separators.group, currencySeparators.group);
+  return formattedPrice;
+};
 
 /**
  * Converts number to price string
@@ -23,10 +30,17 @@ export function price (value, storeView) {
     return value;
   }
 
-  const { defaultLocale, currencySign, priceFormat } = _storeView.i18n
+  const { defaultLocale, currencySign, currencyDecimal, currencyGroup, fractionDigits, priceFormat } = _storeView.i18n;
+
+  const options = { minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits };
 
-  const formattedValue = formatValue(value, defaultLocale)
-  const valueWithSign = applyCurrencySign(formattedValue, { currencySign, priceFormat })
+  const localePrice = value.toLocaleString(defaultLocale, options);
+
+  let formattedPrice = localePrice;
+  if (currencyDecimal !== '' || currencyGroup !== '') {
+    formattedPrice = replaceSeparators(localePrice, { decimal: currencyDecimal, group: currencyGroup }, getLocaleSeparators(defaultLocale));
+  }
+  const valueWithSign = applyCurrencySign(formattedPrice, { currencySign, priceFormat });
 
   if (value >= 0) {
     return valueWithSign

diff --git a/core/lib/types.ts b/core/lib/types.ts
@@ -35,6 +35,9 @@ export interface StoreView {
     defaultLocale: string,
     currencyCode: string,
     currencySign: string,
+    currencyDecimal: string,
+    currencyGroup: string,
+    fractionDigits: number,
     priceFormat: string,
     dateFormat: string
   },

diff --git a/docs/guide/cookbook/setup.md b/docs/guide/cookbook/setup.md
diff --git a/docs/guide/upgrade-notes/README.md b/docs/guide/upgrade-notes/README.md
@@ -16,7 +16,6 @@ This new `api-search-query` adapter supports the `response_format` query paramet
 
 The `amp-renderer` module has been disabled by default to save the bundle size; If you'd like to enable it uncomment the module from the `src/modules` and uncomment the `product-amp` and `category-amp` links that are added to the `<head>` section in the `src/themes/default/Product.vue` and `src/themes/default/Category.vue`
 
-
 ## 1.10 -> 1.11
 
 This is the last major release of Vue Storefront 1.x before 2.0 therefore more manual updates are required to keep external packages compatible with 1.x as long as possible.

diff --git a/package.json b/package.json
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,7 +16,6 @@ This new `api-search-query` adapter supports the `response_format` query paramet

		The `amp-renderer` module has been disabled by default to save the bundle size; If you'd like to enable it uncomment the module from the `src/modules` and uncomment the `product-amp` and `category-amp` links that are added to the `<head>` section in the `src/themes/default/Product.vue` and `src/themes/default/Category.vue`


		## 1.10 -> 1.11

		This is the last major release of Vue Storefront 1.x before 2.0 therefore more manual updates are required to keep external packages compatible with 1.x as long as possible.
Expand Down