fix: clicking Add To Wishlist icon closes search modal (#6457)

* fix: clicking Add To Wishlist icon closes search modal * fix: missing adding/removing a product to/from the wishlist in SearchRes * fix: class name instead tag name
vuestorefront · Oct 19, 2021 · 9965e6f · 9965e6f
1 parent e31b585
commit 9965e6f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/packages/commercetools/theme/components/AppHeader.vue b/packages/commercetools/theme/components/AppHeader.vue
@@ -166,7 +166,9 @@ export default {
     };
 
     const closeSearch = () => {
-      if (!isSearchOpen.value) return;
+      const wishlistClassName = 'sf-product-card__wishlist-icon';
+      const isWishlistIconClicked = event.path.find(p => wishlistClassName.search(p.className) > 0);
+      if (isWishlistIconClicked || !isSearchOpen.value) return;
 
       term.value = '';
       isSearchOpen.value = false;

diff --git a/packages/core/docs/changelog/6457.js b/packages/core/docs/changelog/6457.js
@@ -0,0 +1,8 @@
+module.exports = {
+  description: 'Fixed closes search modal after clicking Add To Wishlist icon.',
+  link: 'https://github.com/vuestorefront/vue-storefront/pull/6457',
+  isBreaking: false,
+  breakingChanges: [],
+  author: 'Łukasz Jędrasik',
+  linkToGitHubAccount: 'https://github.com/lukaszjedrasik'
+};
diff --git a/packages/core/nuxt-theme-module/theme/components/AppHeader.vue b/packages/core/nuxt-theme-module/theme/components/AppHeader.vue
@@ -164,7 +164,9 @@ export default {
     };
 
     const closeSearch = () => {
-      if (!isSearchOpen.value) return;
+      const wishlistClassName = 'sf-product-card__wishlist-icon';
+      const isWishlistIconClicked = event.path.find(p => wishlistClassName.search(p.className) > 0);
+      if (isWishlistIconClicked || !isSearchOpen.value) return;
 
       term.value = '';
       isSearchOpen.value = false;

diff --git a/packages/core/nuxt-theme-module/theme/components/SearchResults.vue b/packages/core/nuxt-theme-module/theme/components/SearchResults.vue
@@ -46,6 +46,8 @@
                   :alt="productGetters.getName(product)"
                   :title="productGetters.getName(product)"
                   :link="localePath(`/p/${productGetters.getId(product)}/${productGetters.getSlug(product)}`)"
+                  :is-in-wishlist="isInWishlist({ product })"
+                  @click:wishlist="!isInWishlist({ product }) ? addItemToWishlist({ product }) : removeProductFromWishlist(product)"
                 />
               </div>
             </SfScrollable>
@@ -61,6 +63,8 @@
                 :alt="productGetters.getName(product)"
                 :title="productGetters.getName(product)"
                 :link="localePath(`/p/${productGetters.getId(product)}/${productGetters.getSlug(product)}`)"
+                :is-in-wishlist="isInWishlist({ product })"
+                @click:wishlist="!isInWishlist({ product }) ? addItemToWishlist({ product }) : removeProductFromWishlist(product)"
               />
             </div>
           </SfMegaMenuColumn>
@@ -95,7 +99,7 @@ import {
   SfImage
 } from '@storefront-ui/vue';
 import { ref, watch, computed } from '@nuxtjs/composition-api';
-import { productGetters } from '<%= options.generate.replace.composables %>';
+import { useWishlist, wishlistGetters, productGetters } from '<%= options.generate.replace.composables %>';
 
 export default {
   name: 'SearchResults',
@@ -126,6 +130,7 @@ export default {
     const isSearchOpen = ref(props.visible);
     const products = computed(() => props.result?.products);
     const categories = computed(() => props.result?.categories);
+    const { addItem: addItemToWishlist, isInWishlist, removeItem: removeItemFromWishlist, wishlist } = useWishlist();
 
     watch(() => props.visible, (newVal) => {
       isSearchOpen.value = newVal;
@@ -137,11 +142,20 @@ export default {
       }
     });
 
+    const removeProductFromWishlist = (productItem) => {
+      const productsInWhishlist = computed(() => wishlistGetters.getItems(wishlist.value));
+      const product = productsInWhishlist.value.find(wishlistProduct => wishlistProduct.variant.sku === productItem.sku);
+      removeItemFromWishlist({ product });
+    };
+
     return {
       isSearchOpen,
       productGetters,
       products,
-      categories
+      categories,
+      addItemToWishlist,
+      isInWishlist,
+      removeProductFromWishlist
     };
   }
 };