diff --git a/packages/commercetools/theme/composables/useUiHelpers/index.ts b/packages/commercetools/theme/composables/useUiHelpers/index.ts index ee7bcb5fcc..7706da2414 100644 --- a/packages/commercetools/theme/composables/useUiHelpers/index.ts +++ b/packages/commercetools/theme/composables/useUiHelpers/index.ts @@ -1,6 +1,6 @@ import { getCurrentInstance } from '@vue/composition-api'; import { Category } from '@vue-storefront/commercetools-api'; -import { AgnosticFacet, useVSFContext } from '@vue-storefront/core'; +import { AgnosticFacet } from '@vue-storefront/core'; const nonFilters = ['page', 'sort', 'term', 'itemsPerPage']; @@ -28,7 +28,6 @@ const getFiltersDataFromUrl = (context, onlyFilters) => { const useUiHelpers = () => { const instance = getInstance(); - const context = useVSFContext(); const getFacetsFromURL = () => { const { query, params } = instance.$router.history.current; @@ -85,17 +84,7 @@ const useUiHelpers = () => { const isFacetCheckbox = (): boolean => false; - const formatPrice = (price: number): string => { - if (!price) { - return null; - } - const { locale, currency } = context.$ct.config; - - return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(price); - }; - return { - formatPrice, getFacetsFromURL, getCatLink, changeSorting, diff --git a/packages/commercetools/theme/nuxt.config.js b/packages/commercetools/theme/nuxt.config.js index c9907acd15..dfbbf462ce 100644 --- a/packages/commercetools/theme/nuxt.config.js +++ b/packages/commercetools/theme/nuxt.config.js @@ -141,7 +141,19 @@ export default { seo: true, langDir: 'lang/', vueI18n: { - fallbackLocale: 'en' + fallbackLocale: 'en', + numberFormats: { + en: { + currency: { + style: 'currency', currency: 'USD', currencyDisplay: 'symbol' + } + }, + de: { + currency: { + style: 'currency', currency: 'EUR', currencyDisplay: 'symbol' + } + } + } }, detectBrowserLanguage: { cookieKey: 'vsf-locale' diff --git a/packages/commercetools/theme/pages/Checkout/OrderReview.vue b/packages/commercetools/theme/pages/Checkout/OrderReview.vue index 369b0ae2a7..6c8d96ef4d 100644 --- a/packages/commercetools/theme/pages/Checkout/OrderReview.vue +++ b/packages/commercetools/theme/pages/Checkout/OrderReview.vue @@ -95,8 +95,8 @@ {{ cartGetters.getItemQty(product) }} @@ -107,12 +107,12 @@
diff --git a/packages/core/docs/commercetools/changelog.md b/packages/core/docs/commercetools/changelog.md index 45d4c355c2..8dde957c8b 100644 --- a/packages/core/docs/commercetools/changelog.md +++ b/packages/core/docs/commercetools/changelog.md @@ -5,6 +5,7 @@ - added bottom margin to fix visibility of last footer category ([#5253](https://github.com/DivanteLtd/vue-storefront/issues/5253)) - [BREAKING] refactored names of many factory methods and composable methods, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299)) - [BREAKING] changed signatures of factory methods to always 2 arguments, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299)) +- removed `formatPrice` from `useUiHelpers`, replaced by vue18n `$n` function ([#5339](https://github.com/vuestorefront/vue-storefront/pull/5339)) ## 1.0.1-rc.1 - updated version of core diff --git a/packages/core/docs/contributing/changelog.md b/packages/core/docs/contributing/changelog.md index 953586411e..cf6fb932fb 100644 --- a/packages/core/docs/contributing/changelog.md +++ b/packages/core/docs/contributing/changelog.md @@ -4,6 +4,8 @@ - added bottom margin to fix visibility of last footer category ([#5253](https://github.com/DivanteLtd/vue-storefront/issues/5253)) - [BREAKING] refactored names of many factory methods and composable methods, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299)) - [BREAKING] changed signatures of factory methods to always 2 arguments, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299)) +- removed `formatPrice` from `useUiHelpers`, replaced by vue18n `$n` function ([#5339](https://github.com/vuestorefront/vue-storefront/pull/5339)) + ## 2.1.1-rc.1 - updated version of nuxt composition-api diff --git a/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue b/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue index 54f80d17ae..77c108a143 100644 --- a/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue +++ b/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue @@ -24,8 +24,8 @@ :key="cartGetters.getItemSku(product)" :image="cartGetters.getItemImage(product)" :title="cartGetters.getItemName(product)" - :regular-price="cartGetters.getFormattedPrice(cartGetters.getItemPrice(product).regular)" - :special-price="cartGetters.getFormattedPrice(cartGetters.getItemPrice(product).special)" + :regular-price="$n(cartGetters.getItemPrice(product).regular, 'currency')" + :special-price="cartGetters.getItemPrice(product).special && $n(cartGetters.getItemPrice(product).special, 'currency')" :stock="99999" :qty="cartGetters.getItemQty(product)" @input="updateItemQty({ product, quantity: $event })" @@ -83,7 +83,7 @@ class="sf-property--full-width sf-property--large my-cart__total-price" > diff --git a/packages/core/nuxt-theme-module/theme/components/RelatedProducts.vue b/packages/core/nuxt-theme-module/theme/components/RelatedProducts.vue index 2ebec39ce5..2f71ac226c 100644 --- a/packages/core/nuxt-theme-module/theme/components/RelatedProducts.vue +++ b/packages/core/nuxt-theme-module/theme/components/RelatedProducts.vue @@ -10,8 +10,8 @@ diff --git a/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue b/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue index be4b4601f9..5f9fc9c908 100644 --- a/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue +++ b/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue @@ -26,8 +26,8 @@ :key="wishlistGetters.getItemSku(product)" :image="wishlistGetters.getItemImage(product)" :title="wishlistGetters.getItemName(product)" - :regular-price="wishlistGetters.getFormattedPrice(wishlistGetters.getItemPrice(product).regular)" - :special-price="wishlistGetters.getFormattedPrice(wishlistGetters.getItemPrice(product).special)" + :regular-price="$n(wishlistGetters.getItemPrice(product).regular, 'currency')" + :special-price="wishlistGetters.getItemPrice(product).special && $n(wishlistGetters.getItemPrice(product).special, 'currency')" :stock="99999" image-width="180" image-height="200" @@ -49,7 +49,7 @@ Total price: diff --git a/packages/core/nuxt-theme-module/theme/components/checkout/CartPreview.vue b/packages/core/nuxt-theme-module/theme/components/checkout/CartPreview.vue index 91ee1264c5..9f9af528d2 100644 --- a/packages/core/nuxt-theme-module/theme/components/checkout/CartPreview.vue +++ b/packages/core/nuxt-theme-module/theme/components/checkout/CartPreview.vue @@ -15,29 +15,29 @@ /> diff --git a/packages/core/nuxt-theme-module/theme/composables/useUiHelpers/index.ts b/packages/core/nuxt-theme-module/theme/composables/useUiHelpers/index.ts index 1abcdd9753..3130797222 100644 --- a/packages/core/nuxt-theme-module/theme/composables/useUiHelpers/index.ts +++ b/packages/core/nuxt-theme-module/theme/composables/useUiHelpers/index.ts @@ -52,15 +52,7 @@ const useUiHelpers = () => { return false; }; - // eslint-disable-next-line - const formatPrice = (price: number): string => { - console.warn('[VSF] please implement useUiHelpers.formatPrice.'); - - return '00'; - }; - return { - formatPrice, getFacetsFromURL, getCatLink, changeSorting, diff --git a/packages/core/nuxt-theme-module/theme/pages/Category.vue b/packages/core/nuxt-theme-module/theme/pages/Category.vue index 1cde67445b..5077d784e8 100644 --- a/packages/core/nuxt-theme-module/theme/pages/Category.vue +++ b/packages/core/nuxt-theme-module/theme/pages/Category.vue @@ -148,8 +148,8 @@ :style="{ '--index': i }" :title="productGetters.getName(product)" :image="productGetters.getCoverImage(product)" - :regular-price="productGetters.getFormattedPrice(productGetters.getPrice(product).regular)" - :special-price="productGetters.getFormattedPrice(productGetters.getPrice(product).special)" + :regular-price="$n(productGetters.getPrice(product).regular, 'currency')" + :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')" :max-rating="5" :score-rating="productGetters.getAverageRating(product)" :show-add-to-cart-button="true" @@ -176,8 +176,8 @@ :title="productGetters.getName(product)" :description="productGetters.getDescription(product)" :image="productGetters.getCoverImage(product)" - :regular-price="productGetters.getFormattedPrice(productGetters.getPrice(product).regular)" - :special-price="productGetters.getFormattedPrice(productGetters.getPrice(product).special)" + :regular-price="$n(productGetters.getPrice(product).regular, 'currency')" + :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')" :max-rating="5" :score-rating="3" :is-on-wishlist="false" diff --git a/packages/core/nuxt-theme-module/theme/pages/Checkout/OrderReview.vue b/packages/core/nuxt-theme-module/theme/pages/Checkout/OrderReview.vue index 249ee42655..ed328a355b 100644 --- a/packages/core/nuxt-theme-module/theme/pages/Checkout/OrderReview.vue +++ b/packages/core/nuxt-theme-module/theme/pages/Checkout/OrderReview.vue @@ -98,8 +98,8 @@ {{ cartGetters.getItemQty(product) }} @@ -122,19 +122,19 @@
diff --git a/packages/core/nuxt-theme-module/theme/pages/Checkout/Shipping.vue b/packages/core/nuxt-theme-module/theme/pages/Checkout/Shipping.vue index 59c546baed..5ce27dc167 100644 --- a/packages/core/nuxt-theme-module/theme/pages/Checkout/Shipping.vue +++ b/packages/core/nuxt-theme-module/theme/pages/Checkout/Shipping.vue @@ -108,7 +108,7 @@