diff --git a/themes/meraki/assets/money.js b/themes/meraki/assets/money.js new file mode 100644 index 00000000..bce0d4a6 --- /dev/null +++ b/themes/meraki/assets/money.js @@ -0,0 +1,24 @@ +function formatCurrency(amount, currencySymbol, locale = 'en-US', usePrecision = false) { + const shouldUsePrecision = !(amount % 1 === 0) || usePrecision; + + const formatter = new Intl.NumberFormat(locale, { + style: 'decimal', + minimumFractionDigits: shouldUsePrecision ? 2 : 0, + }); + + const formattedValue = formatter.format(amount); + + const determineSymbolPositionFormatter = new Intl.NumberFormat(locale, { + style: 'currency', + currency: 'USD', + currencyDisplay: 'symbol', + }); + + const parts = determineSymbolPositionFormatter.formatToParts(1); // format with 1 USD just to determine the position of the currency symbol + const symbolIndex = parts.findIndex(part => part.type === 'currency'); + const isSymbolOnLeft = symbolIndex === 0; + + return isSymbolOnLeft + ? `${currencySymbol} ${formattedValue}` + : `${formattedValue} ${currencySymbol}`; +} diff --git a/themes/meraki/assets/product.js b/themes/meraki/assets/product.js index 9df094a6..544cd5dd 100644 --- a/themes/meraki/assets/product.js +++ b/themes/meraki/assets/product.js @@ -333,18 +333,24 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) { if (price) { const productPrices = parentSection.querySelectorAll('.product-price'); - const showStickyCheckoutPrice = $('#sticky-price'); + const showStickyCheckoutPrice = document.getElementById('sticky-price'); + + const { store, currency, customer_locale } = Dotshop; + const { isMulticurrencyActive, usePrecision} = store.multicurrency_settings; + const shouldUsePrecision = isMulticurrencyActive && usePrecision; + + const formattedPrice = formatCurrency(price, currency, customer_locale, shouldUsePrecision); if (productPrices.length === 0) { if (showStickyCheckoutPrice) { - showStickyCheckoutPrice.innerHTML = `${price} ${Dotshop.currency}`; + showStickyCheckoutPrice.innerHTML = formattedPrice; } return; } productPrices.forEach(productPrice => { - const displayValue = `${price} ${Dotshop.currency}`; + const displayValue = formattedPrice; productPrice.innerText = displayValue; @@ -357,13 +363,19 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) { const variantCompareAtPrices = parentSection.querySelectorAll('.compare-price'); if (compareAtPrice) { + const { store, currency, customer_locale } = Dotshop; + const { isMulticurrencyActive, usePrecision} = store.multicurrency_settings; + const shouldUsePrecision = isMulticurrencyActive && usePrecision; + + const formattedCompareAtPrice = formatCurrency(compareAtPrice, currency, customer_locale, shouldUsePrecision); + variantCompareAtPrices.forEach(variantComparePrice => { - variantComparePrice.innerHTML = ` ${compareAtPrice} ${Dotshop.currency} `; - }) + variantComparePrice.innerHTML = ` ${formattedCompareAtPrice} `; + }); } else { variantCompareAtPrices.forEach(variantComparePrice => { variantComparePrice.innerHTML = ``; - }) + }); } goToCheckoutStep(); diff --git a/themes/meraki/sections/product.liquid b/themes/meraki/sections/product.liquid index b1bbd63f..713515d5 100644 --- a/themes/meraki/sections/product.liquid +++ b/themes/meraki/sections/product.liquid @@ -450,4 +450,5 @@ {% endif %} {%- endjavascript -%} +{{ 'money.js' | asset_url | script_tag }} {{ 'product.js' | asset_url | script_tag_deferred }}