From 9ccc2429ca472ef5ef96c0ba6d88fb07019a1d06 Mon Sep 17 00:00:00 2001 From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:27:47 +0100 Subject: [PATCH 1/6] refactor formatCurrency function --- themes/meraki/assets/main.js | 43 +++++++++++++++++++++++++++ themes/meraki/assets/money.js | 24 --------------- themes/meraki/assets/product.js | 12 ++------ themes/meraki/sections/product.liquid | 1 - 4 files changed, 45 insertions(+), 35 deletions(-) delete mode 100644 themes/meraki/assets/money.js diff --git a/themes/meraki/assets/main.js b/themes/meraki/assets/main.js index 374dcd0b..af7c3de2 100644 --- a/themes/meraki/assets/main.js +++ b/themes/meraki/assets/main.js @@ -1,5 +1,7 @@ /* ----- Store currency ----- */ const currencyCode = window.Dotshop.currency; +const customerLocale = window.Dotshop.customer_locale; +const usePrecision = shouldUsePrecision(); /* ------------------ */ /* ----- navbar ----- */ /* ------------------ */ @@ -330,3 +332,44 @@ 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', 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}`; +} + +function shouldUsePrecision() { + const { multicurrency_settings } = Dotshop.store; + const { isMulticurrencyActive, usePrecision } = multicurrency_settings; + + return isMulticurrencyActive && usePrecision; +} diff --git a/themes/meraki/assets/money.js b/themes/meraki/assets/money.js deleted file mode 100644 index bce0d4a6..00000000 --- a/themes/meraki/assets/money.js +++ /dev/null @@ -1,24 +0,0 @@ -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 544cd5dd..28979d3a 100644 --- a/themes/meraki/assets/product.js +++ b/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, usePrecision); 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, usePrecision); variantCompareAtPrices.forEach(variantComparePrice => { variantComparePrice.innerHTML = ` ${formattedCompareAtPrice} `; diff --git a/themes/meraki/sections/product.liquid b/themes/meraki/sections/product.liquid index 713515d5..b1bbd63f 100644 --- a/themes/meraki/sections/product.liquid +++ b/themes/meraki/sections/product.liquid @@ -450,5 +450,4 @@ {% endif %} {%- endjavascript -%} -{{ 'money.js' | asset_url | script_tag }} {{ 'product.js' | asset_url | script_tag_deferred }} From 0c5811f0fc69644a1cdfd81d059c91db7e98d5f6 Mon Sep 17 00:00:00 2001 From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:35:37 +0100 Subject: [PATCH 2/6] use formatCurrency in cart drawer --- themes/meraki/assets/add-to-cart.js | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/themes/meraki/assets/add-to-cart.js b/themes/meraki/assets/add-to-cart.js index a1a12dd1..4e01f4ee 100644 --- a/themes/meraki/assets/add-to-cart.js +++ b/themes/meraki/assets/add-to-cart.js @@ -105,10 +105,12 @@ function cartTemplate(item) { ${CART_DRAWER_TRANSLATION.quantityVariant}:${item.quantity}  ${variationsCheck}
- ${item.productVariant.compare_at_price ? `${item.productVariant.compare_at_price} ${currencyCode}` : ''} + ${ + item.productVariant.compare_at_price ? + `${item.productVariant.compare_at_price}` : '' + }
${item.productVariant.price} - ${currencyCode}