TH-173-harmony: Harmony > Cart drawer > Format currency based on Dots…

…hop locale (#62)
youcan-shop · Oct 15, 2024 · 7a80e5e · 7a80e5e
1 parent 071687f
commit 7a80e5e
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 39 deletions.
diff --git a/themes/harmony/assets/add-to-cart.js b/themes/harmony/assets/add-to-cart.js
@@ -160,10 +160,12 @@ function cartTemplate(item) {
         </div>
         <div class="left-items">
           <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">
@@ -212,6 +214,18 @@ 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) {
+          const usePrecision = shouldUsePrecision(item.productVariant.compare_at_price);
+          item.productVariant.compare_at_price = formatCurrency(
+            item.productVariant.compare_at_price, 
+            currencyCode,
+            customerLocale,
+          );
+        }
+
         products.innerHTML += cartTemplate(item);
       }
 
@@ -227,13 +241,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>
           <span class="spinner footer-spinner" style="display: none;"></span>
         </div>

diff --git a/themes/harmony/assets/main.js b/themes/harmony/assets/main.js
@@ -1,5 +1,6 @@
 /* ----- Store currency ----- */
 const currencyCode = window.Dotshop.currency;
+const customerLocale = window.Dotshop.customer_locale;
 /* ------------------ */
 /* ----- navbar ----- */
 /* ------------------ */
@@ -301,3 +302,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;
+}
diff --git a/themes/harmony/assets/money.js b/themes/harmony/assets/money.js
diff --git a/themes/harmony/assets/product.js b/themes/harmony/assets/product.js
@@ -334,11 +334,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) {
@@ -362,11 +358,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>`;

diff --git a/themes/harmony/sections/product.liquid b/themes/harmony/sections/product.liquid
@@ -472,5 +472,4 @@
   {% endif %}
 {%- endjavascript -%}
 
-{{ 'money.js' | asset_url | script_tag }}
 {{ 'product.js' | asset_url | script_tag_deferred }}