Merge pull request #410 from gibkigonzo/bugfix/update-1.12

Apply changes from vuestorefront/vsf-default#4

CHANGELOG.md

@@ -5,14 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.1] - UNRELEASED
+## [1.0.2] - UNRELEASED
 
 ### Added
 ### Changed / Improved
 
 - Update sfui version to 0.7.11
 - Changed the banner links to correct path (#379)
 - Improved the background of MegaMenu (#401)
+- use product/findProducts instead of product/list
+  use category-next/fetchMenuCategories instead of category/list
+  fix problem with changing product color - should be changed product image
+  fix close sidebar when push esc button
+  add cacheTags to pages
+  remove Home page mixin - (#410)
 
 ## [1.0.1] - 2020.06.02
 

components/molecules/m-login.vue

@@ -75,7 +75,7 @@ export default {
     }),
     switchElem (to) {
       this.$v.$reset();
-      this.openModal({name: ModalList.Auth, payload: to})
+      this.openModal({ name: ModalList.Auth, payload: to })
     },
     login () {
       this.$v.$touch();
@@ -103,7 +103,7 @@ export default {
             this.onFailure(result);
           } else {
             this.onSuccess(i18n.t('You are logged in!'));
-            this.closeModal({name: ModalList.Auth});
+            this.closeModal({ name: ModalList.Auth });
           }
         })
         .catch(err => {

components/molecules/m-menu.vue

@@ -66,7 +66,7 @@ export default {
       isWebpSupported: state => state.ui.isWebpSupported
     }),
     ...mapGetters({
-      getCategories: 'category/getCategories',
+      getCategories: 'category-next/getMenuCategories',
       getCurrentCategory: 'category/getCurrentCategory',
       getPromotedOffers: 'promoted/getPromotedOffers'
     }),

components/molecules/m-product-gallery.vue

@@ -53,14 +53,14 @@ export default {
             selectThis = false
           }
         }
-        return selectThis || (image.id && image.id.color === this.configuration.color.id)
+        return selectThis || (image.id && image.id.color && String(image.id.color) === String(this.configuration.color.id))
       })
 
       if (!variantImage) {
         variantImage = this.gallery.find(image => {
           return typeof image.id.color !== 'undefined' &&
             typeof this.configuration.color !== 'undefined' &&
-            image.id.color === this.configuration.color.id
+            String(image.id.color) === String(this.configuration.color.id)
         })
       }
 

components/molecules/m-register.vue

@@ -78,7 +78,7 @@ export default {
     }),
     switchElem (to) {
       this.$v.$reset();
-      this.openModal({name: ModalList.Auth, payload: to})
+      this.openModal({ name: ModalList.Auth, payload: to })
     },
     register () {
       this.$v.$touch();
@@ -111,7 +111,7 @@ export default {
               password: this.password
             });
             this.onSuccess(i18n.t('You are logged in!'));
