TH-155-aura: Format product price in product page based on a unified …

…locale code (#55)

Co-authored-by: Anas <93322743+bj-anas@users.noreply.github.com>

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}`;
+}

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 = `<del> ${compareAtPrice} ${Dotshop.currency} </del>`;
-    })
+      variantComparePrice.innerHTML = `<del>${formattedCompareAtPrice}</del>`;
+    });
   } else {
     variantCompareAtPrices.forEach(variantComparePrice => {
       variantComparePrice.innerHTML = ``;
-    })
+    });
   }
 
   goToCheckoutStep();

themes/aura/sections/product.liquid

@@ -473,4 +473,5 @@
   {% endif %}
 {%- endjavascript -%}
 
+{{ 'money.js' | asset_url | script_tag }}
 {{ 'product.js' | asset_url | script_tag_deferred }}