From 92b3754c4d28cce4dec2910bad2538ce5b614ffa Mon Sep 17 00:00:00 2001 From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com> Date: Tue, 8 Oct 2024 10:09:33 +0100 Subject: [PATCH 1/4] format money --- themes/meraki/assets/money.js | 35 +++++++++++++++++++++++++++ themes/meraki/assets/product.js | 24 +++++++++++++----- themes/meraki/sections/product.liquid | 1 + 3 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 themes/meraki/assets/money.js diff --git a/themes/meraki/assets/money.js b/themes/meraki/assets/money.js new file mode 100644 index 00000000..161b9917 --- /dev/null +++ b/themes/meraki/assets/money.js @@ -0,0 +1,35 @@ +function formatCurrency(amount, currencySymbol, locale = 'en-US', usePercision = false) { + const shouldUsePercision = !(amount % 1 === 0) || usePercision; + + try { + const formatter = new Intl.NumberFormat(locale, { + style: 'currency', + currency: currencySymbol, + minimumFractionDigits: shouldUsePercision ? 2 : 0, + }); + + return formatter.format(amount); + } catch (error) { + // Fallback formatting for when the currency symbol is invalid + const formatter = new Intl.NumberFormat(locale, { + style: 'decimal', + minimumFractionDigits: shouldUsePercision ? 2 : 0, + }); + + const formattedValue = formatter.format(amount); + + const determineSymbolPositionFormatter = new Intl.NumberFormat(locale, { + style: 'currency', + currency: 'USD', + currencyDisplay: 'symbol', + }); + + const parts = determineSymbolPositionFormatter.formatToParts(1); + 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 9df094a6..5c0ab57f 100644 --- a/themes/meraki/assets/product.js +++ b/themes/meraki/assets/product.js @@ -333,18 +333,24 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) { 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 shouldUsePercision = isMulticurrencyActive && usePrecision; + + const formattedPrice = formatCurrency(price, currency, customer_locale, shouldUsePercision); if (productPrices.length === 0) { if (showStickyCheckoutPrice) { - showStickyCheckoutPrice.innerHTML = `${price} ${Dotshop.currency}`; + showStickyCheckoutPrice.innerHTML = formattedPrice; } return; } productPrices.forEach(productPrice => { - const displayValue = `${price} ${Dotshop.currency}`; + const displayValue = formattedPrice; productPrice.innerText = displayValue; @@ -357,13 +363,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 shouldUsePercision = isMulticurrencyActive && usePrecision; + + const formattedCompareAtPrice = formatCurrency(compareAtPrice, currency, customer_locale, shouldUsePercision); + variantCompareAtPrices.forEach(variantComparePrice => { - variantComparePrice.innerHTML = ` ${compareAtPrice} ${Dotshop.currency} `; - }) + variantComparePrice.innerHTML = ` ${formattedCompareAtPrice} `; + }); } else { variantCompareAtPrices.forEach(variantComparePrice => { variantComparePrice.innerHTML = ``; - }) + }); } goToCheckoutStep(); diff --git a/themes/meraki/sections/product.liquid b/themes/meraki/sections/product.liquid index b1bbd63f..713515d5 100644 --- a/themes/meraki/sections/product.liquid +++ b/themes/meraki/sections/product.liquid @@ -450,4 +450,5 @@ {% endif %} {%- endjavascript -%} +{{ 'money.js' | asset_url | script_tag }} {{ 'product.js' | asset_url | script_tag_deferred }} From a0f9d247b72e842071ec5246c28e623ba5c317dd Mon Sep 17 00:00:00 2001 From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com> Date: Tue, 8 Oct 2024 11:26:34 +0100 Subject: [PATCH 2/4] cleanup --- themes/meraki/assets/product.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/meraki/assets/product.js b/themes/meraki/assets/product.js index 5c0ab57f..ad204707 100644 --- a/themes/meraki/assets/product.js +++ b/themes/meraki/assets/product.js @@ -336,7 +336,7 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) { const showStickyCheckoutPrice = document.getElementById('sticky-price'); const { store, currency, customer_locale } = Dotshop; - const { isMulticurrencyActive, usePrecision} = store.multicurrency_settings + const { isMulticurrencyActive, usePrecision} = store.multicurrency_settings; const shouldUsePercision = isMulticurrencyActive && usePrecision; const formattedPrice = formatCurrency(price, currency, customer_locale, shouldUsePercision); @@ -364,7 +364,7 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) { if (compareAtPrice) { const { store, currency, customer_locale } = Dotshop; - const { isMulticurrencyActive, usePrecision} = store.multicurrency_settings + const { isMulticurrencyActive, usePrecision} = store.multicurrency_settings; const shouldUsePercision = isMulticurrencyActive && usePrecision; const formattedCompareAtPrice = formatCurrency(compareAtPrice, currency, customer_locale, shouldUsePercision); From 22245f2b8731203c885d2cea91b59e5daec598f2 Mon Sep 17 00:00:00 2001 From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com> Date: Tue, 8 Oct 2024 11:34:24 +0100 Subject: [PATCH 3/4] fix typo --- themes/meraki/assets/money.js | 8 ++++---- themes/meraki/assets/product.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/themes/meraki/assets/money.js b/themes/meraki/assets/money.js index 161b9917..d53f61ae 100644 --- a/themes/meraki/assets/money.js +++ b/themes/meraki/assets/money.js @@ -1,11 +1,11 @@ -function formatCurrency(amount, currencySymbol, locale = 'en-US', usePercision = false) { - const shouldUsePercision = !(amount % 1 === 0) || usePercision; +function formatCurrency(amount, currencySymbol, locale = 'en-US', usePrecision = false) { + const shouldUsePrecision = !(amount % 1 === 0) || usePrecision; try { const formatter = new Intl.NumberFormat(locale, { style: 'currency', currency: currencySymbol, - minimumFractionDigits: shouldUsePercision ? 2 : 0, + minimumFractionDigits: shouldUsePrecision ? 2 : 0, }); return formatter.format(amount); @@ -13,7 +13,7 @@ function formatCurrency(amount, currencySymbol, locale = 'en-US', usePercision = // Fallback formatting for when the currency symbol is invalid const formatter = new Intl.NumberFormat(locale, { style: 'decimal', - minimumFractionDigits: shouldUsePercision ? 2 : 0, + minimumFractionDigits: shouldUsePrecision ? 2 : 0, }); const formattedValue = formatter.format(amount); diff --git a/themes/meraki/assets/product.js b/themes/meraki/assets/product.js index ad204707..544cd5dd 100644 --- a/themes/meraki/assets/product.js +++ b/themes/meraki/assets/product.js @@ -337,9 +337,9 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) { const { store, currency, customer_locale } = Dotshop; const { isMulticurrencyActive, usePrecision} = store.multicurrency_settings; - const shouldUsePercision = isMulticurrencyActive && usePrecision; + const shouldUsePrecision = isMulticurrencyActive && usePrecision; - const formattedPrice = formatCurrency(price, currency, customer_locale, shouldUsePercision); + const formattedPrice = formatCurrency(price, currency, customer_locale, shouldUsePrecision); if (productPrices.length === 0) { if (showStickyCheckoutPrice) { @@ -365,9 +365,9 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) { if (compareAtPrice) { const { store, currency, customer_locale } = Dotshop; const { isMulticurrencyActive, usePrecision} = store.multicurrency_settings; - const shouldUsePercision = isMulticurrencyActive && usePrecision; + const shouldUsePrecision = isMulticurrencyActive && usePrecision; - const formattedCompareAtPrice = formatCurrency(compareAtPrice, currency, customer_locale, shouldUsePercision); + const formattedCompareAtPrice = formatCurrency(compareAtPrice, currency, customer_locale, shouldUsePrecision); variantCompareAtPrices.forEach(variantComparePrice => { variantComparePrice.innerHTML = ` ${formattedCompareAtPrice} `; From 9f167d58bb4adfd36407388a84ad500ff2b77df6 Mon Sep 17 00:00:00 2001 From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com> Date: Tue, 8 Oct 2024 16:28:52 +0100 Subject: [PATCH 4/4] reduce money code --- themes/meraki/assets/money.js | 43 +++++++++++++---------------------- 1 file changed, 16 insertions(+), 27 deletions(-) diff --git a/themes/meraki/assets/money.js b/themes/meraki/assets/money.js index d53f61ae..bce0d4a6 100644 --- a/themes/meraki/assets/money.js +++ b/themes/meraki/assets/money.js @@ -1,35 +1,24 @@ function formatCurrency(amount, currencySymbol, locale = 'en-US', usePrecision = false) { const shouldUsePrecision = !(amount % 1 === 0) || usePrecision; - try { - const formatter = new Intl.NumberFormat(locale, { - style: 'currency', - currency: currencySymbol, - minimumFractionDigits: shouldUsePrecision ? 2 : 0, - }); - - return formatter.format(amount); - } catch (error) { - // Fallback formatting for when the currency symbol is invalid - const formatter = new Intl.NumberFormat(locale, { - style: 'decimal', - minimumFractionDigits: shouldUsePrecision ? 2 : 0, - }); + const formatter = new Intl.NumberFormat(locale, { + style: 'decimal', + minimumFractionDigits: shouldUsePrecision ? 2 : 0, + }); - const formattedValue = formatter.format(amount); + const formattedValue = formatter.format(amount); - const determineSymbolPositionFormatter = new Intl.NumberFormat(locale, { - style: 'currency', - currency: 'USD', - currencyDisplay: 'symbol', - }); + const determineSymbolPositionFormatter = new Intl.NumberFormat(locale, { + style: 'currency', + currency: 'USD', + currencyDisplay: 'symbol', + }); - const parts = determineSymbolPositionFormatter.formatToParts(1); - const symbolIndex = parts.findIndex(part => part.type === 'currency'); - const isSymbolOnLeft = symbolIndex === 0; + 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}`; - } + return isSymbolOnLeft + ? `${currencySymbol} ${formattedValue}` + : `${formattedValue} ${currencySymbol}`; }