Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The Shopify.formatMoney method extracted from option_selection.js for stand-alone purposes.
var Shopify = Shopify || {};
// ---------------------------------------------------------------------------
// Money format handler
// ---------------------------------------------------------------------------
Shopify.money_format = "${{amount}}";
Shopify.formatMoney = function(cents, format) {
if (typeof cents == 'string') { cents = cents.replace('.',''); }
var value = '';
var placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
var formatString = (format || this.money_format);
function defaultOption(opt, def) {
return (typeof opt == 'undefined' ? def : opt);
}
function formatWithDelimiters(number, precision, thousands, decimal) {
precision = defaultOption(precision, 2);
thousands = defaultOption(thousands, ',');
decimal = defaultOption(decimal, '.');
if (isNaN(number) || number == null) { return 0; }
number = (number/100.0).toFixed(precision);
var parts = number.split('.'),
dollars = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands),
cents = parts[1] ? (decimal + parts[1]) : '';
return dollars + cents;
}
switch(formatString.match(placeholderRegex)[1]) {
case 'amount':
value = formatWithDelimiters(cents, 2);
break;
case 'amount_no_decimals':
value = formatWithDelimiters(cents, 0);
break;
case 'amount_with_comma_separator':
value = formatWithDelimiters(cents, 2, '.', ',');
break;
case 'amount_no_decimals_with_comma_separator':
value = formatWithDelimiters(cents, 0, '.', ',');
break;
}
return formatString.replace(placeholderRegex, value);
};
@dpw1
Copy link

dpw1 commented Mar 31, 2019

Thank you!

@baconck
Copy link

baconck commented Dec 11, 2019

Shopify's docs have 5th type: amount_with_apostrophe_separator

https://help.shopify.com/en/manual/payments/currency-formatting#currency-formatting-options

      case "amount_with_apostrophe_separator":
        value = formatWithDelimiters(cents, 2, "'", ".");
        break;

@maxoys45
Copy link

maxoys45 commented Jan 17, 2020

Does this limit you to just dollars? Is it possible to get this working across multiple different stores with different currencies?

@stewartknapman
Copy link
Author

stewartknapman commented Jan 17, 2020

It doesn’t actually care what the currency is. The first argument is the unformatted amount. The second argument is the format, which could be whatever you need for the currently displayed currency i.e. “£{{ amount }}”. Then pass it a new amount and new format when you change the currency.

@shriDeveloper
Copy link

shriDeveloper commented Mar 22, 2022

Hi , I am using

`
var Shopify = Shopify || {};
Shopify.money_format = "{{ shop.money_format }}";
Shopify.formatMoney = function(cents, format) {
if (typeof cents == 'string') {
cents = cents.replace('.', '');
}
var value = '';
var placeholderRegex = /{{\s*(\w+)\s*}}/;
var formatString = (format || this.money_format);

function defaultOption(opt, def) {
    return (typeof opt == 'undefined' ? def : opt);
}

function formatWithDelimiters(number, precision, thousands, decimal) {
    precision = defaultOption(precision, 2);
    thousands = defaultOption(thousands, ',');
    decimal = defaultOption(decimal, '.');

    if (isNaN(number) || number == null) {
        return 0;
    }

    number = (number / 100.0).toFixed(precision);

    var parts = number.split('.'),
        dollars = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands),
        cents = parts[1] ? (decimal + parts[1]) : '';

    return dollars + cents;
}

switch (formatString.match(placeholderRegex)[1]) {
    case 'amount':
        value = formatWithDelimiters(cents, 2);
        break;
    case 'amount_no_decimals':
        value = formatWithDelimiters(cents, 0);
        break;
    case 'amount_with_comma_separator':
        value = formatWithDelimiters(cents, 2, '.', ',');
        break;
    case 'amount_no_decimals_with_comma_separator':
        value = formatWithDelimiters(cents, 0, '.', ',');
        break;
}

return formatString.replace(placeholderRegex, value);

};`

I am getting an error
Uncaught (in promise) TypeError: Cannot read properties of null (reading '1')

The error is only raised at the first time i.e when someone clicks on a particular product , but error disappears when the same page is refreshed.

Would love some help here.

@SimonMaze
Copy link

SimonMaze commented Mar 28, 2022

@shriDeveloper Make sure the method is not inside a .liquid file or use {% raw %}{{ amount }}{% endraw %} in order to escape the Liquid parsing of {{ amount }} (which parses to an empty string)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment