Backport-pr 3968

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix low-quality images styles - @przspa (#3906)
 - Fix page-not-found redirect in dispatcher - @gibkigonzo (#3956)
 - Fix hiding overlay for newsletter modal - @gibkigonzo (#3970)
+- Fix problem with storeView as dependency in filters - @gibkigonzo (#3968)
 
 
 ## [1.10.5] - 28.11.2019

core/filters/date.js

@@ -12,9 +12,10 @@ once('__VUE_EXTEND_DAYJS_LOCALIZED_FORMAT__', () => {
  * @param {String} date
  * @param {String} format
  */
-export function date (date, format) {
-  const displayFormat = format || currentStoreView().i18n.dateFormat
-  let storeLocale = currentStoreView().i18n.defaultLocale.toLocaleLowerCase()
+export function date (date, format, storeView) {
+  const _storeView = storeView || currentStoreView()
+  const displayFormat = format || _storeView.i18n.dateFormat
+  let storeLocale = _storeView.i18n.defaultLocale.toLocaleLowerCase()
   const separatorIndex = storeLocale.indexOf('-')
   const languageCode = separatorIndex ? storeLocale.substr(0, separatorIndex) : storeLocale
 

core/filters/price.js

@@ -4,24 +4,24 @@ import { currentStoreView } from '@vue-storefront/core/lib/multistore'
  * Converts number to price string
  * @param {Number} value
  */
-export function price (value) {
+export function price (value, storeView) {
   if (isNaN(value)) {
     return value
   }
   let formattedVal = Math.abs(parseFloat(value)).toFixed(2)
-  const storeView = currentStoreView()
-  if (!storeView.i18n) {
+  const _storeView = storeView || currentStoreView();
+  if (!_storeView.i18n) {
     return value;
   }
   const prependCurrency = (price) => {
-    return storeView.i18n.currencySign + price
+    return _storeView.i18n.currencySign + price
   }
 
   const appendCurrency = (price) => {
-    return price + storeView.i18n.currencySign
+    return price + _storeView.i18n.currencySign
   }
 
-  if (storeView.i18n.currencySignPlacement === 'append') {
+  if (_storeView.i18n.currencySignPlacement === 'append') {
     formattedVal = appendCurrency(formattedVal)
   } else {
     formattedVal = prependCurrency(formattedVal)

core/lib/multistore.ts

@@ -8,20 +8,32 @@ import VueRouter, { RouteConfig, RawLocation } from 'vue-router'
 import config from 'config'
 import { LocalizedRoute, StoreView } from './types'
 import storeCodeFromRoute from './storeCodeFromRoute'
+import cloneDeep from 'lodash-es/cloneDeep'
+import get from 'lodash-es/get'
+import { isServer } from '@vue-storefront/core/helpers'
+
+/**
+ * Returns base storeView object that can be created without storeCode
+ */
+function buildBaseStoreView (): StoreView {
+  return cloneDeep({
+    tax: config.tax,
+    i18n: config.i18n,
+    elasticsearch: config.elasticsearch,
+    storeCode: null,
+    storeId: config.defaultStoreCode && config.defaultStoreCode !== '' ? config.storeViews[config.defaultStoreCode].storeId : 1,
+    seo: config.seo
+  })
+}
 
 export function currentStoreView (): StoreView {
-  // TODO: Change to getter all along our code
-  return rootStore.state.storeView
+  const serverStoreView = get(global, 'process.storeView', undefined)
+  const clientStoreView = get(rootStore, 'state.storeView', undefined)
+  return (isServer ? serverStoreView : clientStoreView) || buildBaseStoreView()
 }
 
 export async function prepareStoreView (storeCode: string): Promise<StoreView> {
-  let storeView = { // current, default store
-    tax: Object.assign({}, config.tax),
-    i18n: Object.assign({}, config.i18n),
-    elasticsearch: Object.assign({}, config.elasticsearch),
-    storeCode: '',
-    storeId: config.defaultStoreCode && config.defaultStoreCode !== '' ? config.storeViews[config.defaultStoreCode].storeId : 1
-  }
+  let storeView: StoreView = buildBaseStoreView() // current, default store
   const storeViewHasChanged = !rootStore.state.storeView || rootStore.state.storeView.storeCode !== storeCode
   if (storeCode) { // current store code
     const currentStoreView = config.storeViews[storeCode]
@@ -38,6 +50,11 @@ export async function prepareStoreView (storeCode: string): Promise<StoreView> {
   }
   if (storeViewHasChanged) {
     rootStore.state.storeView = storeView
+
+    if (global && isServer) {
+      (global.process as any).storeView = storeView
+    }
+
     await loadLanguageAsync(storeView.i18n.defaultLocale)
   }
   if (storeViewHasChanged || Vue.prototype.$db.currentStoreCode !== storeCode) {

core/mixins/multistore.js

@@ -10,13 +10,7 @@ export const multistore = {
      * @param {Int} height
      */
     localizedRoute (routeObj) {
-      let storeView
-
-      if (isServer) {
-        storeView = this.$ssrContext.helpers.currentStoreView()
-      } else {
-        storeView = currentStoreView()
-      }
+      const storeView = currentStoreView()
 
       return localizedRouteHelper(routeObj, storeView.storeCode)
     },
@@ -27,13 +21,7 @@ export const multistore = {
      * @param {Int} height
      */
     localizedDispatcherRoute (routeObj) {
-      let storeView
-
-      if (isServer) {
-        storeView = this.$ssrContext.helpers.currentStoreView()
-      } else {
-        storeView = currentStoreView()
-      }
+      const storeView = currentStoreView()
 
       return localizedDispatcherRouteHelper(routeObj, storeView.storeCode)
     }

src/themes/default-amp/components/core/ProductTile.vue

@@ -28,21 +28,21 @@
         class="price-original mr5 lh30 cl-secondary"
         v-if="product.special_price && parseFloat(product.originalPriceInclTax) > 0 && !onlyImage"
       >
-        {{ product.originalPriceInclTax | price }}
+        {{ product.originalPriceInclTax | price(storeView) }}
       </span>
 
       <span
         class="price-special lh30 cl-accent weight-700"
         v-if="product.special_price && parseFloat(product.special_price) > 0 && !onlyImage"
       >
-        {{ product.priceInclTax | price }}
+        {{ product.priceInclTax | price(storeView) }}
       </span>
 
       <span
         class="lh30 cl-secondary"
         v-if="!product.special_price && parseFloat(product.priceInclTax) > 0 && !onlyImage"
       >
-        {{ product.priceInclTax | price }}
+        {{ product.priceInclTax | price(storeView) }}
       </span>
     </router-link>
   </div>
@@ -52,6 +52,7 @@
 import rootStore from '@vue-storefront/core/store'
 import { ProductTile } from '@vue-storefront/core/modules/catalog/components/ProductTile.ts'
 import config from 'config'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   mixins: [ProductTile],
@@ -65,6 +66,11 @@ export default {
       default: false
     }
   },
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  },
   methods: {
     onProductPriceUpdate (product) {
       if (product.sku === this.product.sku) {

src/themes/default-amp/pages/Product.vue

@@ -46,17 +46,17 @@
                   v-if="product.special_price && product.priceInclTax && product.originalPriceInclTax"
                 >
                   <span class="h2 cl-mine-shaft weight-700">
-                    {{ product.priceInclTax * product.qty | price }}
+                    {{ product.priceInclTax * product.qty | price(storeView) }}
                   </span>&nbsp;
                   <span class="price-original h3">
-                    {{ product.originalPriceInclTax * product.qty | price }}
+                    {{ product.originalPriceInclTax * product.qty | price(storeView) }}
                   </span>
                 </div>
                 <div
                   class="h2 cl-mine-shaft weight-700"
                   v-if="!product.special_price && product.priceInclTax"
                 >
-                  {{ product.priceInclTax * product.qty | price }}
+                  {{ product.priceInclTax * product.qty | price(storeView) }}
                 </div>
               </div>
               <div
@@ -138,6 +138,7 @@ import ProductLinks from 'theme/components/core/ProductLinks.vue'
 import ProductCustomOptions from 'theme/components/core/ProductCustomOptions.vue'
 import ProductBundleOptions from 'theme/components/core/ProductBundleOptions.vue'
 import focusClean from 'theme/components/theme/directives/focusClean'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   components: {
@@ -154,6 +155,11 @@ export default {
     }
   },
   directives: { focusClean },
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  },
   methods: {
     showDetails (event) {
       this.detailsOpen = true

src/themes/default/components/core/ProductLinks.vue

@@ -8,11 +8,11 @@
           </p>
           <div class="col-xs-4 cl-bg-tertiary">
             <div v-if="productLink.product.special_price && productLink.product.priceInclTax && productLink.product.originalPriceInclTax">
-              <span class="price-special">{{ productLink.product.priceInclTax | price }}</span>&nbsp;
-              <span class="price-original">{{ productLink.product.originalPriceInclTax | price }}</span>
+              <span class="price-special">{{ productLink.product.priceInclTax | price(storeView) }}</span>&nbsp;
+              <span class="price-original">{{ productLink.product.originalPriceInclTax | price(storeView) }}</span>
             </div>
             <div v-if="!productLink.product.special_price && productLink.product.priceInclTax">
-              {{ productLink.product.priceInclTax | price }}
+              {{ productLink.product.priceInclTax | price(storeView) }}
             </div>
           </div>
         </div>
@@ -35,12 +35,18 @@
 </template>
 
 <script>
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 export default {
   props: {
     products: {
       type: Array,
       required: true
     }
+  },
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
   }
 }
 </script>

src/themes/default/components/core/ProductTile.vue

@@ -28,21 +28,21 @@
         class="price-original mr5 lh30 cl-secondary"
         v-if="product.special_price && parseFloat(product.originalPriceInclTax) > 0 && !onlyImage"
       >
-        {{ product.originalPriceInclTax | price }}
+        {{ product.originalPriceInclTax | price(storeView) }}
       </span>
 
       <span
         class="price-special lh30 cl-accent weight-700"
         v-if="product.special_price && parseFloat(product.special_price) > 0 && !onlyImage"
       >
-        {{ product.priceInclTax | price }}
+        {{ product.priceInclTax | price(storeView) }}
       </span>
 
       <span
         class="lh30 cl-secondary"
         v-if="!product.special_price && parseFloat(product.priceInclTax) > 0 && !onlyImage"
       >
-        {{ product.priceInclTax | price }}
+        {{ product.priceInclTax | price(storeView) }}
       </span>
     </router-link>
   </div>
@@ -53,6 +53,7 @@ import rootStore from '@vue-storefront/core/store'
 import { ProductTile } from '@vue-storefront/core/modules/catalog/components/ProductTile.ts'
 import config from 'config'
 import ProductImage from './ProductImage'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   mixins: [ProductTile],
@@ -75,6 +76,9 @@ export default {
         src: this.thumbnail,
         loading: this.thumbnail
       }
+    },
+    storeView () {
+      return currentStoreView()
     }
   },
   methods: {

src/themes/default/components/core/blocks/Checkout/CartSummary.vue

@@ -11,7 +11,7 @@
             {{ segment.title }}
           </div>
           <div v-if="segment.value != null" class="col-xs align-right cl-accent h4">
-            {{ segment.value | price }}
+            {{ segment.value | price(storeView) }}
           </div>
         </div>
 
@@ -20,7 +20,7 @@
             {{ segment.title }}
           </div>
           <div class="col-xs align-right">
-            {{ segment.value | price }}
+            {{ segment.value | price(storeView) }}
           </div>
         </div>
       </div>
@@ -53,13 +53,19 @@
 
 <script>
 import { CartSummary } from '@vue-storefront/core/modules/checkout/components/CartSummary'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 import Product from './Product'
 
 export default {
   components: {
     Product
   },
-  mixins: [CartSummary]
+  mixins: [CartSummary],
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  }
 }
 </script>
 

src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue

@@ -34,13 +34,13 @@
                 </span>
               </td>
               <td class="fs-medium lh25" :data-th="$t('Price')">
-                {{ product.priceInclTax | price }}
+                {{ product.priceInclTax | price(storeView) }}
               </td>
               <td class="fs-medium lh25 align-right" :data-th="$t('Qty')">
                 {{ product.qty }}
               </td>
               <td class="fs-medium lh25" :data-th="$t('Subtotal')">
-                {{ product.priceInclTax * product.qty | price }}
+                {{ product.priceInclTax * product.qty | price(storeView) }}
               </td>
             </tr>
           </tbody>
@@ -65,6 +65,7 @@ import { ConfirmOrders } from '@vue-storefront/core/modules/offline-order/compon
 import { CancelOrders } from '@vue-storefront/core/modules/offline-order/components/CancelOrders'
 import Modal from 'theme/components/core/Modal'
 import ButtonFull from 'theme/components/theme/ButtonFull.vue'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   props: {
@@ -79,6 +80,11 @@ export default {
       this.$bus.$emit('modal-show', 'modal-order-confirmation')
     })
   },
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  },
   methods: {
     confirmOrders () {
       ConfirmOrders.methods.confirmOrders.call(this)