-            this.closeModal({name: ModalList.Auth});
+            this.closeModal({ name: ModalList.Auth });
           }
         })
         .catch(err => {

components/molecules/m-related-products.vue

@@ -66,16 +66,18 @@ export default {
       }
       let relatedProductsQuery = prepareRelatedQuery(key, sku);
 
-      const response = await this.$store.dispatch('product/list', {
+      const { items } = await this.$store.dispatch('product/findProducts', {
         query: relatedProductsQuery,
         size: 8,
-        prefetchGroupProducts: false,
-        updateState: false
+        options: {
+          populateRequestCacheTags: false,
+          prefetchGroupProducts: false
+        }
       });
-      if (response) {
+      if (items.length) {
         this.$store.dispatch('product/related', {
           key: this.type,
-          items: response.items
+          items
         });
         this.$forceUpdate();
       }

components/molecules/m-reset-password.vue

@@ -57,7 +57,7 @@ export default {
     }),
     switchElem (to) {
       this.$v.$reset();
-      this.openModal({name: ModalList.Auth, payload: to})
+      this.openModal({ name: ModalList.Auth, payload: to })
     },
     resetPassword () {
       this.$v.$touch();

components/organisms/o-bottom-navigation.vue

@@ -49,7 +49,7 @@ export default {
       return (icon) => {
         switch (icon) {
           case 'home': {
-            const isHomepage = this.$route.name === this.localizedRoute({name: 'home', path: '/'}).name
+            const isHomepage = this.$route.name === this.localizedRoute({ name: 'home', path: '/' }).name
             return isHomepage && !this.isMobileMenu && !this.isSearchPanelVisible
           }
           case 'menu': {
@@ -93,7 +93,7 @@ export default {
       if (this.isLoggedIn) {
         this.$router.push(this.localizedRoute('/my-account'))
       } else {
-        this.openModal({name: ModalList.Auth, payload: 'login'})
+        this.openModal({ name: ModalList.Auth, payload: 'login' })
       }
     },
     goToCart () {

components/organisms/o-footer.vue

@@ -108,8 +108,8 @@ export default {
             {
               name: 'My account',
               ...this.isLoggedIn
-                ? {link: '/my-account'}
-                : {clickHandler: () => this.openModal({name: ModalList.Auth, payload: 'login'})}
+                ? { link: '/my-account' }
+                : { clickHandler: () => this.openModal({ name: ModalList.Auth, payload: 'login' }) }
             },
             { name: 'Delivery', link: '/delivery' },
             { name: 'Return policy', link: '/returns' }
@@ -145,7 +145,7 @@ export default {
       openModal: 'openModal'
     }),
     showLanguageSwitcher () {
-      this.openModal({name: ModalList.LanguageSwitcher})
+      this.openModal({ name: ModalList.LanguageSwitcher })
     }
   }
 };

components/organisms/o-header.vue

@@ -98,7 +98,10 @@ export default {
       isSearchPanelVisible: state => state.ui.searchpanel
     }),
     ...mapState('ui', ['isMobileMenu']),
-    ...mapGetters('category', ['getCategories', 'getCurrentCategory']),
+    ...mapGetters('category', ['getCurrentCategory']),
+    ...mapGetters({
+      getCategories: 'category-next/getMenuCategories'
+    }),
     ...mapGetters('user', ['isLoggedIn']),
     activeIcon () {
       return this.isLoggedIn ? 'account' : '';

components/organisms/o-microcart-panel.vue

@@ -156,7 +156,7 @@ export default {
   },
   methods: {
     closeMicrocartExtend () {
-      this.$store.dispatch('ui/toggleMicrocart');
+      this.$store.dispatch('ui/closeMicrocart')
     },
     onEscapePress () {
       this.closeMicrocartExtend();

components/organisms/o-my-account-order-details.vue

@@ -192,8 +192,8 @@ export default {
       })
 
       let searchQuery = new SearchQuery()
-      searchQuery = searchQuery.applyFilter({key: 'configurable_children.sku', value: {'in': arrayOfSKUs}})
-      this.$store.dispatch('product/list', {query: searchQuery, start: 0, size: this.order.items.length, updateState: false}, { root: true }).then((resp) => {
+      searchQuery = searchQuery.applyFilter({ key: 'configurable_children.sku', value: { 'in': arrayOfSKUs } })
+      this.$store.dispatch('product/findProducts', { query: searchQuery, start: 0, size: this.order.items.length }, { root: true }).then((resp) => {
         resp.items.forEach(responseItem => {
           let relatedProduct = this.order.items.find(item => { return item.product_id === responseItem.id })
           this.products.push(Object.assign({}, relatedProduct, responseItem))

components/organisms/o-newsletter.vue

@@ -45,7 +45,7 @@ export default {
       openModal: 'openModal'
     }),
     showNewsletterPopup () {
-      this.openModal({name: ModalList.Newsletter})
+      this.openModal({ name: ModalList.Newsletter })
     }
   }
 }

components/organisms/o-personal-details.vue

@@ -234,10 +234,10 @@ export default {
       openModal: 'openModal'
     }),
     login () {
-      this.openModal({name: ModalList.Auth, payload: 'login'})
+      this.openModal({ name: ModalList.Auth, payload: 'login' })
     },
     openTermsAndConditionsModal () {
-      this.openModal({name: ModalList.TermsAndConditions})
+      this.openModal({ name: ModalList.TermsAndConditions })
     }
   }
 };

components/organisms/o-product-details.vue

@@ -156,7 +156,7 @@ export default {
       openModal: 'openModal'
     }),
     openSizeGuide () {
-      this.openModal({name: ModalList.SizeGuide})
+      this.openModal({ name: ModalList.SizeGuide })
     }
   }
 };

components/organisms/o-search.vue

@@ -49,7 +49,6 @@ export default {
   },
   mixins: [SearchPanelMixin],
   computed: {
-    ...mapGetters('category', ['getCategories']),
     ...mapGetters('user', ['isLoggedIn']),
     ...mapState({
       isSearchPanelVisible: state => state.ui.searchpanel

layouts/Default.vue

@@ -84,21 +84,15 @@ export default {
       openModal: 'openModal'
     }),
     onOrderConfirmation (payload) {
-      this.openModal({name: ModalList.OrderConfirmation, payload});
+      this.openModal({ name: ModalList.OrderConfirmation, payload });
     },
     fetchMenuData () {
-      return this.$store.dispatch('category/list', {
-        level:
-          config.entities.category.categoriesDynamicPrefetch &&
-          config.entities.category.categoriesDynamicPrefetchLevel >= 0
-            ? config.entities.category.categoriesDynamicPrefetchLevel
-            : null,
-        includeFields:
-          config.entities.optimize && isServer
-            ? config.entities.category.includeFields
-            : null,
+      return this.$store.dispatch('category-next/fetchMenuCategories', {
+        level: config.entities.category.categoriesDynamicPrefetch && config.entities.category.categoriesDynamicPrefetchLevel >= 0
+          ? config.entities.category.categoriesDynamicPrefetchLevel
+          : null,
         skipCache: isServer
-      });
+      })
     }
   },
   serverPrefetch () {

package.json

@@ -23,7 +23,7 @@
     "vue-no-ssr": "^0.2.2",
     "vue-offline": "^1.0.8",
     "vue-progressbar": "^0.7.5",
-    "vuelidate": "^0.6.2",
+    "vuelidate": "0.6.2",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

pages/Category.vue

@@ -128,7 +128,7 @@
         <template v-for="(filters, filterType) in availableFilters">
           <SfHeading :level="4" :title="$t(filterType)" :key="filterType" class="filters__title sf-heading--left" />
           <template v-if="filterType === 'color_filter'">
-            <div class="filters__colors" :key="filterType">
+            <div class="filters__colors" :key="filterType + 'filter'">
               <SfColor
                 v-for="filter in filters"
                 :key="filter.id"
@@ -286,7 +286,7 @@ export default {
       getAvailableFilters: 'category-next/getAvailableFilters',
       getCurrentFilters: 'category-next/getCurrentFilters',
       getSystemFilterNames: 'category-next/getSystemFilterNames',
-      getCategories: 'category/getCategories',
+      getCategories: 'category-next/getMenuCategories',
       getBreadcrumbsRoutes: 'breadcrumbs/getBreadcrumbsRoutes',
       getBreadcrumbsCurrent: 'breadcrumbs/getBreadcrumbsCurrent'
     }),
@@ -419,8 +419,9 @@ export default {
       }
     }
   },
-  async asyncData ({ store, route }) {
+  async asyncData ({ store, route, context }) {
     // this is for SSR purposes to prefetch data - and it's always executed before parent component methods
+    if (context) context.output.cacheTags.add('category')
     await composeInitialPageState(store, route);
   },
   async beforeRouteEnter (to, from, next) {

pages/Home.vue

@@ -56,7 +56,6 @@
 import { mapState, mapGetters } from 'vuex';
 import LazyHydrate from 'vue-lazy-hydration';
 import { Logger } from '@vue-storefront/core/lib/logger';
-import Home from '@vue-storefront/core/pages/Home';
 import { isServer, onlineHelper } from '@vue-storefront/core/helpers';
 import MProductCarousel from 'theme/components/molecules/m-product-carousel';
 import ONewsletter from 'theme/components/organisms/o-newsletter';
@@ -82,7 +81,6 @@ export default {
     ONewsletter,
     AImagesGrid
   },
-  mixins: [Home],
   data () {
     return {
       loading: true,
@@ -120,8 +118,9 @@ export default {
       localStorage.removeItem('redirect');
     }
   },
-  async asyncData ({ store }) {
+  async asyncData ({ store, context }) {
     Logger.info('Calling asyncData in Home (theme)')();
+    if (context) context.output.cacheTags.add(`home`)
 
     await Promise.all([
       store.dispatch('homepage/fetchNewCollection'),
@@ -142,6 +141,12 @@ export default {
     } else {
       next();
     }
+  },
+  metaInfo () {
+    return {
+      title: this.$route.meta.title || this.$i18n.t('Home Page'),
+      meta: this.$route.meta.description ? [{ vmid: 'description', name: 'description', content: this.$route.meta.description }] : []
+    }
   }
 };
 </script>

pages/Product.vue

@@ -66,6 +66,7 @@ import OProductDetails from 'theme/components/organisms/o-product-details';
 import AImagesGrid from 'theme/components/atoms/a-images-grid';
 import { checkWebpSupport } from 'theme/helpers'
 import { SfSection, SfBanner, SfBreadcrumbs } from '@storefront-ui/vue';
+import { filterChangedProduct } from '@vue-storefront/core/modules/catalog/events'
 
 export default {
   name: 'Product',
@@ -100,7 +101,6 @@ export default {
       getCurrentProduct: 'product/getCurrentProduct',
       getProductGallery: 'product/getProductGallery',
       getCurrentProductConfiguration: 'product/getCurrentProductConfiguration',
-      getOriginalProduct: 'product/getOriginalProduct',
       attributesByCode: 'attribute/attributeListByCode',
       getCurrentCustomOptions: 'product/getCurrentCustomOptions',
       promotedOffers: 'promoted/getPromotedOffers',
@@ -154,7 +154,8 @@ export default {
       }
     }
   },
-  async asyncData ({ store, route }) {
+  async asyncData ({ store, route, context }) {
+    if (context) context.output.cacheTags.add('product')
     const product = await store.dispatch('product/loadProduct', {
       parentSku: route.params.parentSku,
       childSku:
@@ -174,7 +175,7 @@ export default {
   },
   async mounted () {
     await Promise.all([
-      this.$store.dispatch('review/list', { productId: this.getOriginalProduct.id }),
+      this.$store.dispatch('review/list', { productId: this.getCurrentProduct.id }),
       this.$store.dispatch('instagram/updateInstagramImages')
     ])
   },
@@ -188,8 +189,9 @@ export default {
     }
   },
   methods: {
-    configurableOptionCallback (variant) {
-      this.$bus.$emit('filter-changed-product', variant)
+    async configurableOptionCallback (variant) {
+      const selectedConfiguration = Object.assign({ attribute_code: variant.type }, variant)
+      await filterChangedProduct(selectedConfiguration, this.$store, this.$router)
       this.getQuantity();
     },
     async getQuantity () {

store/default-content.ts

@@ -12,7 +12,7 @@ export const defaultContentStore = {
     }))
   },
   actions: {
-    async updateDefaultContent ({commit, rootState}, data) {
+    async updateDefaultContent ({ commit, rootState }, data) {
       let defaultContentResource = rootState.storeView && rootState.storeView.storeCode
         ? `${rootState.storeView.storeCode}_default-content`
         : `default-content`