TH-173-meraki: Meraki > Cart drawer > Format currency based on Dotshop locale

themes/meraki/assets/add-to-cart.js

@@ -105,10 +105,12 @@ function cartTemplate(item) {
           ${CART_DRAWER_TRANSLATION.quantityVariant}:${item.quantity}  ${variationsCheck}
           </div>
           <div class="product-price">
-            <span class="compare-price">${item.productVariant.compare_at_price ? `${item.productVariant.compare_at_price} ${currencyCode}` : ''}</span>
+            ${
+              item.productVariant.compare_at_price ? 
+              `<span class="compare-price">${item.productVariant.compare_at_price}</span>` : ''
+            }
             <div class="currency-wrapper">
               <span class="price">${item.productVariant.price}</span>
-              <span class="currency-code">${currencyCode}</span>
             </div>
           </div>
           <button class="remove-item-btn" aria-label="remove item">
@@ -150,6 +152,17 @@ async function updateCartDrawer() {
       const products = document.createElement('ul');
 
       for (const item of cartData.items) {
+        item.price = formatCurrency(item.price, currencyCode, customerLocale);
+        item.productVariant.price = formatCurrency(item.productVariant.price, currencyCode, customerLocale);
+
+        if (item.productVariant.compare_at_price) {
+          item.productVariant.compare_at_price = formatCurrency(
+            item.productVariant.compare_at_price, 
+            currencyCode,
+            customerLocale,
+          );
+        }
+
         products.innerHTML += cartTemplate(item);
       }
 
@@ -165,13 +178,14 @@ async function updateCartDrawer() {
       cartDrawerContent.appendChild(p);
     }
 
+    cartData.sub_total = formatCurrency(cartData.sub_total, currencyCode, customerLocale);
+
     const footerContainerHTML = `
         <div class="footer">
           <div class="price-wrapper">
             <span class="total-price">${CART_DRAWER_TRANSLATION.totalAmount}</span>
             <div class="currency-wrapper">
-              <span class="currency-value">${cartData.sub_total.toFixed(2)}</span>
-              <span class="currency-code">${currencyCode}</span>
+              <span class="currency-value">${cartData.sub_total}</span>
             </div>
           </div>
           <a href='${location.origin}/cart' class="yc-btn">${CART_DRAWER_TRANSLATION.checkoutPayment}</a>

themes/meraki/assets/main.js

@@ -1,5 +1,6 @@
 /* ----- Store currency ----- */
 const currencyCode = window.Dotshop.currency;
+const customerLocale = window.Dotshop.customer_locale;
 /* ------------------ */
 /* ----- navbar ----- */
 /* ------------------ */
@@ -330,3 +331,47 @@ if (FORM.errors) {
   let decodedText = decodeHtmlEntities(FORM.errors);
   notify(renderTextContent(decodedText), 'error', 20000);
 }
+
+/**
+ * Formats a given amount into a currency string.
+ *
+ * @param {number} amount - The numerical value to be formatted.
+ * @param {string} currencySymbol - The symbol of the currency (e.g., $, €, £, USD, EUR, etc).
+ * @param {string} [locale='en-US'] - Optional. The locale string to format the currency (e.g., 'en-US', 'fr-FR').
+ * @param {boolean} [usePrecision=false] - Optional. Whether to include decimal precision.
+ * @returns {string} - The formatted currency string.
+ */
+function formatCurrency(amount, currencySymbol, locale = 'en-US') {
+  const usePrecision = shouldUsePrecision(amount);
+  const formatter = new Intl.NumberFormat(locale, {
+    style: 'decimal',
+    maximumFractionDigits: usePrecision ? 2 : 0,
+    roundingMode: 'floor'
+  });
+
+  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');
+
+  return symbolIndex === 0
+    ? `${currencySymbol} ${formattedValue}`
+    : `${formattedValue} ${currencySymbol}`;
+}
+
+function shouldUsePrecision(amount) {
+  const { multicurrency_settings } = Dotshop.store;
+  const { isMulticurrencyActive, usePrecision } = multicurrency_settings;
+
+  if (!isMulticurrencyActive) {
+    return !Number.isInteger(amount);
+  }
+
+  return isMulticurrencyActive && usePrecision;
+}

themes/meraki/assets/product.js

@@ -335,11 +335,7 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) {
     const productPrices = parentSection.querySelectorAll('.product-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);
+    const formattedPrice = formatCurrency(price, currencyCode, customerLocale);
 
     if (productPrices.length === 0) {
       if (showStickyCheckoutPrice) {
@@ -363,11 +359,7 @@ 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);
+    const formattedCompareAtPrice = formatCurrency(compareAtPrice, currencyCode, customerLocale);
 
     variantCompareAtPrices.forEach(variantComparePrice => {
       variantComparePrice.innerHTML = `<del> ${formattedCompareAtPrice} </del>`;

themes/meraki/sections/product.liquid

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