From dc7bccfb71e3ac06138fc73cec8e9c7a4cca5830 Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Tue, 25 Jun 2019 15:27:36 +0200
Subject: [PATCH 01/11] Created add to wish list button at ProductTile

---
 .../default/components/core/ProductTile.vue   | 52 ++++++++++++++++++-
 .../core/blocks/Compare/AddToCompare.vue      |  0
 .../core/blocks/Wishlist/AddToWishlist.vue    |  3 ++
 3 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 src/themes/default/components/core/blocks/Compare/AddToCompare.vue

diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
index 8d2aba3aa5..3af4f29f02 100644
--- a/src/themes/default/components/core/ProductTile.vue
+++ b/src/themes/default/components/core/ProductTile.vue
@@ -3,6 +3,15 @@
     class="product align-center w-100 pb20"
     v-observe-visibility="visibilityChanged"
   >
+        <div class="product__icons">
+          <AddToWishlist :product="product">
+            <!-- <input type="checkbox" class="product__checkbox" :id="id"> -->
+            <div>{{id}}</div>
+            <label :for="id" class="product__icon product__icon--wish">
+              <i class="pr5 material-icons">{{ favoriteIcon }}</i>
+            </label>
+          </AddToWishlist>
+        </div>
     <router-link
       class="block no-underline product-link"
       :to="productLink"
@@ -53,11 +62,21 @@ 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 AddToWishlist from 'theme/components/core/blocks/Wishlist/AddToWishlist'
+import { IsOnWishlist } from '@vue-storefront/core/modules/wishlist/components/IsOnWishlist'
+// import { RemoveFromWishlist } from '@vue-storefront/core/modules/wishlist/components/RemoveFromWishlist'
 
 export default {
-  mixins: [ProductTile],
+    data () {
+    return {
+      id: null
+    }
+  },
+  mixins: [ProductTile, IsOnWishlist],
   components: {
-    ProductImage
+    ProductImage,
+    AddToWishlist,
+    // RemoveFromWishlist
   },
   props: {
     labelsActive: {
@@ -75,6 +94,9 @@ export default {
         src: this.thumbnail,
         loading: this.thumbnail
       }
+    },
+        favoriteIcon () {
+      return this.isOnWishlist ? 'favorite' : 'favorite_border'
     }
   },
   methods: {
@@ -104,6 +126,9 @@ export default {
   },
   beforeMount () {
     this.$bus.$on('product-after-priceupdate', this.onProductPriceUpdate)
+  },
+    mounted () {
+    this.id = this._uid
   },
   beforeDestroy () {
     this.$bus.$off('product-after-priceupdate', this.onProductPriceUpdate)
@@ -121,9 +146,32 @@ $border-secondary: color(secondary, $colors-border);
 $color-white: color(white);
 
 .product {
+  position: relative;
   @media (max-width: 767px) {
     padding-bottom: 10px;
   }
+  &__icons{
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+  }
+  &__icon{
+    opacity: 0;
+    z-index: 10;
+    cursor: pointer;
+  }
+  &__checkbox {
+    display: none;
+  }
+  &__checkbox:checked ~ &__icon--wish {
+    opacity: 1;
+  }
+  &:hover{
+    .product__icon{
+      opacity: 1;
+    }
+  }
 }
 
 .price-original {
diff --git a/src/themes/default/components/core/blocks/Compare/AddToCompare.vue b/src/themes/default/components/core/blocks/Compare/AddToCompare.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/default/components/core/blocks/Wishlist/AddToWishlist.vue b/src/themes/default/components/core/blocks/Wishlist/AddToWishlist.vue
index 672bc03e99..aedfd0e878 100644
--- a/src/themes/default/components/core/blocks/Wishlist/AddToWishlist.vue
+++ b/src/themes/default/components/core/blocks/Wishlist/AddToWishlist.vue
@@ -1,5 +1,7 @@
 <template>
   <button @click="isOnWishlist ? removeFromWishlist(product) : addToWishlist(product)" class="p0 inline-flex middle-xs bg-cl-transparent brdr-none action h5 pointer cl-secondary" type="button" data-testid="addToWishlist">
+    <slot>
+
     <i class="pr5 material-icons">{{ favoriteIcon }}</i>
     <template v-if="!isOnWishlist">
       {{ $t('Add to favorite') }}
@@ -7,6 +9,7 @@
     <template v-else>
       {{ $t('Remove') }}
     </template>
+    </slot>
   </button>
 </template>
 

From 3860bc55685e91f4379bd89715208dbb3c05a413 Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Fri, 28 Jun 2019 12:59:32 +0200
Subject: [PATCH 02/11] Added add to compare component

---
 .../compare/components/AddToCompare.ts        |  10 ++
 .../modules/compare/components/IsToCompare.ts |  25 ++++
 core/modules/compare/components/Product.ts    |   4 +-
 .../compare/components/RemoveFromCompare.ts   |  20 +++
 core/modules/compare/store/getters.ts         |  14 +-
 docs/guide/components/product.md              |  10 +-
 .../default-amp/components/core/Header.vue    |  42 +++---
 .../default/components/core/ProductTile.vue   | 124 ++++++++---------
 .../core/blocks/Compare/AddToCompare.vue      |  28 ++++
 .../components/core/blocks/Header/Header.vue  |  46 ++++---
 .../core/blocks/Header/MinimalHeader.vue      |  22 +--
 .../core/blocks/Wishlist/AddToWishlist.vue    |  15 +--
 src/themes/default/pages/Compare.vue          |  30 +++--
 src/themes/default/pages/Product.vue          | 125 ++++++++----------
 14 files changed, 310 insertions(+), 205 deletions(-)
 create mode 100644 core/modules/compare/components/IsToCompare.ts
 create mode 100644 core/modules/compare/components/RemoveFromCompare.ts

diff --git a/core/modules/compare/components/AddToCompare.ts b/core/modules/compare/components/AddToCompare.ts
index 5823da9514..1d40b8c03a 100644
--- a/core/modules/compare/components/AddToCompare.ts
+++ b/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']
diff --git a/core/modules/compare/components/IsToCompare.ts b/core/modules/compare/components/IsToCompare.ts
new file mode 100644
index 0000000000..4532afcbd5
--- /dev/null
+++ b/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
+      );
+    }
+  }
+};
diff --git a/core/modules/compare/components/Product.ts b/core/modules/compare/components/Product.ts
index 07e2a565f5..980ce72287 100644
--- a/core/modules/compare/components/Product.ts
+++ b/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: {
diff --git a/core/modules/compare/components/RemoveFromCompare.ts b/core/modules/compare/components/RemoveFromCompare.ts
new file mode 100644
index 0000000000..56ce0fba91
--- /dev/null
+++ b/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)
+    }
+  }
+}
diff --git a/core/modules/compare/store/getters.ts b/core/modules/compare/store/getters.ts
index c5aeb19d8b..79213a865c 100644
--- a/core/modules/compare/store/getters.ts
+++ b/core/modules/compare/store/getters.ts
@@ -1,11 +1,11 @@
-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,
-  isOnCompare: (state) => (product) => state.items.find(p => p.sku === product.sku),
+  isEmpty: state => state.items.length === 0,
+  isToCompare: state => product => state.items.find(p => p.sku === product.sku),
   isCompareLoaded: state => state.loaded
-}
+};
 
-export default getters
+export default getters;
diff --git a/docs/guide/components/product.md b/docs/guide/components/product.md
index e7728ee332..1026968412 100644
--- a/docs/guide/components/product.md
+++ b/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
 
diff --git a/src/themes/default-amp/components/core/Header.vue b/src/themes/default-amp/components/core/Header.vue
index 29cfa03e61..25e7c31ef0 100755
--- a/src/themes/default-amp/components/core/Header.vue
+++ b/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;
   }
 }
diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
index 3af4f29f02..0070cf7739 100644
--- a/src/themes/default/components/core/ProductTile.vue
+++ b/src/themes/default/components/core/ProductTile.vue
@@ -1,17 +1,25 @@
 <template>
-  <div
-    class="product align-center w-100 pb20"
-    v-observe-visibility="visibilityChanged"
-  >
-        <div class="product__icons">
-          <AddToWishlist :product="product">
-            <!-- <input type="checkbox" class="product__checkbox" :id="id"> -->
-            <div>{{id}}</div>
-            <label :for="id" class="product__icon product__icon--wish">
-              <i class="pr5 material-icons">{{ favoriteIcon }}</i>
-            </label>
-          </AddToWishlist>
+  <div class="product align-center w-100 pb20" v-observe-visibility="visibilityChanged">
+    <div class="product__icons">
+      <AddToWishlist :product="product">
+        <div
+          class="product__icon"
+          :class="{'product__icon--active': isOnWishlist }"
+          :title="isOnWishlist ? $t('Remove') : $t('Add to favorite') "
+        >
+          <i class="material-icons">{{ favoriteIcon }}</i>
         </div>
+      </AddToWishlist>
+      <AddToCompare :product="product">
+        <div
+          class="product__icon"
+          :class="{'product__icon--active':isToCompare } "
+          :title="isToCompare ? $t('Remove from compare') : $t('Add to compare')"
+        >
+          <i class="material-icons">compare</i>
+        </div>
+      </AddToCompare>
+    </div>
     <router-link
       class="block no-underline product-link"
       :to="productLink"
@@ -36,23 +44,17 @@
       <span
         class="price-original mr5 lh30 cl-secondary"
         v-if="product.special_price && parseFloat(product.originalPriceInclTax) > 0 && !onlyImage"
-      >
-        {{ product.originalPriceInclTax | price }}
-      </span>
+      >{{ product.originalPriceInclTax | price }}</span>
 
       <span
         class="price-special lh30 cl-accent weight-700"
         v-if="product.special_price && parseFloat(product.special_price) > 0 && !onlyImage"
-      >
-        {{ product.priceInclTax | price }}
-      </span>
+      >{{ product.priceInclTax | price }}</span>
 
       <span
         class="lh30 cl-secondary"
         v-if="!product.special_price && parseFloat(product.priceInclTax) > 0 && !onlyImage"
-      >
-        {{ product.priceInclTax | price }}
-      </span>
+      >{{ product.priceInclTax | price }}</span>
     </router-link>
   </div>
 </template>
@@ -63,20 +65,16 @@ import { ProductTile } from '@vue-storefront/core/modules/catalog/components/Pro
 import config from 'config'
 import ProductImage from './ProductImage'
 import AddToWishlist from 'theme/components/core/blocks/Wishlist/AddToWishlist'
+import AddToCompare from 'theme/components/core/blocks/Compare/AddToCompare'
 import { IsOnWishlist } from '@vue-storefront/core/modules/wishlist/components/IsOnWishlist'
