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 }}