Allow custom currency formats

[themreza]

What is the motivation for adding / enhancing this feature?

Different countries have varying currency formats -- specifically the characters used to indicate the thousandth and decimal figures. Whereas in the U.S. the price of a product would be $123,456.768, in a European country such as Hungary it would look like 123.456,768 Ft.

What are the acceptance criteria

• Add an option in the config, in addition to the currency sign, to allow for formatting the numeric value of the currency.
• Preferably, use a node module that adheres to ISO 4217, so that simply by choosing the currency code it will automatically format the currency value (or use https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat).

Can you complete this feature request by yourself?

• YES
• NO

Which Release Cycle state this refers to? Info for developer.

Pick one option.

• This is a normal feature request. This should be available on https://test.storefrontcloud.io and then after tests this can be added to next Vue Storefront version. In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• (Pick this option only if you're sure) This is an important improvement request for current Release Candidate version on https://next.storefrontcloud.io and should be placed in next RC version. In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• (Pick this option only if you're sure) This is a critical improvement request for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version. In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Additional information

[pkarw]

Please do check if this option fixes this issue for you: https://github.com/DivanteLtd/vue-storefront/blob/31093fa951b7e76b0003a69350b3c1f84e12ddcb/config/default.json#L445

[themreza]

@pkarw Yes this option is helpful and we're using it at the moment.
In addition, it would be nice to have the option of formatting the currency value itself as well.

We're currently modifying core/filters/price.js like so:

let moneyFormatter = new Intl.NumberFormat();
let formattedVal = moneyFormatter.format(value).replace(/,/g, '.')

But we don't want to change the core files to stay up to date with the latest versions.

Perhaps via feeding the currency into something like https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat and then having a config field to set the format.

[pkarw]

@filrak how would you approach this issue?

[juho-jaakkola]

I have the same issue. So far I have two ideas:

A) Add new configuration entries:

• storeViews.<storeCode>.i18n.currencyDecimalSeparator
• storeViews.<storeCode>.i18n.currencyThousandsSeparator

So for example this:

{
  "storeViews": {
    "de": {
      "i18n": {
        "currencySign": "EUR",
        "currencySignPlacement": "append",
        "currencyDecimalSeparator": ","
        "currencyThousandsSeparator": "."
      }
}

Would result in:

1.000.000,00€

B) Some kind of a shorthand:

"currencyFormat": "n.nnn,nn€"

This is perhaps more intuitive.

[juho-jaakkola]

After looking a bit deeper into the subject, it is probably best the use something like Intl.NumberFormat that @themreza mentioned. World has probably hundreds of different ways to display currencies. No need to reinvent the wheel when a solution already exist.

[juho-jaakkola]

C) Allow projects to override/extend price rendering

Instead of trying to solve the problem for all possible languages and use cases, simply add a hook/mixing so every project can do whatever they want with the price before it is displayed.

D) Use an existing library

For example

• http://openexchangerates.github.io/accounting.js/
• http://numeraljs.com/
• https://numbrojs.com
• https://currency.js.org
• https://formatjs.io

[andrzejewsky]

Hey, We've have introduced something like this right now: https://github.com/DivanteLtd/vue-storefront/blob/develop/config/default.json#L455 so far, so you can decide where you want to place the sign and value (it'll be available in 1.11), but still you cannot do anything with the value.

Introducing format that depends on the selected language/locale is a quite good solution and also I like the idea with hook. I think we can do something like: by default, you have format just depends on the locale/lang, but if you want to customise it, there will be a hook to do that - what do you think @juho-jaakkola @themreza ?

[themreza]

@andrzejewsky I believe having a config option is far easier than changing the theme via mixins for most of the users.

[juho-jaakkola]

@andrzejewsky It was already possible to define the currency placement using the currencySignPlacement setting that takes the value append or prepend. So this new priceFormat setting doesn't really introduce any new functionality. (But I assume the current implementation is simply the first step in introducing more control to the currency format?)

I agree that best solution would be to have both a config option and a hook. The hook would give maximum flexibility in case the setting is not enough for some special use case.

[Zyles]

Should add option to support how many decimal points you want.

Countries with prices like 100,00 usually do not display ",00", instead they show "100". This is an annoying problem with default Magento. Would be nice to not have it on vue storefront too.

The precision is only needed in checkout calculating taxes.