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 @@
{{ label }}
-
${{ checkoutGetters.getShippingMethodPrice(item) }}
+
${{ $n(checkoutGetters.getShippingMethodPrice(item), 'currency') }}
diff --git a/packages/core/nuxt-theme-module/theme/pages/Home.vue b/packages/core/nuxt-theme-module/theme/pages/Home.vue
index ecb6789677..5ddb787b74 100644
--- a/packages/core/nuxt-theme-module/theme/pages/Home.vue
+++ b/packages/core/nuxt-theme-module/theme/pages/Home.vue
@@ -39,7 +39,7 @@
data-cy="home-url_product"
:title="product.title"
:image="product.image"
- :regular-price="product.price.regular"
+ :regular-price="$n(product.price.regular, 'currency')"
:max-rating="product.rating.max"
:score-rating="product.rating.score"
:show-add-to-cart-button="true"
diff --git a/packages/core/nuxt-theme-module/theme/pages/MyAccount/OrderHistory.vue b/packages/core/nuxt-theme-module/theme/pages/MyAccount/OrderHistory.vue
index ee6797fe0d..0a992d95ae 100644
--- a/packages/core/nuxt-theme-module/theme/pages/MyAccount/OrderHistory.vue
+++ b/packages/core/nuxt-theme-module/theme/pages/MyAccount/OrderHistory.vue
@@ -21,7 +21,7 @@
/>
@@ -34,7 +34,7 @@
{{orderGetters.getItemName(item)}}
{{orderGetters.getItemQty(item)}}
- {{formatPrice(orderGetters.getItemPrice(item))}}
+ {{$n(orderGetters.getItemPrice(item), 'currency')}}
@@ -67,7 +67,7 @@
{{ orderGetters.getId(order) }}
{{ orderGetters.getDate(order) }}
- {{ formatPrice(orderGetters.getPrice(order)) }}
+ {{ $n(orderGetters.getPrice(order), 'currency') }}
{{ orderGetters.getStatus(order) }}
@@ -99,7 +99,6 @@ import {
} from '@storefront-ui/vue';
import { computed, ref } from '@vue/composition-api';
import { useUserOrders, orderGetters } from '<%= options.generate.replace.composables %>';
-import { useUiHelpers } from '~/composables';
import { AgnosticOrderStatus } from '@vue-storefront/core';
import { onSSR } from '@vue-storefront/core';
@@ -114,7 +113,6 @@ export default {
},
setup() {
const { orders, search } = useUserOrders();
- const { formatPrice } = useUiHelpers();
const currentOrder = ref(null);
onSSR(async () => {
@@ -167,8 +165,7 @@ export default {
orderGetters,
downloadOrder,
downloadOrders,
- currentOrder,
- formatPrice
+ currentOrder
};
}
};
diff --git a/packages/core/nuxt-theme-module/theme/pages/Product.vue b/packages/core/nuxt-theme-module/theme/pages/Product.vue
index e4ac2befaa..020b448ebc 100644
--- a/packages/core/nuxt-theme-module/theme/pages/Product.vue
+++ b/packages/core/nuxt-theme-module/theme/pages/Product.vue
@@ -22,8 +22,8 @@