Merge pull request #411 from DivanteLtd/hotfix/v1.0.2

Hotfix/v1.0.2

CHANGELOG.md

@@ -5,6 +5,19 @@ 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.2] - 03.07.2020
+
+### Added
+### Changed / Improved
+
+- Update sfui version to 0.7.11
+- Changed the banner links to correct path (#379)
+- Improved the background of MegaMenu (#401)
+- 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
 
 ### Added

README.md

@@ -64,7 +64,7 @@ To be able to use new Capybara theme in your Vue Storefront installation, you ne
 1. Configure `vsf-capybara` repository as a git submodule in theme path of your Vue Storefront workspace, and then track `master` branch:
 
    ```
-   git submodule add -b master git@github.com:DivanteLtd/vsf-capybara.git src/themes/capybara
+   git submodule add -b master https://github.com/DivanteLtd/vsf-capybara.git src/themes/capybara
    ```
 
 1. Fetch all the data:

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-menu sf-mega-menu">
+  <div class="m-menu sf-mega-menu bg-white">
     <SfMegaMenu
       :title="title || currentCategoryTitle"
       :visible="visible"

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-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-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/list', { query: searchQuery, start: 0, size: this.order.items.length, updateState: false }, { 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,7 +84,7 @@ 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', {
@@ -98,7 +98,7 @@ export default {
             ? config.entities.category.includeFields
             : null,
         skipCache: isServer
-      });
+      })
     }
   },
   serverPrefetch () {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/theme-capybara",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "New theme for Vue Storefront based on Storefront UI",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@storefront-ui/vue": "0.7.10",
+    "@storefront-ui/vue": "0.7.11",
+    "@storefront-ui/shared": "0.7.11",
     "body-scroll-lock": "^3.0.1",
     "quicklink": "^2.0.0-alpha",
     "storefront-query-builder": "https://github.com/DivanteLtd/storefront-query-builder.git",
@@ -22,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"
@@ -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',
@@ -154,7 +155,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:
@@ -188,8 +190,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 () {

resource/promoted_offers.json

@@ -9,7 +9,7 @@
         "webp": "/assets/banner/webp/bannerF.webp",
         "fallback": "/assets/banner/png/bannerF.png"
       },
-      "link": "/women/tops-women/tees-women/tees-25",
+      "link": "/women.html",
       "slot": "banner-A"
     },
     {
@@ -21,7 +21,7 @@
         "webp": "/assets/banner/webp/bannerE.webp",
         "fallback": "/assets/banner/png/bannerE.png"
       },
-      "link": "/women/tops-women/jackets-women/jackets-23",
+      "link": "/men.html",
       "slot": "banner-B"
     },
     {
@@ -31,7 +31,7 @@
         "webp": "/assets/banner/webp/bannerC.webp",
         "fallback": "/assets/banner/png/bannerC.png"
       },
-      "link": "/men/tops-men/tees-men/tees-16",
+      "link": "/gear.html",
       "slot": "banner-C"
     },
     {
@@ -41,7 +41,7 @@
         "webp": "/assets/banner/webp/bannerG.webp",
         "fallback": "/assets/banner/png/bannerG.png"
       },
-      "link": "/gear/gear-3",
+      "link": "/gear.html",
       "slot": "banner-D"
     }
   ],

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`

store/instagram-images.ts

@@ -15,7 +15,7 @@ export const instagramStore = {
     }
   },
   actions: {
-    async updateInstagramImages ({commit, rootState}, data) {
+    async updateInstagramImages ({ commit, rootState }, data) {
       let mainImageResource = rootState.storeView && rootState.storeView.storeCode ? `banners/${rootState.storeView.storeCode}_instagram-images` : `instagram-images`
       try {
         // Workaround to get jest --watch to work so don't change the import sting to a template string