Merge pull request #49 from AbsoluteWebServices/feature/upgrade-theme…

…-vsf-1-11-2

Feature/upgrade theme vsf 1 11 2

README.md

@@ -3,7 +3,7 @@
 A [Vue Storefront](https://www.vuestorefront.io) Theme for Passionate Developers with larger catalogs in mind, based on the
 wonderful [Tailwind](https://tailwindcss.com) CSS framework.
 
-Latest tested Vue Storefront version - [1.10.3](https://github.com/DivanteLtd/vue-storefront/tree/v1.10.3)
+Latest tested Vue Storefront version - [1.11.2](https://github.com/DivanteLtd/vue-storefront/tree/v1.11.2)
 
 ## Installing
 
@@ -28,35 +28,6 @@ The result should look something like this:
   // ...
 ```
 
-
-## Tailwind Prerequisites
-
-You may need to run `yarn` from the vuetique theme directory.
-
-Add the following line to `core/build/webpack.base.config.js` in `postcssConfig` var
-
-```js
-require('tailwindcss')(path.join(themeRoot, 'tailwind.config.js')),
-```
-
-The result should look something like this:
-
-```js
-const postcssConfig =  {
-  loader: 'postcss-loader',
-  options: {
-    ident: 'postcss',
-    plugins: (loader) => [
-      require('tailwindcss')(path.join(themeRoot, 'tailwind.config.js')),
-      require('postcss-flexbugs-fixes'),
-      require('autoprefixer')({
-        flexbox: 'no-2009',
-      }),
-    ]
-  }
-};
-```
-
 ## Image hover support
 
 To make image hover function, you need to make a few changes to your Vue Storefront local.json file.

components/core/AddToCart.vue

@@ -14,23 +14,36 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { formatProductMessages } from '@vue-storefront/core/filters/product-messages'
+import { notifications } from '@vue-storefront/core/modules/cart/helpers'
 import focusClean from 'theme/components/theme/directives/focusClean'
 import ButtonFull from 'theme/components/theme/ButtonFull.vue'
-import { AddToCart } from '@vue-storefront/core/modules/cart/components/AddToCart'
 import { setTimeout } from 'timers'
 
 export default {
-  mixins: [AddToCart],
   directives: { focusClean },
   components: { ButtonFull },
+  props: {
+    product: {
+      required: true,
+      type: Object
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       added: false,
       failed: false
     }
   },
   computed: {
+    ...mapGetters({
+      isAddingToCart: 'cart/getIsAdding'
+    }),
     isProductDisabled () {
       return this.disabled || formatProductMessages(this.product.errors) !== '' || this.isAddingToCart
     }
@@ -57,7 +70,17 @@ export default {
       this.added = false
       this.failed = false
       this.addToCart(product)
-    }
+    },
+    async addToCart (product) {
+      try {
+        const diffLog = await this.$store.dispatch('cart/addItem', { productToAdd: product })
+        diffLog.clientNotifications.forEach(notificationData => {
+          this.notifyUser(notificationData)
+        })
+      } catch (message) {
+        this.notifyUser(notifications.createNotification({ type: 'error', message }))
+      }
+    },
   },
   beforeMount () {
     this.$bus.$on('product-after-removevariant', this.onAfterRemovedVariant)

components/core/Breadcrumbs.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="bg-grey-lightest">
     <div class="container text-xs text-grey leading-normal truncate py-4 breadcrumbs">
-      <span v-for="link in routes" :key="link.route_link">
+      <span v-for="link in paths" :key="link.route_link">
         <router-link :to="localizedRoute(link.route_link)" class="text-grey">
           {{ link.name | htmlDecode }}
         </router-link> <span class="px-2">&rsaquo;</span>
       </span>
       <span class="text-grey-dark">
-        {{ activeRoute | htmlDecode }}
+        {{ current | htmlDecode }}
       </span>
     </div>
   </div>
 </template>
 
 <script>
-import Breadcrumbs from '@vue-storefront/core/compatibility/components/Breadcrumbs'
+import { Breadcrumbs } from '@vue-storefront/core/modules/breadcrumbs/components/Breadcrumbs.ts'
 
 export default {
   mixins: [Breadcrumbs]

components/core/ColorSelector.vue

@@ -1,24 +1,32 @@
 <template>
   <button
-    :class="['border border-transparent opacity-50 hover:opacity-100 rounded-full relative inline-flex pointer color mr-3 mb-3', active ? 'active' : '']"
-    @click="switchFilter(id, label)"
-    :aria-label="$t('Select color ') + label"
+    :class="['border border-transparent opacity-50 hover:opacity-100 rounded-full relative inline-flex pointer color mr-3 mb-3', isActive ? 'active' : '']"
+    @click="$emit('change', variant)"
+    :aria-label="$t('Select color ') + variant.label"
   >
     <div
       class="absolute rounded-full color-inside"
-      :class="{'border border-grey': label === 'White'}"
-      :style="colorFrom(label)"
+      :class="{'border border-grey': variant.label === 'White'}"
+      :style="colorFrom(variant.label)"
     />
   </button>
 </template>
 
 <script>
-import GenericSelector from '@vue-storefront/core/compatibility/components/GenericSelector'
+import config from 'config'
+import filterMixin from 'theme/mixins/filterMixin.ts'
 
 export default {
-  mixins: [GenericSelector],
+  mixins: [filterMixin],
   methods: {
     colorFrom (label) {
+      if (!label) return ''
+      if (config.products.colorMappings) {
+        if (typeof config.products.colorMappings[label] !== 'undefined') {
+          label = config.products.colorMappings[label]
+        }
+      }
+      if (label.indexOf('/') >= 0) label = label.replace('/', ',') // to be honest - this is a hack for colors like "ink/white"
       if (label && label.toString().indexOf(',') >= 0) {
         return 'background: linear-gradient(' + label + ')'
       } else {

components/core/CookieNotification.vue

@@ -6,7 +6,7 @@
           <b>
             {{ message }}
           </b>
-          <router-link :to="localizedRoute('detailsLink')" :title="detailsLinkText" class="ml-1 align-middle whitespace-no-wrap">
+          <router-link :to="localizedRoute(detailsLink)" :title="detailsLinkText" class="ml-1 align-middle whitespace-no-wrap">
             {{ detailsLinkText }}
             <i
               class="material-icons icon cursor-pointer align-middle"
@@ -61,7 +61,7 @@ export default {
       this.$store.dispatch('claims/set', {claimCode: 'cookiesAccepted', value: true})
     }
   },
-  created () {
+  mounted () {
     this.$store.dispatch('claims/check', {claimCode: 'cookiesAccepted'}).then((cookieClaim) => {
       if (!cookieClaim) {
         this.isOpen = true
@@ -75,8 +75,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~theme/css/variables/colors';
-@import '~theme/css/helpers/functions/color';
 $color-icon: color(black);
 $bg-icon: color(suva-gray);
 

components/core/GenericSelector.vue

@@ -1,18 +1,19 @@
 <template>
   <button
-    :class="{'active': active}"
+    :class="{'active': isActive}"
     class="border border-grey-light font-medium text-xs text-grey-dark generic-selector"
-    @click="switchFilter(id, label)"
-    :aria-label="$t('Select ' + label)"
+    @click="$emit('change', variant)"
+    :aria-label="$t('Select ' + variant.label)"
   >
-    {{ label }}
+    {{ variant.label }}
   </button>
 </template>
 
 <script>
-import GenericSelector from '@vue-storefront/core/compatibility/components/GenericSelector'
+import filterMixin from 'theme/mixins/filterMixin.ts'
+
 export default {
-  mixins: [GenericSelector]
+  mixins: [filterMixin]
 }
 </script>
 

components/core/LanguageSwitcher.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { currentStoreView } from '@vue-storefront/core/store/lib/multistore'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   data () {

components/core/PriceSelector.vue

@@ -1,21 +1,22 @@
 <template>
-  <div @click="switchFilter(id, from, to)" class="price-select flex items-center cursor-pointer">
+  <div @click="$emit('change', variant)"
+       class="price-select flex items-center cursor-pointer">
     <button
       class="relative border-grey border mr-3 pointer price-selector"
-      :class="{ active: active }"
-      :aria-label="$t('Price ') + content"
+      :class="{ active: isActive }"
+      :aria-label="$t('Price {variant}', { variant: variant.label })"
     >
       <div class="absolute block square"/>
     </button>
-    <span>{{ content }}</span>
+    <span>{{ variant.label }}</span>
   </div>
 </template>
 
 <script>
-import PriceSelector from '@vue-storefront/core/compatibility/components/PriceSelector'
+import filterMixin from 'theme/mixins/filterMixin.ts'
 
 export default {
-  mixins: [PriceSelector]
+  mixins: [filterMixin]
 }
 </script>
 

components/core/ProductGalleryCarousel.vue

@@ -68,16 +68,15 @@
 
 <script>
 import store from '@vue-storefront/core/store'
-import { Carousel, Slide } from 'vue-carousel'
 import ProductVideo from './ProductVideo'
 import { onlineHelper } from '@vue-storefront/core/helpers'
 
 export default {
   name: 'ProductGalleryCarousel',
   components: {
-    Carousel,
-    Slide,
-    ProductVideo
+    ProductVideo,
+    'Carousel': () => import('vue-carousel').then(Slider => Slider.Carousel),
+    'Slide': () => import('vue-carousel').then(Slider => Slider.Slide)
   },
   props: {
     gallery: {

components/core/ProductGalleryZoomCarousel.vue

@@ -50,7 +50,6 @@
 </template>
 
 <script>
-import { Carousel, Slide } from 'vue-carousel'
 import ProductVideo from './ProductVideo'
 
 export default {
@@ -78,9 +77,9 @@ export default {
     }
   },
   components: {
-    Carousel,
-    Slide,
-    ProductVideo
+    ProductVideo,
+    'Carousel': () => import('vue-carousel').then(Slider => Slider.Carousel),
+    'Slide': () => import('vue-carousel').then(Slider => Slider.Slide)
   },
   mounted () {
     this.navigate(this.currentSlide)