diff --git a/themes/aura/assets/money.js b/themes/aura/assets/money.js
new file mode 100644
index 00000000..bce0d4a6
--- /dev/null
+++ b/themes/aura/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/aura/assets/product.js b/themes/aura/assets/product.js
index b1302bc0..6159a500 100644
--- a/themes/aura/assets/product.js
+++ b/themes/aura/assets/product.js
@@ -326,26 +326,29 @@ function getSelectedVariant(parentSection) {
function updateProductDetails(parentSection, image, price, compareAtPrice) {
if (image) {
const mainImgs = parentSection.querySelectorAll('.main-image');
-
- mainImgs.forEach(mainImg => mainImg.src = image)
+ mainImgs.forEach(mainImg => mainImg.src = image);
}
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}`;
-
- productPrice.innerText = displayValue;
+ productPrice.innerText = formattedPrice;
if (showStickyCheckoutPrice) {
showStickyCheckoutPrice.innerHTML = productPrice.innerHTML;
@@ -356,13 +359,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/aura/sections/product.liquid b/themes/aura/sections/product.liquid
index 5497ad43..ff7a885a 100644
--- a/themes/aura/sections/product.liquid
+++ b/themes/aura/sections/product.liquid
@@ -473,4 +473,5 @@
{% endif %}
{%- endjavascript -%}
+{{ 'money.js' | asset_url | script_tag }}
{{ 'product.js' | asset_url | script_tag_deferred }}