Merged with feture/#2773

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)
 - Get also none product image thumbnails via API - @cewald, @resubaka (#3207)
 - Added a config option `optimizeShoppingCartOmitFields` - @EmilsM (#3222)
 - Added information on the number of available products - @Michal-Dziedzinski (#2733)

core/modules/compare/components/IsOnCompare.ts

@@ -0,0 +1,21 @@
+import { Compare as CompareModule } from '..'
+import compareMountedMixin from '@vue-storefront/core/modules/compare/mixins/compareMountedMixin'
+
+export const IsOnCompare = {
+  name: 'IsOnCompare',
+  mixins: [compareMountedMixin],
+  props: {
+    product: {
+      required: true,
+      type: Object
+    }
+  },
+  created () {
+    CompareModule.register()
+  },
+  computed: {
+    isOnCompare () {
+      return this.$store.getters['compare/isOnCompare'](this.product)
+    }
+  }
+}

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: {

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);
     }
   }
-}
+};

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
 }

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)
     }
   }
 }

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.some(p => p.sku === product.sku),
+  isWishlistLoaded: state => state.loaded,
+  getWishlistItemsCount: state => state.items.length
+}
+
+export default getters

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
 }

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.
 

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>

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>
@@ -68,10 +68,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,
@@ -105,28 +105,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
+        }
       }
     }
   },

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>

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">