-// import { RemoveFromWishlist } from '@vue-storefront/core/modules/wishlist/components/RemoveFromWishlist'
+import { IsToCompare } from '@vue-storefront/core/modules/compare/components/IsToCompare'
 
 export default {
-    data () {
-    return {
-      id: null
-    }
-  },
-  mixins: [ProductTile, IsOnWishlist],
+  mixins: [ProductTile, IsOnWishlist, IsToCompare],
   components: {
     ProductImage,
     AddToWishlist,
-    // RemoveFromWishlist
+    AddToCompare
   },
   props: {
     labelsActive: {
@@ -95,7 +93,7 @@ export default {
         loading: this.thumbnail
       }
     },
-        favoriteIcon () {
+    favoriteIcon () {
       return this.isOnWishlist ? 'favorite' : 'favorite_border'
     }
   },
@@ -107,9 +105,16 @@ export default {
     },
     visibilityChanged (isVisible, entry) {
       if (isVisible) {
-        if (config.products.configurableChildrenStockPrefetchDynamic && rootStore.products.filterUnavailableVariants) {
+        if (
+          config.products.configurableChildrenStockPrefetchDynamic &&
+          rootStore.products.filterUnavailableVariants
+        ) {
           const skus = [this.product.sku]
-          if (this.product.type_id === 'configurable' && this.product.configurable_children && this.product.configurable_children.length > 0) {
+          if (
+            this.product.type_id === 'configurable' &&
+            this.product.configurable_children &&
+            this.product.configurable_children.length > 0
+          ) {
             for (const confChild of this.product.configurable_children) {
               const cachedItem = rootStore.state.stock.cache[confChild.id]
               if (typeof cachedItem === 'undefined' || cachedItem === null) {
@@ -126,9 +131,6 @@ export default {
   },
   beforeMount () {
     this.$bus.$on('product-after-priceupdate', this.onProductPriceUpdate)
-  },
-    mounted () {
-    this.id = this._uid
   },
   beforeDestroy () {
     this.$bus.$off('product-after-priceupdate', this.onProductPriceUpdate)
@@ -150,25 +152,28 @@ $color-white: color(white);
   @media (max-width: 767px) {
     padding-bottom: 10px;
   }
-  &__icons{
+  &__icons {
     position: absolute;
     top: 0;
     right: 0;
-    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    padding-right: 20px;
+    padding-top: 10px;
   }
-  &__icon{
+  &__icon {
+    padding-top: 10px;
     opacity: 0;
-    z-index: 10;
-    cursor: pointer;
-  }
-  &__checkbox {
-    display: none;
-  }
-  &__checkbox:checked ~ &__icon--wish {
-    opacity: 1;
+    z-index: 2;
+    @media (max-width: 767px) {
+      opacity: 1;
+    }
+    &--active {
+      opacity: 1;
+    }
   }
-  &:hover{
-    .product__icon{
+  &:hover {
+    .product__icon {
       opacity: 1;
     }
   }
@@ -193,30 +198,29 @@ $color-white: color(white);
   font-size: 12px;
 }
 
-.product-image{
+.product-image {
   overflow: hidden;
-  width:100%;
+  width: 100%;
   height: 100%;
   max-height: 300px;
 
-  &:hover{
-    .product-image__content{
+  &:hover {
+    .product-image__content {
       opacity: 1;
       transform: scale(1.1);
     }
     &.sale::after,
-    &.new::after{
-      opacity: .8;
+    &.new::after {
+      opacity: 0.8;
     }
   }
-  &__content{
-
+  &__content {
     padding-bottom: calc(300% / (257 / 100));
     mix-blend-mode: darken;
-    opacity: .8;
+    opacity: 0.8;
     transform: scale(1);
     will-change: transform;
-    transition: .3s opacity $motion-main, .3s transform $motion-main;
+    transition: 0.3s opacity $motion-main, 0.3s transform $motion-main;
     @media (min-width: 768px) {
       padding-bottom: calc(208% / (168 / 100));
     }
@@ -225,13 +229,13 @@ $color-white: color(white);
     }
   }
 
-  &.sale{
+  &.sale {
     &::after {
       @extend %label;
       content: 'Sale';
     }
   }
-  &.new{
+  &.new {
     &::after {
       @extend %label;
       content: 'New';
diff --git a/src/themes/default/components/core/blocks/Compare/AddToCompare.vue b/src/themes/default/components/core/blocks/Compare/AddToCompare.vue
index e69de29bb2..f8cc974b02 100644
--- a/src/themes/default/components/core/blocks/Compare/AddToCompare.vue
+++ b/src/themes/default/components/core/blocks/Compare/AddToCompare.vue
@@ -0,0 +1,28 @@
+<template>
+  <button
+    @click="isToCompare ? removeFromCompare(product) : addToCompare(product)"
+    class="p0 inline-flex middle-xs bg-cl-transparent brdr-none action h5 pointer cl-secondary"
+    type="button"
+    data-testid="addToCompare"
+  >
+    <slot>
+      <i class="pr5 material-icons">compare</i>
+      <template v-if="!isToCompare">
+        {{ $t('Add to compare') }}
+      </template>
+      <template v-else>
+        {{ $t('Remove from compare') }}
+      </template>
+    </slot>
+  </button>
+</template>
+
+<script>
+import { IsToCompare } from '@vue-storefront/core/modules/compare/components/IsToCompare'
+import { AddToCompare } from '@vue-storefront/core/modules/compare/components/AddToCompare'
+import { RemoveFromCompare } from '@vue-storefront/core/modules/compare/components/RemoveFromCompare'
+
+export default {
+  mixins: [IsToCompare, AddToCompare, RemoveFromCompare]
+}
+</script>
diff --git a/src/themes/default/components/core/blocks/Header/Header.vue b/src/themes/default/components/core/blocks/Header/Header.vue
index bac6c645fa..e7e2c8e2e3 100644
--- a/src/themes/default/components/core/blocks/Header/Header.vue
+++ b/src/themes/default/components/core/blocks/Header/Header.vue
@@ -35,7 +35,10 @@
         <div class="row between-xs middle-xs px15 py5" v-if="isCheckoutPage && !isThankYouPage">
           <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>
@@ -45,12 +48,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>
@@ -98,13 +102,19 @@ export default {
       currentUser: state => state.user.current
     }),
     isThankYouPage () {
-      return this.$store.state.checkout.isThankYouPage ? this.$store.state.checkout.isThankYouPage : false
+      return this.$store.state.checkout.isThankYouPage
+        ? this.$store.state.checkout.isThankYouPage
+        : false
     }
   },
   beforeMount () {
-    window.addEventListener('scroll', () => {
-      this.isScrolling = true
-    }, {passive: true})
+    window.addEventListener(
+      'scroll',
+      () => {
+        this.isScrolling = true
+      },
+      { passive: true }
+    )
 
     setInterval(() => {
       if (this.isScrolling) {
@@ -119,7 +129,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
@@ -138,7 +151,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;
@@ -171,12 +184,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;
   }
 }
diff --git a/src/themes/default/components/core/blocks/Header/MinimalHeader.vue b/src/themes/default/components/core/blocks/Header/MinimalHeader.vue
index 8b93243685..87ca8a66de 100644
--- a/src/themes/default/components/core/blocks/Header/MinimalHeader.vue
+++ b/src/themes/default/components/core/blocks/Header/MinimalHeader.vue
@@ -9,7 +9,11 @@
           <div class="col-sm-4 col-xs-2 middle-xs">
             <div>
               <template>
-                <a class="inline-flex brdr-none p15 icon bg-cl-secondary pointer" href="/" data-testid="returnButton">
+                <a
+                  class="inline-flex brdr-none p15 icon bg-cl-secondary pointer"
+                  href="/"
+                  data-testid="returnButton"
+                >
                   <i class="material-icons">keyboard_backspace</i>
                 </a>
               </template>
@@ -19,12 +23,7 @@
           <div class="col-sm-4 col-xs-4 center-xs">
             <div>
               <a class="no-underline inline-flex" href="/" data-testid="logo">
-                <img
-                  width="auto"
-                  height="41px"
-                  src="/assets/logo.svg"
-                  alt="Vuestore logo"
-                >
+                <img width="auto" height="41px" src="/assets/logo.svg" alt="Vuestore logo">
               </a>
             </div>
           </div>
@@ -55,7 +54,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;
@@ -88,12 +87,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;
   }
 }
diff --git a/src/themes/default/components/core/blocks/Wishlist/AddToWishlist.vue b/src/themes/default/components/core/blocks/Wishlist/AddToWishlist.vue
index aedfd0e878..0259b77f78 100644
--- a/src/themes/default/components/core/blocks/Wishlist/AddToWishlist.vue
+++ b/src/themes/default/components/core/blocks/Wishlist/AddToWishlist.vue
@@ -1,14 +1,13 @@
 <template>
   <button @click="isOnWishlist ? removeFromWishlist(product) : addToWishlist(product)" class="p0 inline-flex middle-xs bg-cl-transparent brdr-none action h5 pointer cl-secondary" type="button" data-testid="addToWishlist">
     <slot>
-
-    <i class="pr5 material-icons">{{ favoriteIcon }}</i>
-    <template v-if="!isOnWishlist">
-      {{ $t('Add to favorite') }}
-    </template>
-    <template v-else>
-      {{ $t('Remove') }}
-    </template>
+      <i class="pr5 material-icons">{{ favoriteIcon }}</i>
+      <template v-if="!isOnWishlist">
+        {{ $t('Add to favorite') }}
+      </template>
+      <template v-else>
+        {{ $t('Remove') }}
+      </template>
     </slot>
   </button>
 </template>
diff --git a/src/themes/default/pages/Compare.vue b/src/themes/default/pages/Compare.vue
index a32b940c68..61965a5bc5 100644
--- a/src/themes/default/pages/Compare.vue
+++ b/src/themes/default/pages/Compare.vue
@@ -18,20 +18,29 @@
                 <li class="compare__features-item">
                   {{ $t('SKU') }}
                 </li>
-                <li v-for="(attr, index) in all_comparable_attributes" :key="index" class="compare__features-item">
+                <li
+                  v-for="(attr, index) in all_comparable_attributes"
+                  :key="index"
+                  class="compare__features-item"
+                >
                   {{ attr.default_frontend_label }}
                 </li>
               </ul>
             </div>
             <div class="compare__products-wrapper">
               <ul class="compare__products-columns">
-                <li v-for="(product, index) in items" :key="index" class="compare__product" data-testid="comparedProduct">
+                <li
+                  v-for="(product, index) in items"
+                  :key="index"
+                  class="compare__product"
+                  data-testid="comparedProduct"
+                >
                   <div class="compare__top-info">
                     <div class="check" />
                     <product-tile class="col-md-12 collection-product" :product="product" />
-                    <span class="compare__remove" @click="removeFromCompare(product)">
+                    <!-- <span class="compare__remove" @click="removeFromCompare(product)">
                       <remove-button />
-                    </span>
+                    </span>-->
                   </div>
                   <ul class="compare__features-list">
                     <li class="compare__features-item">
@@ -72,7 +81,6 @@
 <script>
 import Compare from '@vue-storefront/core/pages/Compare'
 import Breadcrumbs from '../components/core/Breadcrumbs'
-import RemoveButton from '../components/core/blocks/Compare/RemoveButton'
 import ProductTile from '../components/core/ProductTile'
 import ProductAttribute from '../components/core/blocks/Compare/ProductAttribute'
 import i18n from '@vue-storefront/i18n'
@@ -81,7 +89,6 @@ export default {
   components: {
     Breadcrumbs,
     ProductTile,
-    RemoveButton,
     ProductAttribute
   },
   mixins: [Compare],
@@ -94,7 +101,9 @@ export default {
   metaInfo () {
     return {
       title: this.$route.meta.title || this.title || i18n.t('Compare Products'),
-      meta: this.$route.meta.description ? [{ vmid: 'description', description: this.$route.meta.description }] : []
+      meta: this.$route.meta.description
+        ? [{ vmid: 'description', description: this.$route.meta.description }]
+        : []
     }
   }
 }
@@ -122,7 +131,6 @@ $screen-l: 1170px;
 }
 
 .compare {
-
   &__products-wrapper {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
@@ -156,7 +164,7 @@ $screen-l: 1170px;
     border-color: $border;
     border-width: 1px 0 1px 0;
     background-color: mix(#000, $color-white, 2%);
-    opacity: .95;
+    opacity: 0.95;
 
     @media (min-width: $screen-l) {
       width: $features-column-width;
@@ -169,7 +177,7 @@ $screen-l: 1170px;
     float: left;
     width: $products-column-width-mobile;
     text-align: center;
-    transition: opacity .3s, visibility .3s, transform .3s;
+    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
 
     @media (min-width: $screen-l) {
       width: $products-column-width;
@@ -198,7 +206,7 @@ $screen-l: 1170px;
     border-color: $border;
     border-style: solid;
     border-width: 0 1px 0 0;
-    transition: height .3s;
+    transition: height 0.3s;
     cursor: pointer;
     background: $color-product-bg;
     overflow: hidden;
diff --git a/src/themes/default/pages/Product.vue b/src/themes/default/pages/Product.vue
index d526e86487..1f1263e681 100644
--- a/src/themes/default/pages/Product.vue
+++ b/src/themes/default/pages/Product.vue
@@ -17,11 +17,23 @@
               :routes="breadcrumbs.routes"
               :active-route="breadcrumbs.name"
             />
-            <h1 class="mb20 mt0 cl-mine-shaft product-name" data-testid="productName" itemprop="name">
+            <h1
+              class="mb20 mt0 cl-mine-shaft product-name"
+              data-testid="productName"
+              itemprop="name"
+            >
               {{ product.name | htmlDecode }}
-              <web-share :title="product.name | htmlDecode" text="Check this product!" class="web-share" />
+              <web-share
+                :title="product.name | htmlDecode"
+                text="Check this product!"
+                class="web-share"
+              />
             </h1>
-            <div class="mb20 uppercase cl-secondary" itemprop="sku" :content="product.sku">
+            <div
+              class="mb20 uppercase cl-secondary"
+              itemprop="sku"
+              :content="product.sku"
+            >
               {{ $t('SKU') }}: {{ product.sku }}
             </div>
             <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
@@ -29,20 +41,17 @@
               <meta itemprop="price" :content="parseFloat(product.priceInclTax).toFixed(2)">
               <meta itemprop="availability" :content="structuredData.availability">
               <meta itemprop="url" :content="product.url_path">
-              <div
-                class="mb40 price serif"
-                v-if="product.type_id !== 'grouped'"
-              >
+              <div class="mb40 price serif" v-if="product.type_id !== 'grouped'">
                 <div
                   class="h3 cl-secondary"
                   v-if="product.special_price && product.priceInclTax && product.originalPriceInclTax"
                 >
-                  <span class="h2 cl-mine-shaft weight-700">
-                    {{ product.priceInclTax * product.qty | price }}
-                  </span>&nbsp;
-                  <span class="price-original h3">
-                    {{ product.originalPriceInclTax * product.qty | price }}
-                  </span>
+                  <span
+                    class="h2 cl-mine-shaft weight-700"
+                  >{{ product.priceInclTax * product.qty | price }}</span>&nbsp;
+                  <span
+                    class="price-original h3"
+                  >{{ product.originalPriceInclTax * product.qty | price }}</span>
                 </div>
                 <div
                   class="h2 cl-mine-shaft weight-700"
@@ -51,11 +60,11 @@
                   {{ product.qty > 0 ? product.priceInclTax * product.qty : product.priceInclTax | price }}
                 </div>
               </div>
-              <div
-                class="cl-primary variants"
-                v-if="product.type_id =='configurable' && !loading"
-              >
-                <div class="error" v-if="product.errors && Object.keys(product.errors).length > 0">
+              <div class="cl-primary variants" v-if="product.type_id =='configurable' && !loading">
+                <div
+                  class="error"
+                  v-if="product.errors && Object.keys(product.errors).length > 0"
+                >
                   {{ product.errors | formatProductMessages }}
                 </div>
                 <div
@@ -66,9 +75,9 @@
                 >
                   <div class="variants-label" data-testid="variantsLabel">
                     {{ option.label }}
-                    <span class="weight-700">
-                      {{ configuration[option.attribute_code ? option.attribute_code : option.label.toLowerCase()].label }}
-                    </span>
+                    <span
+                      class="weight-700"
+                    >{{ configuration[option.attribute_code ? option.attribute_code : option.label.toLowerCase()].label }}</span>
                   </div>
                   <div class="row top-xs m0 pt15 pb40 variants-wrapper">
                     <div v-if="option.label == 'Color'">
@@ -114,15 +123,10 @@
                     <span
                       v-if="option.label == 'Size'"
                       @click="openSizeGuide"
-                      class="
-                        p0 ml30 inline-flex middle-xs no-underline h5
-                        action size-guide pointer cl-secondary
-                      "
+                      class="p0 ml30 inline-flex middle-xs no-underline h5 action size-guide pointer cl-secondary"
                     >
                       <i class="pr5 material-icons">accessibility</i>
-                      <span>
-                        {{ $t('Size guide') }}
-                      </span>
+                      <span>{{ $t('Size guide') }}</span>
                     </span>
                   </div>
                 </div>
@@ -140,7 +144,10 @@
               v-else-if="product.custom_options && product.custom_options.length > 0 && !loading"
               :product="product"
             />
-            <div class="row m0 mb35" v-if="product.type_id !== 'grouped' && product.type_id !== 'bundle'">
+            <div
+              class="row m0 mb35"
+              v-if="product.type_id !== 'grouped' && product.type_id !== 'bundle'"
+            >
               <base-input-number
                 :name="$t('Quantity')"
                 v-model="product.qty"
@@ -163,26 +170,10 @@
             </div>
             <div class="row py40 add-to-buttons">
               <div class="col-xs-6 col-sm-3 col-md-6">
-                <wishlist-button :product="product" />
+                <AddToWishlist :product="product" />
               </div>
-              <div class="col-xs-6 col-sm-3 col-md-6 product__add-to-compare">
-                <button
-                  @click="isOnCompare ? removeFromList('compare') : addToList('compare')"
-                  class="
-                    p0 inline-flex middle-xs bg-cl-transparent brdr-none
-                    action h5 pointer cl-secondary
-                  "
-                  type="button"
-                  data-testid="addToCompare"
-                >
-                  <i class="pr5 material-icons">compare</i>
-                  <template v-if="!isOnCompare">
-                    {{ $t('Add to compare') }}
-                  </template>
-                  <template v-else>
-                    {{ $t('Remove from compare') }}
-                  </template>
-                </button>
+              <div class="col-xs-6 col-sm-3 col-md-6">
+                <AddToCompare :product="product" />
               </div>
             </div>
           </div>
@@ -193,17 +184,10 @@
       <h2 class="h3 m0 mb10 serif lh20 details-title">
         {{ $t('Product details') }}
       </h2>
-      <div
-        class="h4 details-wrapper"
-        :class="{'details-wrapper--open': detailsOpen}"
-      >
+      <div class="h4 details-wrapper" :class="{'details-wrapper--open': detailsOpen}">
         <div class="row between-md m0">
           <div class="col-xs-12 col-sm-6">
-            <div
-              class="lh30 h5"
-              itemprop="description"
-              v-html="product.description"
-            />
+            <div class="lh30 h5" itemprop="description" v-html="product.description" />
           </div>
           <div class="col-xs-12 col-sm-5">
             <ul class="attributes p0 pt5 m0">
@@ -216,18 +200,12 @@
               />
             </ul>
           </div>
-          <div
-            class="details-overlay"
-            @click="showDetails"
-          />
+          <div class="details-overlay" @click="showDetails" />
         </div>
       </div>
     </section>
     <reviews :product-id="originalProduct.id" v-show="OnlineOnly" />
-    <related-products
-      type="upsell"
-      :heading="$t('We found other products you might like')"
-    />
+    <related-products type="upsell" :heading="$t('We found other products you might like')" />
     <promoted-offers single-banner />
     <related-products type="related" />
     <SizeGuide />
@@ -255,11 +233,14 @@ import focusClean from 'theme/components/theme/directives/focusClean'
 import WebShare from '@vue-storefront/core/modules/social-share/components/WebShare'
 import BaseInputNumber from 'theme/components/core/blocks/Form/BaseInputNumber'
 import SizeGuide from 'theme/components/core/blocks/Product/SizeGuide'
+import AddToWishlist from 'theme/components/core/blocks/Wishlist/AddToWishlist'
+import AddToCompare from 'theme/components/core/blocks/Compare/AddToCompare'
 
 export default {
   components: {
-    'WishlistButton': () => import(/* webpackChunkName: "wishlist" */'theme/components/core/blocks/Wishlist/AddToWishlist'),
     AddToCart,
+    AddToCompare,
+    AddToWishlist,
     Breadcrumbs,
     ColorSelector,
     GenericSelector,
@@ -286,7 +267,7 @@ export default {
   computed: {
     structuredData () {
       return {
-        availability: (this.product.stock.is_in_stock) ? 'InStock' : 'OutOfStock'
+        availability: this.product.stock.is_in_stock ? 'InStock' : 'OutOfStock'
       }
     }
   },
@@ -298,14 +279,18 @@ export default {
     notifyOutStock () {
       this.$store.dispatch('notification/spawnNotification', {
         type: 'error',
-        message: this.$t('The product is out of stock and cannot be added to the cart!'),
+        message: this.$t(
+          'The product is out of stock and cannot be added to the cart!'
+        ),
         action1: { label: this.$t('OK') }
       })
     },
     notifyWrongAttributes () {
       this.$store.dispatch('notification/spawnNotification', {
         type: 'warning',
-        message: this.$t('No such configuration for the product. Please do choose another combination of attributes.'),
+        message: this.$t(
+          'No such configuration for the product. Please do choose another combination of attributes.'
+        ),
         action1: { label: this.$t('OK') }
       })
     },
@@ -388,7 +373,7 @@ $bg-secondary: color(secondary, $colors-background);
     padding-bottom: 30px;
   }
 
- .sizes {
+  .sizes {
     @media (max-width: 767px) {
       width: 100%;
     }

From ceb14c3b13a624514a9222e2e6243823457feefc Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Fri, 28 Jun 2019 15:03:05 +0200
Subject: [PATCH 03/11] Added transition on hover

---
 .../default/components/core/ProductTile.vue     | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
index 0070cf7739..e8b3a630ff 100644
--- a/src/themes/default/components/core/ProductTile.vue
+++ b/src/themes/default/components/core/ProductTile.vue
@@ -37,9 +37,7 @@
         />
       </div>
 
-      <p class="mb0 cl-accent mt10" v-if="!onlyImage">
-        {{ product.name | htmlDecode }}
-      </p>
+      <p class="mb0 cl-accent mt10" v-if="!onlyImage">{{ product.name | htmlDecode }}</p>
 
       <span
         class="price-original mr5 lh30 cl-secondary"
@@ -87,23 +85,23 @@ export default {
     }
   },
   computed: {
-    thumbnailObj () {
+    thumbnailObj() {
       return {
         src: this.thumbnail,
         loading: this.thumbnail
       }
     },
-    favoriteIcon () {
+    favoriteIcon() {
       return this.isOnWishlist ? 'favorite' : 'favorite_border'
     }
   },
   methods: {
-    onProductPriceUpdate (product) {
+    onProductPriceUpdate(product) {
       if (product.sku === this.product.sku) {
         Object.assign(this.product, product)
       }
     },
-    visibilityChanged (isVisible, entry) {
+    visibilityChanged(isVisible, entry) {
       if (isVisible) {
         if (
           config.products.configurableChildrenStockPrefetchDynamic &&
@@ -129,10 +127,10 @@ export default {
       }
     }
   },
-  beforeMount () {
+  beforeMount() {
     this.$bus.$on('product-after-priceupdate', this.onProductPriceUpdate)
   },
-  beforeDestroy () {
+  beforeDestroy() {
     this.$bus.$off('product-after-priceupdate', this.onProductPriceUpdate)
   }
 }
@@ -165,6 +163,7 @@ $color-white: color(white);
     padding-top: 10px;
     opacity: 0;
     z-index: 2;
+    transition: 0.3s opacity $motion-main;
     @media (max-width: 767px) {
       opacity: 1;
     }

From 66d73b816d940b5794cdd95c5077bb8eded085a9 Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Thu, 4 Jul 2019 12:44:27 +0200
Subject: [PATCH 04/11] Fixed CR comments

---
 CHANGELOG.md                                  | 117 +++++++++++++++---
 .../compare/components/RemoveFromCompare.ts   |  18 +--
 core/modules/compare/store/getters.ts         |   4 +-
 .../default/components/core/ProductTile.vue   |  16 +--
 4 files changed, 116 insertions(+), 39 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0c8be2f903..c484a94b63 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,5 @@
 # Changelog
+
 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/)
@@ -7,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.10.0-rc.1] - 2019.06.19
 
 ### Added
+
 - Make installer work for windows - @Flyingmana (#2616)
 - "Clear cart" button in the cart - @jablpiotrek (#2587)
 - Global config api path under `api.url` - @BartoszLiburski (#2622)
@@ -25,8 +27,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Products column change functionality - @vishal-7037 (#3017)
 - New Module order-history this provides the pagination via lazy laod - @hackbard (#2810)
 - OrderNumber on ThankYouPage - @Flyingmana (#2743)
+- Add icons on the product tiles that allow to add to the wish list and to the list to compare products from the list of products - @Michal-Dziedzinski (#2773)
 
 ### Removed
+
 - The getter `cart/totals` has ben replaced with `cart/getTotals` - @pkarw (#2522)
 - The getter `cart/coupon` has ben replaced with `cart/getCoupon` - @pkarw (#2522)
 - The getter `cart/totalQuantity` has ben replaced with `cart/getItemsTotalQuantity` - @pkarw (#2522)
@@ -38,6 +42,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Make all links with the primary color - @hackbard (#2932)
 
 ### Fixed
+
 - Back button on the Error page has been fixed - @pkarw (#3077)
 - Special price got zeroed - @pkarw (#2940)
 - Microcart tax + discount totals fix - @pkarw (#2892)
@@ -76,6 +81,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Back icon on product page causing inconsistent behavior - @patzick (#3056)
 
 ### Changed / Improved
+
 - The `cart/sync`, `cart/addItems`, `cart/removeItem` and `cart/updateQuantity` now returns the `diffLog` object with all the notifications, server statuses and items changed during the shopping cart sync
 - The `cart/addItem` is no longer displaying the error messages - please use the `diffLog.clientNorifications` to update the UI instead (take a look at the `AddToCart.ts` for a reference)
 - The action `cart/userAfterLoggedin` got renamed to `cart/authorize` - @pkarw (#2522)
@@ -87,7 +93,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Disabled the server cart sync in case user is in the checkout - @pkarw (#2749)
 - Improved ProductGalleryCarousel component to handle nonnumeric options id’s - @danieldomurad (#2586)
 - Number of displayed products is now visible on PLP on desktop - @awierzbiak (#2504)
-- Improved visibility of product SKU in wishlist  - @PanMisza (#2606)
+- Improved visibility of product SKU in wishlist - @PanMisza (#2606)
 - Instant focus to search input field after click on search icon in navbar - @ca1zr (#2608)
 - Login flow from authorized pages after session expired, show the modal with new error message and redirect after login - @gdomiciano, @natalledm (#2674)
 - Added support for the newest node version - @gdomiciano (#2669)
@@ -125,7 +131,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.9.2] - 2019.06.10
 
 ### Fixed
-- Instant Checkout visible on  Safari - @przspa (#2991)
+
+- Instant Checkout visible on Safari - @przspa (#2991)
 - Search Sidebar on Safari - @przspa (#2990)
 - Country label style - @przspa (#2989)
 - BaseInputNumber for qty of the product in the cart can change by using arrows - @przspa (#2988)
@@ -137,6 +144,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.9.1] - 2019.05.27
 
 ### Fixed
+
 - Remove security vulnerabilities by updating project dependencies - @patzick (#2942)
 - Fix Configurable Products not accessible in CSR when children visibility is set to "not visible individually" - @revlis-x (#2933)
 - ProductTile placeholders are visible on SSR - @patzick (#2939)
@@ -144,18 +152,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.9.0] - 2019.05.06
 
 ### Added
+
 - The Url Dispatcher feature added for friendly URLs. When `config.seo.useUrlDispatcher` set to true the `product.url_path` and `category.url_path` fields are used as absolute URL addresses (no `/c` and `/p` prefixes anymore). Check the latest `mage2vuestorefront` snapshot and reimport Your products to properly set `url_path` fields - #2010 - @pkarw
 - Unit tests of cart module written in jest - @lukeromanowicz (#2305)
 - validation for UTF8 alpha and alphanumeric characters in most checkout fields - @lromanowicz (#2653)
 - helper to process config urls with default endpoint host `config.api.host` - @patzick (#2858)
 
 ### Changed / Improved
+
 - The `core/helpers` parsing URL methods exchanged to `query-string` package - @pkarw (#2446)
 - Unit tests in Karma are now removed in favor of jest - @lukeromanowicz (#2305)
 - Material Icons are loaded asynchronously - @JKrupinski, @filrak (#2060)
 - Update to babel 7 - @lukeromanowicz (#2554)
 
 ### Fixed
+
 - For first time setup of the SSR Cache, a local cache-version.json file is required. The path has been removed from .gitignore and a template has been added. - @rio-vps
 - Gallery low quality image in offline mode when high quality already cached - @patzick (#2557)
 - Payment issue when no address set - @szafran89 (#2593)
@@ -189,28 +200,33 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.8.5] - 2019-04-17
 
 ### Fixed
+
 - Memory leaks on SSR with Vue.use - @patzick (#2745)
 
 ## [1.8.4] - 2019-03-26
 
 ### Fixed
+
 - Problem with incomplete category products load for offline use - @patzick (#2543)
 - Category products view crash on scrolling down in offline mode - @patzick (#2569)
-- Default propery issue for the col-xs-* classes - @cnviradiya (#2558)
+- Default propery issue for the col-xs-\* classes - @cnviradiya (#2558)
 - Wishlist and compare list not cached properly - @filrak (#2580)
 
 ### Changed / Improved
+
 - Category and Homepage products are now cached for offline use on SSR entry - @patzick (@1698)
 
 ## [1.8.3] - 2019-03-03
 
 ### Added
+
 - Payment Request API integration - @qiqqq (#2306)
 - New reactive helper to check online state. Usage: `import { onlineHelper } from '@vue-storefront/core/helpers'` and then `onlineHelper.isOnline` - @patzick (#2510)
 - Cart count config, allows you to display the item count instead of a sum of the item quantities - @pauluse (#2483)
 - Video support in Product Gallery component. - @rain2o (#2433)
 
 ### Fixed
+
 - Problem with placing second order (unbinding payment methods after first order) - @patzick (#2195, #2503)
 - Remaking order on user orders page - @patzick (#2480)
 - Images blinking on category page - @pkarw (#2523)
@@ -219,6 +235,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Non-integer qty of product added to the cart - @pkarw (#2517)
 
 ### Changed / Improved
+
 - Fixed an issue where the correct image for a product configuration wasn't set on the product page image carousel. Also added the fix on the productcarousel in the zoom component - @DaanKouters (#2419)
 - Way of creating VS Modules was changed to use factory method instead of explict object creation. - @filrak (#2434)
 - Added clear filters button on desktop also and only show if filters are applied - @DaanKouters (#2342)
@@ -248,23 +265,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Removed editing mode from My Newsletter section - @aniamusial (#2766)
 - Clicking Remake order now adds your items and redirects you to the checkout - @mikesheward (#2710)
 
-
 ### Deprecated / Removed
+
 - `@vue-storefront/store` package deprecated - @filrak
 
 ## [1.8.2] - 2019-02-11
+
 - Fixed docker-compose configuration for network_mode and TS build config - @lukeromanowicz (#2415)
 
 ## [1.8.1] - 2019-02-10
+
 This is hot-fix release for fixing the payment methods switching issue when both: `payments-cash-on-delivery` and `payments-backend-methods` modules enabled.
 
 ### Changed / Improved
- - Fixed doubled invlication of `placeOrder` when both: `payments-cash-on-delivery` and `payments-backend-methods` modules enabled - #2405
+
+- Fixed doubled invlication of `placeOrder` when both: `payments-cash-on-delivery` and `payments-backend-methods` modules enabled - #2405
 
 ## [1.8.0] - 2019-02-07
+
 Additional migration tips are available [here](https://github.com/DivanteLtd/vue-storefront/blob/master/docs/guide/upgrade-notes/README.md).
 
 ### Added
+
 - Chinese translation added - @wadereye (#2265)
 - Categories filter in search view - @kjugi, @patzick (#1710)
 - AsyncDataLoader feature - @pkarw (#2300)
@@ -277,6 +299,7 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 - Hotjar integration - @lukeromanowicz (#840)
 
 ### Changed / Improved
+
 - Theme structure improvements - @filrak (#2223)
 - Type interfaces and refactor - @filrak (#2227, #2267)
 - Changed beforeRegistration and afterRegistration hooks signature. Now it contains only one object VSF. The subfields are the same as before so changing `beforeRegistration( Vue, config, store, isServer )` to `beforeRegistration({ Vue, config, store, isServer })`(and same with `afterRegistration`) is enough to make a proper migration to new API. - @filrak (#2330)
@@ -292,7 +315,7 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 - `store/lib/search` has been moved to `core/lib/search` - @lukeromanowicz (#2225)
 - `store/lib/multistore` has been moved to `core/lib/multistore` - @lukeromanowicz (#2224)
 - BaseSelect syntax improvements - @jszczech (#2237)
-- Optional cart discounts display on  side cart - @mcspronko (#1758)
+- Optional cart discounts display on side cart - @mcspronko (#1758)
 - Special price dates checking - backport of @igloczek's (#2245)
 - Category filters reset functionality on mobile - @vue-kacper, @patzick, @renatocason (#2262)
 - Improve sortBy mobile view - @martaradziszewska (#2251)
@@ -325,12 +348,16 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 - Configurable options attribute descriptor - @pkarw (#2384)
 
 ## [1.7.3] - 2019-01-31
+
 ### Fixed
+
 - Output cache between build, cache versioning added - @igloczek (#2309)
 - Missing `no-ssr` wrapper around user specific content, which leads to broken app in production mode - @igloczek (#2314)
 
 ## [1.7.2] - 2019-01-28
+
 ### Fixed
+
 - clear search filters on mobile - @patzick (#2282)
 - SSR problem on checkout page on reload - @vue-kacper (#2220)
 - Improved offline mode handlers - @pkarw (#2217)
@@ -340,9 +367,11 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 - SSR detection in components - @patzick (#2173)
 
 ### Added
+
 - Hotjar extension (#840)
 
 ### Changed
+
 - compress banner images - @patzick (#2280)
 - Dynamic attributes loader (#2137)
 - Dynamic categories prefetching (#2076)
@@ -350,16 +379,21 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 - Support regional characters in urls - Backport of @aekal's (#2243)
 
 ### Added
+
 - Translations of banners - @patzick (#2276)
 - Banners title background on mobile - @patzick (#2272)
 - New main site look - @patzick (#2266)
 
 ## [1.7.1] - 2019-01-15
+
 ### Fixed
+
 - Corrected scrolled sidebar menu position
 
 ## [1.7.0] - 2019-01-15
+
 ### Added
+
 - Dynamic categories prefetching — @pkarw #2100
 - Per-route codesplitting for SSR pages — @patzick #2068
 - async/await support — @patzick #2092
@@ -373,6 +407,7 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 - Out of the box GZIP compression and sourcemap removal in prod mode — @patzick #2186
 
 ### Changed / Improved
+
 - Invalidate output cache using POST - @Cyclonecode #2084
 - NGNIX installation improvements for docs — @janmyszkier #2080
 - HTML semantics improvements — @patzick #2094
@@ -389,6 +424,7 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 - IndexedDb changed to LocalStorage + ServiceWorker native caching (#2112)
 
 ### Fixed
+
 - Fix Notification.vue compiling issue on prod - @ladrua #2079
 - Fix wishlist toggle bug — @shkodasv #2086
 - findConfigurableChildAsync — fix checking stock for configurable child — @afirlejczyk #2097
@@ -410,19 +446,24 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 - Fix Cart Configurable Item pulled from Magento loaded as Simple — @pkarw @valeriish #2169 #2181
 
 ### Depreciated
+
 - extendStore depreciation - @filrak #2143
 - ValidationError class depreciation - @filrak #2143
 
 ## [1.6.0] - 2018-12-05
+
 ### Added
+
 - Lazy loading for SSR and non-SSR routes
 - app splitted into modules
 
 ### Removed
+
 - `vsf-payment-stripe` module integration removed from core
 
 ### Changed
-- There is new config option `config.orders.directBackendSync` that changes the behavior of placing an order. Please do read  [more on this change](https://github.com/DivanteLtd/vue-storefront/commit/e73f2ca19a5d33a39f8b0fd6346543eced24167e) and [more on vue-storefront-api change](https://github.com/DivanteLtd/vue-storefront-api/commit/80c497f72362c72983db4fdcac14c8ba6f8729a8)
+
+- There is new config option `config.orders.directBackendSync` that changes the behavior of placing an order. Please do read [more on this change](https://github.com/DivanteLtd/vue-storefront/commit/e73f2ca19a5d33a39f8b0fd6346543eced24167e) and [more on vue-storefront-api change](https://github.com/DivanteLtd/vue-storefront-api/commit/80c497f72362c72983db4fdcac14c8ba6f8729a8)
 - ProductSlider, ProductLinks, ProductListing moved to theme.
 - Many theme-related logic moved to theme (+ deleted empty core components just with `name`)
 - Components required for backward compatibility moved to `compatibility` folder. For all this files you just need to add `compatibility` after `core` in import path to make them work like before.
@@ -437,6 +478,7 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 ## [1.5.0] - 2018-10-22
 
 ### Added
+
 - Contact form mailer - #1875 - Akbar Abdrakhmanov @akbarik
 - oauth2 configuration in setup - #1865 - Krister Andersson @Cyclonecode
 - GraphQL schema extendibility in the API - Yoann Vié
@@ -445,9 +487,11 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 - 'Apply' filters button on mobile category - #1709 - Damian Fiałkiewicz @Aekal
 
 ### Changed
+
 - New Modules API, and base modules (cart, wishlist, newsletter ...) refactored [read more...](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/api-modules/about-modules.md) - Filip Rakowski @filrak
 
 ### Fixed
+
 - The `regionId` field added to Order interface - #1258 - Jim Hil @jimcreate78
 - SSR Memory leaks fixed - #1882 Tomasz Duda @tomasz-duda
 - E2E tests fixed - #1861 - Patryk Tomczyk @patzik
@@ -459,6 +503,7 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 ## [1.4.0] - 2018-10-05
 
 ### Added
+
 - GraphQL support - #1616 - Yuri Boyko @yuriboyko, Vladimir Plastovets @VladimirPlastovets => [PHOENIX MEDIA](https://www.phoenix-media.eu/)
 - Layout switching + Advanced output mechanisms - #1787 - Piotr Karwatka @pkarw
 - Dynamic config reload - #1800 - Piotr Karwatka @pkarw
@@ -469,9 +514,11 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 - Console silent mode (disabled by default) - #1752 - Piotr Karwatka - @pkarw
 
 ### Changed
+
 - Please check the [Upgrade notes](https://github.com/DivanteLtd/vue-storefront/blob/develop/doc/Upgrade%20notes.md) for the full list
 
 ### Fixed
+
 - `docker-compose.yml` files updated - @kovinka
 - Non-core translations moved to theme resource files (i18n) - #1747 - David Rouyer @DavidRouyer
 - Non-core assets moved to the theme - #1739, #1740 - David Rouyer @DavidRouyer
@@ -485,6 +532,7 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 ## [1.3.0] - 2018-08-31
 
 ### Added
+
 - TypeScript support - please check [TypeScript Action Plan](https://github.com/DivanteLtd/vue-storefront/blob/master/docs/guide/basics/typescript.md) for details
 - New `core/modules` added regarding the [Refactor to modules plan](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/api-modules/refactoring-to-modules.md)
 - Price tier's support #1625
@@ -494,15 +542,18 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 - dynamic port allocation #1511
 
 ### Removed
+
 - unused `libs`, `components`, `core/api/cart` webpack aliases
 - `global.$VS` has been replaced with `rootStore` #1624
 
 ### Changed
+
 - `core` directory is now a `@vue-storefront/core` package, webpack alias and all related imports reflect this change [#1513]
 - `core/api` renamed to `core/modules`, mixin features moved to `core/modules/module_name/features`
 - `core/lib/i18n` moved into separate `@vue-storefront/i18n` package
 
 ### Fixed
+
 - installer paths are now normalized (to support paths including spaces) #1645
 - status check added to the configurable_children products #1639
 - product info update when clicking the related products #1601
@@ -517,12 +568,14 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 ## [1.2.0] - 2018-08-01
 
 ### Fixed
+
 - Improved integration tests [#1471]
 - Minor taxcalc.js improvements [#1467]
 - Search by SKU fixed [#1455]
 - ProductList dbl click fix [#1438]
 
 ### Added
+
 - Docker support for vue-storefront
 - Production config docs added [#1450]
 - Integration tests for Compare products added [#1422]
@@ -535,6 +588,7 @@ Additional migration tips are available [here](https://github.com/DivanteLtd/vue
 Please keep an eye on the **[UPGRADE NOTES](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/Upgrade%20notes.md)**
 
 ### Fixed
+
 - Zip Code validation [#1372]
 - Get inpspired block [#968]
 - Favicon [#836]
@@ -546,6 +600,7 @@ Please keep an eye on the **[UPGRADE NOTES](https://github.com/DivanteLtd/vue-st
 - IndexedDB locking issue
 
 ### Added
+
 - Added PM2 process manager [#1162]
 - Added billing data phone number support [#1338]
 - Added validation labels + generic control for CountrySelector [#1227]
@@ -557,47 +612,61 @@ Please keep an eye on the **[UPGRADE NOTES](https://github.com/DivanteLtd/vue-st
 - Production ready Docker config for vue-storefront-api
 
 ## [1.0.5] - 2018-06-04
+
 ### Fixed
+
 - Shipping region fix
 - Hotfix for missing config.storeViews.multistore check
 - Minor fixes
 
 ## [1.0.4] - 2018-06-02
+
 ### Fixed
+
 - defaultCountry fix for IT
 - Tax classes hotfix
 - tax_class_id is required by taxcalc - restored along with version inc
 - Minor fixes
 
 ## [1.0.3] - 2018-06-02
+
 ### Fixed
+
 - Minor fixes
 
 ## [1.0.2] - 2018-06-02
+
 ### Fixed
+
 - vue-storefront-stripe renamed to vsf-payment-stripe hotfix
 - Minor fixes
 
 ## [1.0.1] - 2018-05-31
+
 ### Fixed
+
 - Minor fixes
 
 ## [1.0.0] - 2018-05-30
+
 ### Added
-- __Multistore__ - now it's possible to manage the store views with all the features like translations, custom category, and products content, shipping rates - basically all Magento2 features are supported! You can read more on how to setup Multistore here.
-- __Bundle products__ - support for the Magento-like bundle products with all the custom options, pricing rules etc.
-- __Configurable options__ - that allows users to select radio/checkbox options + put some custom notes (textboxes) on the products they like to order,
-- __Crossell, Upsell, Related products__ - are now synchronized with Magento2,
-- __Webpack4 support__ - we've migrated from Webpack2 -> Webpack4 and now the build process takes much less time while providing some cool new features,
-- __Core components refactor__ - without changing APIs, we've stripped the core components from s to improve the performance and improve the code readability,
-- __PWA Manifest fixes__ - iOS PWA support required us to adjust some settings,
-- __Improved translations__ - we're constantly tweaking the translation files :) We've just added it-IT and pl-PL (finally!) support recently
-- __Improved Travis-CI pipeline__ - and added support for end-2-end testing,
-- __Lot of bugfixes + UX fixes__ - countless hours spent on improving the code and UI quality!
-- __Please check it out:__ visit: https://demo.vuestorefront.io/
+
+- **Multistore** - now it's possible to manage the store views with all the features like translations, custom category, and products content, shipping rates - basically all Magento2 features are supported! You can read more on how to setup Multistore here.
+- **Bundle products** - support for the Magento-like bundle products with all the custom options, pricing rules etc.
+- **Configurable options** - that allows users to select radio/checkbox options + put some custom notes (textboxes) on the products they like to order,
+- **Crossell, Upsell, Related products** - are now synchronized with Magento2,
+- **Webpack4 support** - we've migrated from Webpack2 -> Webpack4 and now the build process takes much less time while providing some cool new features,
+- **Core components refactor** - without changing APIs, we've stripped the core components from s to improve the performance and improve the code readability,
+- **PWA Manifest fixes** - iOS PWA support required us to adjust some settings,
+- **Improved translations** - we're constantly tweaking the translation files :) We've just added it-IT and pl-PL (finally!) support recently
+- **Improved Travis-CI pipeline** - and added support for end-2-end testing,
+- **Lot of bugfixes + UX fixes** - countless hours spent on improving the code and UI quality!
+- **Please check it out:** visit: https://demo.vuestorefront.io/
 
 ## [1.0.0-rc.3] - 2018-04-29
+
 ### Added
+
 - Performance tweaks: improved service worker config, reduced JSONs, two-stage caching,
 - User token auto refresh,
 - My Account fixes
@@ -610,7 +679,9 @@ Please keep an eye on the **[UPGRADE NOTES](https://github.com/DivanteLtd/vue-st
 - Product and Category page refactoring
 
 ## [1.0.0-rc.2] - 2018-03-29
+
 ### Added
+
 - Basic Magento 1.9 support,
 - Translations: ES, DE, NL, FR
 - Lerna support for managing the npm packages within the one repository,
@@ -623,7 +694,9 @@ Please keep an eye on the **[UPGRADE NOTES](https://github.com/DivanteLtd/vue-st
 - Other fixes.
 
 ## [1.0.0-rc.0] - 2018-03-01
+
 ### Added
+
 - i18n (internationalization) support for the UI,
 - Support for Magento2 dynamic cart totals - which enables the shopping cart rules mechanism of Magento to work with VS,
 - ESlint-plugin-vue installed,
@@ -637,7 +710,9 @@ Please keep an eye on the **[UPGRADE NOTES](https://github.com/DivanteLtd/vue-st
 - Droppoints shipping methods (NL support) added.
 
 ## [0.4.0] - 2018-01-28
+
 ### Added
+
 - Improved theming support + B2B product catalog theme included (original github repo); it's PoC made in just one week! Isn't it amazing that you can customize VS in just one week to this extent? :)
 - Pimcore support (more on this, github repo)
 - Customer's dashboard + address book, integration with Checkout
@@ -652,7 +727,9 @@ Please keep an eye on the **[UPGRADE NOTES](https://github.com/DivanteLtd/vue-st
 - Lot of smaller tweaks
 
 ## [0.3.0] - 2017-12-21
+
 ### Added
+
 - Bundle products support,
 - Tax calculation regarding the Magento's logic for different rates per countries, states.
 - User registration, log-in, password reset
@@ -670,7 +747,9 @@ Please keep an eye on the **[UPGRADE NOTES](https://github.com/DivanteLtd/vue-st
 - Updated installer with support for Linux and MacOSX
 
 ## [0.2.1-alpha.0] - 2017-11-16
+
 ### Added
+
 - Homepage
 - Category page
 - Product page
@@ -685,5 +764,7 @@ Please keep an eye on the **[UPGRADE NOTES](https://github.com/DivanteLtd/vue-st
 - RWD (except some checkout issues to be fixed)
 
 ## [0.2.0-alpha.0] - 2017-11-15
+
 ### Fixed
+
 - Lazy loaded blocks size fixed
diff --git a/core/modules/compare/components/RemoveFromCompare.ts b/core/modules/compare/components/RemoveFromCompare.ts
index 56ce0fba91..9e3eff9299 100644
--- a/core/modules/compare/components/RemoveFromCompare.ts
+++ b/core/modules/compare/components/RemoveFromCompare.ts
@@ -1,20 +1,14 @@
-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'
+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)
+      CompareModule.register();
+      this.$store.dispatch('compare/removeItem', product);
     }
   }
-}
+};
diff --git a/core/modules/compare/store/getters.ts b/core/modules/compare/store/getters.ts
index 79213a865c..5dfea67da0 100644
--- a/core/modules/compare/store/getters.ts
+++ b/core/modules/compare/store/getters.ts
@@ -4,8 +4,8 @@ import CompareState from '../types/CompareState';
 
 const getters: GetterTree<CompareState, RootState> = {
   isEmpty: state => state.items.length === 0,
-  isToCompare: state => product => state.items.find(p => p.sku === product.sku),
-  isCompareLoaded: state => state.loaded
+  isCompareLoaded: state => state.loaded,
+  isToCompare: state => product => state.items.find(p => p.sku === product.sku)
 };
 
 export default getters;
diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
index e8b3a630ff..197f7f8596 100644
--- a/src/themes/default/components/core/ProductTile.vue
+++ b/src/themes/default/components/core/ProductTile.vue
@@ -37,7 +37,9 @@
         />
       </div>
 
-      <p class="mb0 cl-accent mt10" v-if="!onlyImage">{{ product.name | htmlDecode }}</p>
+      <p class="mb0 cl-accent mt10" v-if="!onlyImage">
+        {{ product.name | htmlDecode }}
+      </p>
 
       <span
         class="price-original mr5 lh30 cl-secondary"
@@ -85,23 +87,23 @@ export default {
     }
   },
   computed: {
-    thumbnailObj() {
+    thumbnailObj () {
       return {
         src: this.thumbnail,
         loading: this.thumbnail
       }
     },
-    favoriteIcon() {
+    favoriteIcon () {
       return this.isOnWishlist ? 'favorite' : 'favorite_border'
     }
   },
   methods: {
-    onProductPriceUpdate(product) {
+    onProductPriceUpdate (product) {
       if (product.sku === this.product.sku) {
         Object.assign(this.product, product)
       }
     },
-    visibilityChanged(isVisible, entry) {
+    visibilityChanged (isVisible, entry) {
       if (isVisible) {
         if (
           config.products.configurableChildrenStockPrefetchDynamic &&
@@ -127,10 +129,10 @@ export default {
       }
     }
   },
-  beforeMount() {
+  beforeMount () {
     this.$bus.$on('product-after-priceupdate', this.onProductPriceUpdate)
   },
-  beforeDestroy() {
+  beforeDestroy () {
     this.$bus.$off('product-after-priceupdate', this.onProductPriceUpdate)
   }
 }

From 2860214bb7742ade26bf56df5f0d229d51dd55ec Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Fri, 5 Jul 2019 07:38:09 +0200
Subject: [PATCH 05/11] Change isToCompare to isOnCompare

---
 .../compare/components/{IsToCompare.ts => IsOnCompare.ts} | 8 ++++----
 core/modules/compare/components/Product.ts                | 4 ++--
 core/modules/compare/store/getters.ts                     | 2 +-
 docs/guide/components/product.md                          | 2 +-
 src/themes/default/components/core/ProductTile.vue        | 8 ++++----
 .../components/core/blocks/Compare/AddToCompare.vue       | 8 ++++----
 6 files changed, 16 insertions(+), 16 deletions(-)
 rename core/modules/compare/components/{IsToCompare.ts => IsOnCompare.ts} (82%)

diff --git a/core/modules/compare/components/IsToCompare.ts b/core/modules/compare/components/IsOnCompare.ts
similarity index 82%
rename from core/modules/compare/components/IsToCompare.ts
rename to core/modules/compare/components/IsOnCompare.ts
index 4532afcbd5..5ddcd15238 100644
--- a/core/modules/compare/components/IsToCompare.ts
+++ b/core/modules/compare/components/IsOnCompare.ts
@@ -1,8 +1,8 @@
 import { Compare as CompareModule } from '..';
 import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin';
 
-export const IsToCompare = {
-  name: 'isToCompare',
+export const IsOnCompare = {
+  name: 'IsOnCompare',
   mixins: [compareMountedMixin],
   props: {
     product: {
@@ -10,11 +10,11 @@ export const IsToCompare = {
       type: Object
     }
   },
-  created () {
+  created() {
     CompareModule.register();
   },
   computed: {
-    isToCompare (): boolean {
+    isOnCompare(): boolean {
       return (
         !!this.$store.state.compare.items.find(
           p => p.sku === this.product.sku
diff --git a/core/modules/compare/components/Product.ts b/core/modules/compare/components/Product.ts
index 980ce72287..07e2a565f5 100644
--- a/core/modules/compare/components/Product.ts
+++ b/core/modules/compare/components/Product.ts
@@ -5,8 +5,8 @@ export const CompareProduct = {
   name: 'CompareProduct',
   mixins: [compareMountedMixin],
   computed: {
-    isToCompare (): boolean {
-      return this.$store.getters['compare/isToCompare'](this.product)
+    isOnCompare (): boolean {
+      return this.$store.getters['compare/isOnCompare'](this.product)
     }
   },
   methods: {
diff --git a/core/modules/compare/store/getters.ts b/core/modules/compare/store/getters.ts
index 90f316b12c..ca2c0d15a0 100644
--- a/core/modules/compare/store/getters.ts
+++ b/core/modules/compare/store/getters.ts
@@ -4,7 +4,7 @@ import CompareState from '../types/CompareState';
 
 const getters: GetterTree<CompareState, RootState> = {
   isEmpty: state => state.items.length === 0,
-  isToCompare: state => product => state.items.find(p => p.sku === product.sku),
+  isOnCompare: state => product => state.items.find(p => p.sku === product.sku),
   isCompareLoaded: state => state.loaded,
   getCompareProductsCount: state => state.items.length
 };
diff --git a/docs/guide/components/product.md b/docs/guide/components/product.md
index 1026968412..b8eb05eace 100644
--- a/docs/guide/components/product.md
+++ b/docs/guide/components/product.md
@@ -20,7 +20,7 @@ No props
 - `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.
-- `isToCompare` - A computed property that checks if a given product is in compare list.
+- `isOnCompare` - 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.
 
diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
index 197f7f8596..30a922ec94 100644
--- a/src/themes/default/components/core/ProductTile.vue
+++ b/src/themes/default/components/core/ProductTile.vue
@@ -13,8 +13,8 @@
       <AddToCompare :product="product">
         <div
           class="product__icon"
-          :class="{'product__icon--active':isToCompare } "
-          :title="isToCompare ? $t('Remove from compare') : $t('Add to compare')"
+          :class="{'product__icon--active':isOnCompare } "
+          :title="isOnCompare ? $t('Remove from compare') : $t('Add to compare')"
         >
           <i class="material-icons">compare</i>
         </div>
@@ -67,10 +67,10 @@ import ProductImage from './ProductImage'
 import AddToWishlist from 'theme/components/core/blocks/Wishlist/AddToWishlist'
 import AddToCompare from 'theme/components/core/blocks/Compare/AddToCompare'
 import { IsOnWishlist } from '@vue-storefront/core/modules/wishlist/components/IsOnWishlist'
-import { IsToCompare } from '@vue-storefront/core/modules/compare/components/IsToCompare'
+import { IsOnCompare } from '@vue-storefront/core/modules/compare/components/IsOnCompare'
 
 export default {
-  mixins: [ProductTile, IsOnWishlist, IsToCompare],
+  mixins: [ProductTile, IsOnWishlist, IsOnCompare],
   components: {
     ProductImage,
     AddToWishlist,
diff --git a/src/themes/default/components/core/blocks/Compare/AddToCompare.vue b/src/themes/default/components/core/blocks/Compare/AddToCompare.vue
index f8cc974b02..da996729f5 100644
--- a/src/themes/default/components/core/blocks/Compare/AddToCompare.vue
+++ b/src/themes/default/components/core/blocks/Compare/AddToCompare.vue
@@ -1,13 +1,13 @@
 <template>
   <button
-    @click="isToCompare ? removeFromCompare(product) : addToCompare(product)"
+    @click="isOnCompare ? removeFromCompare(product) : addToCompare(product)"
     class="p0 inline-flex middle-xs bg-cl-transparent brdr-none action h5 pointer cl-secondary"
     type="button"
     data-testid="addToCompare"
   >
     <slot>
       <i class="pr5 material-icons">compare</i>
-      <template v-if="!isToCompare">
+      <template v-if="!isOnCompare">
         {{ $t('Add to compare') }}
       </template>
       <template v-else>
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { IsToCompare } from '@vue-storefront/core/modules/compare/components/IsToCompare'
+import { IsOnCompare } from '@vue-storefront/core/modules/compare/components/IsOnCompare'
 import { AddToCompare } from '@vue-storefront/core/modules/compare/components/AddToCompare'
 import { RemoveFromCompare } from '@vue-storefront/core/modules/compare/components/RemoveFromCompare'
 
 export default {
-  mixins: [IsToCompare, AddToCompare, RemoveFromCompare]
+  mixins: [IsOnCompare, AddToCompare, RemoveFromCompare]
 }
 </script>

From 55b7e65111589e6771def3759cbe64ceaa2c1605 Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Fri, 5 Jul 2019 08:03:19 +0200
Subject: [PATCH 06/11] Deleted commented fragment of code and added extra line

---
 core/modules/compare/components/IsOnCompare.ts    | 4 ++--
 src/themes/default-amp/components/core/Header.vue | 1 +
 src/themes/default/pages/Compare.vue              | 3 ---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/core/modules/compare/components/IsOnCompare.ts b/core/modules/compare/components/IsOnCompare.ts
index 5ddcd15238..8b84666577 100644
--- a/core/modules/compare/components/IsOnCompare.ts
+++ b/core/modules/compare/components/IsOnCompare.ts
@@ -10,11 +10,11 @@ export const IsOnCompare = {
       type: Object
     }
   },
-  created() {
+  created () {
     CompareModule.register();
   },
   computed: {
-    isOnCompare(): boolean {
+    isOnCompare (): boolean {
       return (
         !!this.$store.state.compare.items.find(
           p => p.sku === this.product.sku
diff --git a/src/themes/default-amp/components/core/Header.vue b/src/themes/default-amp/components/core/Header.vue
index 25e7c31ef0..4eb4854bbb 100755
--- a/src/themes/default-amp/components/core/Header.vue
+++ b/src/themes/default-amp/components/core/Header.vue
@@ -42,6 +42,7 @@
                 @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>
diff --git a/src/themes/default/pages/Compare.vue b/src/themes/default/pages/Compare.vue
index 61965a5bc5..074e7ce644 100644
--- a/src/themes/default/pages/Compare.vue
+++ b/src/themes/default/pages/Compare.vue
@@ -38,9 +38,6 @@
                   <div class="compare__top-info">
                     <div class="check" />
                     <product-tile class="col-md-12 collection-product" :product="product" />
-                    <!-- <span class="compare__remove" @click="removeFromCompare(product)">
-                      <remove-button />
-                    </span>-->
                   </div>
                   <ul class="compare__features-list">
                     <li class="compare__features-item">

From 7b1707e2837212c3d8ff4d54777715b11cf9e902 Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Fri, 5 Jul 2019 08:42:01 +0200
Subject: [PATCH 07/11] Refactor visibilityCHanged method (number of nasted if)

---
 .../default/components/core/ProductTile.vue   | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
index 30a922ec94..dc212315a9 100644
--- a/src/themes/default/components/core/ProductTile.vue
+++ b/src/themes/default/components/core/ProductTile.vue
@@ -104,28 +104,24 @@ export default {
       }
     },
     visibilityChanged (isVisible, entry) {
-      if (isVisible) {
-        if (
-          config.products.configurableChildrenStockPrefetchDynamic &&
-          rootStore.products.filterUnavailableVariants
-        ) {
-          const skus = [this.product.sku]
-          if (
-            this.product.type_id === 'configurable' &&
-            this.product.configurable_children &&
-            this.product.configurable_children.length > 0
-          ) {
-            for (const confChild of this.product.configurable_children) {
-              const cachedItem = rootStore.state.stock.cache[confChild.id]
-              if (typeof cachedItem === 'undefined' || cachedItem === null) {
-                skus.push(confChild.sku)
-              }
-            }
-            if (skus.length > 0) {
-              rootStore.dispatch('stock/list', { skus: skus }) // store it in the cache
-            }
+      if (
+        isVisible &&
+        config.products.configurableChildrenStockPrefetchDynamic &&
+        rootStore.products.filterUnavailableVariants &&
+        this.product.type_id === 'configurable' &&
+        this.product.configurable_children &&
+        this.product.configurable_children.length > 0
+      ) {
+        const skus = [this.product.sku]
+        for (const confChild of this.product.configurable_children) {
+          const cachedItem = rootStore.state.stock.cache[confChild.id]
+          if (typeof cachedItem === 'undefined' || cachedItem === null) {
+            skus.push(confChild.sku)
           }
         }
+        if (skus.length > 0) {
+          rootStore.dispatch('stock/list', { skus: skus }) // store it in the cache
+        }
       }
     }
   },

From 5859f1e59f7eae3a24bb70bb6a75dbd1bb5f5476 Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Tue, 16 Jul 2019 09:03:28 +0200
Subject: [PATCH 08/11] Remove semicolons

---
 core/modules/compare/components/IsOnCompare.ts | 14 +++++++-------
 core/modules/compare/store/getters.ts          | 10 +++++-----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/core/modules/compare/components/IsOnCompare.ts b/core/modules/compare/components/IsOnCompare.ts
index 8b84666577..1a179ce734 100644
--- a/core/modules/compare/components/IsOnCompare.ts
+++ b/core/modules/compare/components/IsOnCompare.ts
@@ -1,5 +1,5 @@
-import { Compare as CompareModule } from '..';
-import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin';
+import { Compare as CompareModule } from '..'
+import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin'
 
 export const IsOnCompare = {
   name: 'IsOnCompare',
@@ -10,16 +10,16 @@ export const IsOnCompare = {
       type: Object
     }
   },
-  created () {
-    CompareModule.register();
+  created() {
+    CompareModule.register()
   },
   computed: {
-    isOnCompare (): boolean {
+    isOnCompare(): boolean {
       return (
         !!this.$store.state.compare.items.find(
           p => p.sku === this.product.sku
         ) || false
-      );
+      )
     }
   }
-};
+}
diff --git a/core/modules/compare/store/getters.ts b/core/modules/compare/store/getters.ts
index ca2c0d15a0..4f09a9ce40 100644
--- a/core/modules/compare/store/getters.ts
+++ b/core/modules/compare/store/getters.ts
@@ -1,12 +1,12 @@
-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,
   isOnCompare: state => product => state.items.find(p => p.sku === product.sku),
   isCompareLoaded: state => state.loaded,
   getCompareProductsCount: state => state.items.length
-};
+}
 
-export default getters;
+export default getters

From 548cca0c938d5946c44108a6dd4d0c1247b41614 Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Tue, 16 Jul 2019 10:53:06 +0200
Subject: [PATCH 09/11] Fix changelog file, move isOnCompare and isOnWishlist
 to getters

---
 CHANGELOG.md                                  |  2 +-
 .../modules/compare/components/IsOnCompare.ts | 10 +++----
 .../wishlist/components/IsOnWishlist.ts       |  4 +--
 core/modules/wishlist/store/getters.ts        | 12 ++++++++
 core/modules/wishlist/store/index.ts          |  6 ++--
 .../default/components/core/ProductTile.vue   | 28 ++++++++-----------
 6 files changed, 32 insertions(+), 30 deletions(-)
 create mode 100644 core/modules/wishlist/store/getters.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index af33a863ed..0e9de52083 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Default storeview settings are now overridden by specific storeview settings - @lukeromanowicz (#3057)
 - Apache2 proxy header support for store based on host - @resubaka (#3143)
 - Items count badges for Compare products and wishlist icons at header - @vishal-7037 (#3047)
+- Add icons on the product tiles that allow to add to the wish list and to the list to compare products from the list of products - @Michal-Dziedzinski (#2773)
 
 ### Fixed
 
@@ -78,7 +79,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Products column change functionality - @vishal-7037 (#3017)
 - New Module order-history this provides the pagination via lazy laod - @hackbard (#2810)
 - OrderNumber on ThankYouPage - @Flyingmana (#2743)
-- Add icons on the product tiles that allow to add to the wish list and to the list to compare products from the list of products - @Michal-Dziedzinski (#2773)
 
 ### Removed
 
diff --git a/core/modules/compare/components/IsOnCompare.ts b/core/modules/compare/components/IsOnCompare.ts
index 131cdfeb09..4f6d37cad5 100644
--- a/core/modules/compare/components/IsOnCompare.ts
+++ b/core/modules/compare/components/IsOnCompare.ts
@@ -1,3 +1,5 @@
+// import { IsOnCompare } from './IsOnCompare';
+// import { mapGetters } from 'vuex'
 import { Compare as CompareModule } from '..'
 import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin'
 
@@ -14,12 +16,8 @@ export const IsOnCompare = {
     CompareModule.register()
   },
   computed: {
-    isOnCompare (): boolean {
-      return (
-        !!this.$store.state.compare.items.find(
-          p => p.sku === this.product.sku
-        ) || false
-      )
+    isOnCompare () {
+      return this.$store.getters['compare/isOnCompare'](this.product)
     }
   }
 }
diff --git a/core/modules/wishlist/components/IsOnWishlist.ts b/core/modules/wishlist/components/IsOnWishlist.ts
index 8319b723c4..10559bf10b 100644
--- a/core/modules/wishlist/components/IsOnWishlist.ts
+++ b/core/modules/wishlist/components/IsOnWishlist.ts
@@ -14,8 +14,8 @@ export const IsOnWishlist = {
     WishlistModule.register()
   },
   computed: {
-    isOnWishlist (): boolean {
-      return !!this.$store.state.wishlist.items.find(p => p.sku === this.product.sku) || false
+    isOnWishlist () {
+      return this.$store.getters['wishlist/isOnWishlist'](this.product)
     }
   }
 }
diff --git a/core/modules/wishlist/store/getters.ts b/core/modules/wishlist/store/getters.ts
new file mode 100644
index 0000000000..5d03b1b7ca
--- /dev/null
+++ b/core/modules/wishlist/store/getters.ts
@@ -0,0 +1,12 @@
+import { GetterTree } from 'vuex'
+import RootState from '@vue-storefront/core/types/RootState'
+import WishlistState from '../types/WishlistState'
+
+const getters: GetterTree<WishlistState, RootState> = {
+  isOnWishlist: state => product =>
+    state.items.find(p => p.sku === product.sku),
+  isWishlistLoaded: state => state.loaded,
+  getWishlistItemsCount: state => state.items.length
+}
+
+export default getters
diff --git a/core/modules/wishlist/store/index.ts b/core/modules/wishlist/store/index.ts
index b5238713fe..1f6c11848b 100644
--- a/core/modules/wishlist/store/index.ts
+++ b/core/modules/wishlist/store/index.ts
@@ -1,6 +1,7 @@
 import { Module } from 'vuex'
 import actions from './actions'
 import mutations from './mutations'
+import getters from './getters'
 import RootState from '@vue-storefront/core/types/RootState'
 import WishlistState from '../types/WishlistState'
 
@@ -12,8 +13,5 @@ export const module: Module<WishlistState, RootState> = {
   },
   actions,
   mutations,
-  getters: {
-    isWishlistLoaded: state => state.loaded,
-    getWishlistItemsCount: (state) => state.items.length
-  }
+  getters
 }
diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
index 82b263431d..3a5d8f8f19 100644
--- a/src/themes/default/components/core/ProductTile.vue
+++ b/src/themes/default/components/core/ProductTile.vue
@@ -45,23 +45,17 @@
       <span
         class="price-original mr5 lh30 cl-secondary"
         v-if="product.special_price && parseFloat(product.original_price_incl_tax) > 0 && !onlyImage"
-      >
-        {{ product.original_price_incl_tax | price }}
-      </span>
+      >{{ product.original_price_incl_tax | price }}</span>
 
       <span
         class="price-special lh30 cl-accent weight-700"
         v-if="product.special_price && parseFloat(product.special_price) > 0 && !onlyImage"
-      >
-        {{ product.price_incl_tax | price }}
-      </span>
+      >{{ product.price_incl_tax | price }}</span>
 
       <span
         class="lh30 cl-secondary"
         v-if="!product.special_price && parseFloat(product.price_incl_tax) > 0 && !onlyImage"
-      >
-        {{ product.price_incl_tax | price }}
-      </span>
+      >{{ product.price_incl_tax | price }}</span>
     </router-link>
   </div>
 </template>
@@ -202,20 +196,20 @@ $color-white: color(white);
   font-size: 12px;
 }
 
-.product-cover{
+.product-cover {
   overflow: hidden;
   max-height: 300px;
-  &__thumb{
+  &__thumb {
     padding-bottom: calc(143.88% / (164.5 / 100));
-    @media screen and (min-width: 768px){
+    @media screen and (min-width: 768px) {
       padding-bottom: calc(300% / (276.5 / 100));
     }
-    opacity: .8;
+    opacity: 0.8;
     will-change: opacity, transform;
-    transition: .3s opacity $motion-main, .3s transform $motion-main;
+    transition: 0.3s opacity $motion-main, 0.3s transform $motion-main;
   }
-  &:hover{
-    .product-cover__thumb{
+  &:hover {
+    .product-cover__thumb {
       opacity: 1;
       transform: scale(1.1);
     }
@@ -224,7 +218,7 @@ $color-white: color(white);
       opacity: 0.8;
     }
   }
-  &.sale{
+  &.sale {
     &::after {
       @extend %label;
       content: 'Sale';

From 9a186e790caa5895bd319a05fdfdf8dd717546d0 Mon Sep 17 00:00:00 2001
From: Michal-Dziedzinski <michal.marcin.dziedzinski@gmail.com>
Date: Wed, 17 Jul 2019 09:19:22 +0200
Subject: [PATCH 10/11] Change find to some in wishlist and compare getters

---
 core/modules/compare/components/IsOnCompare.ts | 2 --
 core/modules/compare/store/getters.ts          | 2 +-
 core/modules/wishlist/store/getters.ts         | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/core/modules/compare/components/IsOnCompare.ts b/core/modules/compare/components/IsOnCompare.ts
index 4f6d37cad5..0a627a2246 100644
--- a/core/modules/compare/components/IsOnCompare.ts
+++ b/core/modules/compare/components/IsOnCompare.ts
@@ -1,5 +1,3 @@
-// import { IsOnCompare } from './IsOnCompare';
-// import { mapGetters } from 'vuex'
 import { Compare as CompareModule } from '..'
 import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin'
 
diff --git a/core/modules/compare/store/getters.ts b/core/modules/compare/store/getters.ts
index 4f09a9ce40..e69ffaa073 100644
--- a/core/modules/compare/store/getters.ts
+++ b/core/modules/compare/store/getters.ts
@@ -4,7 +4,7 @@ import CompareState from '../types/CompareState'
 
 const getters: GetterTree<CompareState, RootState> = {
   isEmpty: state => state.items.length === 0,
-  isOnCompare: state => product => state.items.find(p => p.sku === product.sku),
+  isOnCompare: state => product => state.items.some(p => p.sku === product.sku),
   isCompareLoaded: state => state.loaded,
   getCompareProductsCount: state => state.items.length
 }
diff --git a/core/modules/wishlist/store/getters.ts b/core/modules/wishlist/store/getters.ts
index 5d03b1b7ca..f7708ca2a9 100644
--- a/core/modules/wishlist/store/getters.ts
+++ b/core/modules/wishlist/store/getters.ts
@@ -4,7 +4,7 @@ import WishlistState from '../types/WishlistState'
 
 const getters: GetterTree<WishlistState, RootState> = {
   isOnWishlist: state => product =>
-    state.items.find(p => p.sku === product.sku),
+    state.items.some(p => p.sku === product.sku),
   isWishlistLoaded: state => state.loaded,
   getWishlistItemsCount: state => state.items.length
 }

From 9ccce52d7b20e4c09e39c7d3b64e10875f0ade01 Mon Sep 17 00:00:00 2001
From: patzick <tomczyk.patryk@gmail.com>
Date: Thu, 18 Jul 2019 09:41:24 +0200
Subject: [PATCH 11/11] fix registering compare module

---
 core/modules/compare/components/AddToCompare.ts      | 5 +++--
 core/modules/compare/components/IsOnCompare.ts       | 5 +++--
 core/modules/compare/components/RemoveFromCompare.ts | 5 +++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/core/modules/compare/components/AddToCompare.ts b/core/modules/compare/components/AddToCompare.ts
index 1d40b8c03a..51ee030ac2 100644
--- a/core/modules/compare/components/AddToCompare.ts
+++ b/core/modules/compare/components/AddToCompare.ts
@@ -1,6 +1,7 @@
 import Product from '@vue-storefront/core/modules/catalog/types/Product'
-import { Compare as CompareModule } from '../'
+import { CompareModule } from '../'
 import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin'
+import { registerModule } from '@vue-storefront/module';
 
 export const AddToCompare = {
   name: 'AddToCompare',
@@ -12,7 +13,7 @@ export const AddToCompare = {
     }
   },
   created () {
-    CompareModule.register()
+    registerModule(CompareModule)
   },
   methods: {
     addToCompare (product: Product) {
diff --git a/core/modules/compare/components/IsOnCompare.ts b/core/modules/compare/components/IsOnCompare.ts
index 0a627a2246..953d775e1b 100644
--- a/core/modules/compare/components/IsOnCompare.ts
+++ b/core/modules/compare/components/IsOnCompare.ts
@@ -1,5 +1,6 @@
-import { Compare as CompareModule } from '..'
+import { CompareModule } from '..'
 import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin'
+import { registerModule } from '@vue-storefront/module';
 
 export const IsOnCompare = {
   name: 'IsOnCompare',
@@ -11,7 +12,7 @@ export const IsOnCompare = {
     }
   },
   created () {
-    CompareModule.register()
+    registerModule(CompareModule)
   },
   computed: {
     isOnCompare () {
diff --git a/core/modules/compare/components/RemoveFromCompare.ts b/core/modules/compare/components/RemoveFromCompare.ts
index 9e3eff9299..4fc06dc960 100644
--- a/core/modules/compare/components/RemoveFromCompare.ts
+++ b/core/modules/compare/components/RemoveFromCompare.ts
@@ -1,13 +1,14 @@
 import Product from '@vue-storefront/core/modules/catalog/types/Product';
-import { Compare as CompareModule } from '..';
+import { CompareModule } from '..';
 import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin';
+import { registerModule } from '@vue-storefront/module';
 
 export const RemoveFromCompare = {
   name: 'RemoveFromCompare',
   mixins: [compareMountedMixin],
   methods: {
     removeFromCompare (product: Product) {
-      CompareModule.register();
+      registerModule(CompareModule)
       this.$store.dispatch('compare/removeItem', product);
     }
   }