Feature/#2773

core/modules/compare/components/AddToCompare.ts

@@ -1,9 +1,19 @@
 import Product from '@vue-storefront/core/modules/catalog/types/Product'
+import { Compare as CompareModule } from '../'
 import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin'
 
 export const AddToCompare = {
   name: 'AddToCompare',
   mixins: [compareMountedMixin],
+  props: {
+    product: {
+      required: true,
+      type: Object
+    }
+  },
+  created () {
+    CompareModule.register()
+  },
   methods: {
     addToCompare (product: Product) {
       return this.$store.state['compare']

core/modules/compare/components/IsToCompare.ts

@@ -0,0 +1,25 @@
+import { Compare as CompareModule } from '..';
+import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin';
+
+export const IsToCompare = {
+  name: 'isToCompare',
+  mixins: [compareMountedMixin],
+  props: {
+    product: {
+      required: true,
+      type: Object
+    }
+  },
+  created () {
+    CompareModule.register();
+  },
+  computed: {
+    isToCompare (): boolean {
+      return (
+        !!this.$store.state.compare.items.find(
+          p => p.sku === this.product.sku
+        ) || false
+      );
+    }
+  }
+};

core/modules/compare/components/Product.ts

@@ -5,8 +5,8 @@ export const CompareProduct = {
   name: 'CompareProduct',
   mixins: [compareMountedMixin],
   computed: {
-    isOnCompare (): boolean {
-      return this.$store.getters['compare/isOnCompare'](this.product)
+    isToCompare (): boolean {
+      return this.$store.getters['compare/isToCompare'](this.product)
     }
   },
   methods: {

core/modules/compare/components/RemoveFromCompare.ts

@@ -0,0 +1,20 @@
+import Product from '@vue-storefront/core/modules/catalog/types/Product'
+import { Compare as CompareModule } from '..'
+import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin'
+
+export const RemoveFromCompare = {
+  name: 'RemoveFromCompare',
+  mixins: [compareMountedMixin],
+  props: {
+    product: {
+      required: true,
+      type: Object
+    }
+  },
+  methods: {
+    removeFromCompare (product: Product) {
+      CompareModule.register()
+      this.$store.dispatch('compare/removeItem', product)
+    }
+  }
+}

core/modules/compare/store/getters.ts

@@ -1,6 +1,6 @@
-import { GetterTree } from 'vuex'
-import RootState from '@vue-storefront/core/types/RootState'
-import CompareState from '../types/CompareState'
+import { GetterTree } from 'vuex';
+import RootState from '@vue-storefront/core/types/RootState';
+import CompareState from '../types/CompareState';
 
 const getters: GetterTree<CompareState, RootState> = {
   isEmpty: (state) => state.items.length === 0,
@@ -9,4 +9,4 @@ const getters: GetterTree<CompareState, RootState> = {
   getCompareProductsCount: (state) => state.items.length
 }
 
-export default getters
+export default getters;

docs/guide/components/product.md

@@ -11,16 +11,16 @@ No props
 - `compare` - Defines if the current product is in compare list.
 - `product` -A computed property that represents the current product that is shown on the page. Initially gets its value from `product/productCurrent` Vuex store getter. Includes all the options like size and color that the user sets on the page.
 - `originalProduct` - A computed property that represents the current product in its initial state. Gets its value from`product/productOriginal` Vuex store getter.
-- `parentProduct` -  A computed property that represents the current product parent product, if any. Gets its value from `product/productParent` Vuex store getter.
+- `parentProduct` - A computed property that represents the current product parent product, if any. Gets its value from `product/productParent` Vuex store getter.
 - `attributesByCode` - A computed property that returns the list of all product attributes by their code. Gets its value from `attribute/attributeListByCode` Vuex store getter.
 - `attributesById` - A computed property that returns the list of all product attributes by their ID. Gets its value from `attribute/attributeListById` Vuex store getter. **This prop is not used anywhere**.
 - `breadcrumbs` - A computed property that represents breadcrumbs for the current product. Gets its value from `product/breadcrumbs` Vuex store getter.
-- `configuration` -  A computed property that represents an object that shows which attributes (like size and color) are chosen on the product. Gets its value from `product/currentConfiguration` Vuex store getter.
+- `configuration` - A computed property that represents an object that shows which attributes (like size and color) are chosen on the product. Gets its value from `product/currentConfiguration` Vuex store getter.
 - `options` - A computed property that represents an object that shows what attributes (like size and color) with what values are available on the product. Gets its value from `product/currentOptions` Vuex store getter.
 - `category` - A computed property representing a category object of the current product. Gets its value from `category/getCurrentCategory` Vuex store getter.
 - `productName` - A computed property that represents a product name. Gets its value from `category/getCurrentCategory` Vuex store getter.
-- `productId` - A computed property representing a product ID. Gets its value from  `category/getCurrentCategory` Vuex store getter.
-- `isOnCompare` - A computed property that checks if a given product is in compare list.
+- `productId` - A computed property representing a product ID. Gets its value from `category/getCurrentCategory` Vuex store getter.
+- `isToCompare` - A computed property that checks if a given product is in compare list.
 - `image` - A computed property that defines an image (thumbnail) that will be shown on the page and its size.
 - `customAttributes` - this is a subset of `attributesByCode` list of attributes that the current product has.
 
@@ -55,7 +55,7 @@ Dispatches `product/reset` action that sets the current product to the original
 
 _Parameters_
 
-- `{store, route}`  - An object that consists of references to the Vuex store and global router object.
+- `{store, route}` - An object that consists of references to the Vuex store and global router object.
 
 #### stateCheck
 

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

@@ -23,7 +23,10 @@
         <div class="row between-xs middle-xs px15 py5" v-if="isCheckoutPage">
           <div class="col-xs-5 col-md-3 middle-xs">
             <div>
-              <router-link :to="localizedRoute('/')" class="cl-tertiary links">
+              <router-link
+                :to="localizedRoute('/')"
+                class="cl-tertiary links"
+              >
                 {{ $t('Return to shopping') }}
               </router-link>
             </div>
@@ -33,12 +36,13 @@
           </div>
           <div class="col-xs-5 col-md-3 end-xs">
             <div>
-              <a v-if="!currentUser" href="#" @click.prevent="gotoAccount" class="cl-tertiary links">
-                {{ $t('Login to your account') }}
-              </a>
-              <span v-else>
-                {{ $t('You are logged in as') }} {{ currentUser.firstname }}
-              </span>
+              <a
+                v-if="!currentUser"
+                href="#"
+                @click.prevent="gotoAccount"
+                class="cl-tertiary links"
+              >{{ $t('Login to your account') }}</a>
+              <span v-else>{{ $t('You are logged in as') }} {{ currentUser.firstname }}</span>
             </div>
           </div>
         </div>
@@ -79,9 +83,13 @@ export default {
     })
   },
   beforeMount () {
-    window.addEventListener('scroll', () => {
-      this.isScrolling = true
-    }, {passive: true})
+    window.addEventListener(
+      'scroll',
+      () => {
+        this.isScrolling = true
+      },
+      { passive: true }
+    )
 
     setInterval(() => {
       if (this.isScrolling) {
@@ -96,7 +104,10 @@ export default {
     },
     hasScrolled () {
       this.scrollTop = window.scrollY
-      if (this.scrollTop > this.lastScrollTop && this.scrollTop > this.navbarHeight) {
+      if (
+        this.scrollTop > this.lastScrollTop &&
+        this.scrollTop > this.navbarHeight
+      ) {
         this.navVisible = false
       } else {
         this.navVisible = true
@@ -115,7 +126,7 @@ $color-icon-hover: color(secondary, $colors-background);
 header {
   height: 54px;
   top: -55px;
-  z-index: 2;
+  z-index: 3;
   transition: top 0.2s ease-in-out;
   &.is-visible {
     top: 0;
@@ -148,12 +159,13 @@ header {
     }
   }
   .col-xs-2:first-of-type {
-      padding-left: 0;
+    padding-left: 0;
   }
   .col-xs-2:last-of-type {
-      padding-right: 0;
+    padding-right: 0;
   }
-  a, span {
+  a,
+  span {
     font-size: 12px;
   }
 }