fix: empty wishlist implementation

Author: Alexander Devitsky

packages/theme/lang/de.js

@@ -87,6 +87,7 @@ export default {
   "Login": "Anmeldung",
   "login in to your account": "Anmelden bei Ihrem Konto",
   "Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.": "Sieht so aus, als hätten Sie der Tasche noch keine Artikel hinzugefügt. Beginnen Sie mit dem Einkaufen, um es auszufüllen.",
+  "Looks like you haven’t added any items to the Wishlist.": "Sieht so aus, als hätten Sie keine Artikel zur Wunschliste hinzugefügt.",
   "Make an order": "Bestellung aufgeben",
   "Manage addresses": "Verwalten Sie alle gewünschten Adressen (Arbeitsplatz, Privatadresse...) Auf diese Weise müssen Sie die Adresse nicht bei jeder Bestellung manuell eingeben.",
   "Manage billing addresses": "Alle gewünschten Rechnungsadressen verwalten (Arbeitsplatz, Privatadresse ...) Auf diese Weise müssen Sie die Rechnungsadresse nicht bei jeder Bestellung manuell eingeben.",

packages/theme/lang/en.js

@@ -85,6 +85,7 @@ export default {
   "Login": "Login",
   "login in to your account": "login in to your account",
   "Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.": "Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.",
+  "Looks like you haven’t added any items to the Wishlist.": "Looks like you haven’t added any items to the Wishlist.",
   "Make an order": "Make an order",
   "Manage addresses": "Manage all the addresses you want (work place, home address...) This way you won\"t have to enter the address manually with each order.",
   "Manage billing addresses": "Manage all the billing addresses you want (work place, home address...) This way you won\"t have to enter the billing address manually with each order.",

packages/theme/modules/customer/pages/MyAccount/MyWishlist.vue

@@ -7,22 +7,22 @@
       <div v-if="loading">
         <SfLoader />
       </div>
-      <div v-else>
+      <div v-else-if="products && products.length > 0">
         <div class="navbar section">
           <div class="navbar__main">
             <div class="navbar__counter">
-              <span class="navbar__label desktop-only">{{
-                $t('Products found')
-              }}</span>
+              <span class="navbar__label desktop-only">
+                {{ $t('Products found') }}
+              </span>
               <span class="desktop-only">{{ pagination.totalItems }}</span>
               <span class="navbar__label smartphone-only">
                 {{ pagination.totalItems }} {{ $t('Items') }}</span>
             </div>
 
             <div class="navbar__view">
-              <span class="navbar__view-label desktop-only">{{
-                $t('View')
-              }}</span>
+              <span class="navbar__view-label desktop-only">
+                {{ $t('View') }}
+              </span>
               <SvgImage
                 icon="tiles"
                 :label="$t('Change to grid view')"
@@ -80,7 +80,6 @@
                     fit: 'cover',
                   }"
                   :is-added-to-cart="isInCart({ product: product.product })"
-                  :is-in-wishlist="true"
                   :link="
                     localePath(
                       `/p/${productGetters.getProductSku(
@@ -100,14 +99,15 @@
                   :score-rating="
                     productGetters.getAverageRating(product.product)
                   "
-                  :show-add-to-cart-button="true"
                   :special-price="
                     productGetters.getPrice(product.product).special &&
                       $fc(productGetters.getPrice(product.product).special)
                   "
                   :style="{ '--index': i }"
                   :title="productGetters.getName(product.product)"
                   wishlist-icon
+                  is-in-wishlist
+                  show-add-to-cart-button
                   @click:wishlist="removeItemFromWishlist(product.product)"
                   @click:add-to-cart="
                     addItemToCart({ product: product.product, quantity: 1 })
@@ -137,7 +137,6 @@
                   :nuxt-img-config="{
                     fit: 'cover',
                   }"
-                  :is-in-wishlist="true"
                   :link="
                     localePath(
                       `/p/${productGetters.getProductSku(
@@ -164,6 +163,7 @@
                   :style="{ '--index': i }"
                   :title="productGetters.getName(product.product)"
                   wishlist-icon
+                  is-in-wishlist
                   @click:wishlist="removeItemFromWishlist(product.product)"
                   @click:add-to-cart="
                     addItemToCart({ product: product.product, quantity: 1 })
@@ -209,9 +209,9 @@
                 v-show="pagination.totalPages > 1"
                 class="products__show-on-page"
               >
-                <span class="products__show-on-page__label">{{
-                  $t('Show on page')
-                }}</span>
+                <span class="products__show-on-page__label">
+                  {{ $t('Show on page') }}
+                </span>
                 <LazyHydrate on-interaction>
                   <SfSelect
                     :value="pagination.itemsPerPage.toString()"
@@ -233,6 +233,7 @@
           </SfLoader>
         </div>
       </div>
+      <EmptyWishlist v-else />
     </SfTab>
   </SfTabs>
 </template>
@@ -263,6 +264,7 @@ import { useWishlist } from '~/modules/wishlist/composables/useWishlist';
 import wishlistGetters from '~/modules/wishlist/getters/wishlistGetters';
 import { useCart } from '~/modules/checkout/composables/useCart';
 import { useWishlistStore } from '~/modules/wishlist/store/wishlistStore';
+import EmptyWishlist from '~/modules/wishlist/components/EmptyWishlist.vue';
 
 import {
   useUiHelpers,
@@ -282,6 +284,7 @@ export default defineComponent({
     SfPagination,
     SfSelect,
     SfProperty,
+    EmptyWishlist,
     LazyHydrate,
     SvgImage,
   },

packages/theme/modules/wishlist/components/EmptyWishlist.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="empty-wishlist">
+    <slot>
+      <div class="empty-wishlist__banner">
+        <SvgImage
+          icon="empty_cart_image"
+          :label="$t('Empty bag')"
+          width="211"
+          height="143"
+          class="empty-wishlist__icon"
+          data-testid="icon"
+        />
+        <SfHeading
+          :title="$t('Your bag is empty')"
+          :description="$t('Looks like you haven’t added any items to the Wishlist.')"
+          class="empty-wishlist__label"
+          data-testid="label"
+        />
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api';
+import { SfHeading } from '@storefront-ui/vue';
+import SvgImage from '~/components/General/SvgImage.vue';
+
+export default defineComponent({
+  name: 'EmptyWishlist',
+  components: {
+    SfHeading,
+    SvgImage,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.empty-wishlist {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+
+  &__banner {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  &__icon {
+    --image-width: 16rem;
+    margin: 0 0 var(--spacer-2xl) 7.5rem;
+  }
+
+  &__label {
+    --heading-description-margin: 0 0 var(--spacer-xl) 0;
+    --heading-title-margin: 0 0 var(--spacer-xl) 0;
+    --heading-title-color: var(--c-primary);
+    --heading-title-font-weight: var(--font-weight--semibold);
+    text-align: center;
+
+    @include for-desktop {
+      --heading-title-font-size: var(--font-size--xl);
+      --heading-title-margin: 0 0 var(--spacer-sm) 0;
+    }
+  }
+}
+</style>

packages/theme/modules/wishlist/components/WishlistSidebar.vue

@@ -128,26 +128,7 @@
             </SfProperty>
           </div>
         </div>
-        <div
-          v-else
-          key="empty-wishlist"
-          class="empty-wishlist"
-        >
-          <div class="empty-wishlist__banner">
-            <SvgImage
-              icon="empty_cart_image"
-              :label="$t('Empty bag')"
-              width="211"
-              height="143"
-              class="empty-wishlist__icon"
-            />
-            <SfHeading
-              title="Your bag is empty"
-              description="Looks like you haven’t added any items to the Wishlist."
-              class="empty-wishlist__label"
-            />
-          </div>
-        </div>
+        <EmptyWishlist v-else />
       </SfLoader>
       <template #content-bottom>
         <SfButton
@@ -182,6 +163,7 @@ import {
 import { useWishlist } from '~/modules/wishlist/composables/useWishlist';
 import { useUser } from '~/modules/customer/composables/useUser';
 import { useWishlistStore } from '~/modules/wishlist/store/wishlistStore';
+import EmptyWishlist from '~/modules/wishlist/components/EmptyWishlist.vue';
 
 import SvgImage from '~/components/General/SvgImage.vue';
 
@@ -199,6 +181,7 @@ export default defineComponent({
     SfLink,
     SfLoader,
     SfImage,
+    EmptyWishlist,
     SvgImage,
   },
   setup() {
@@ -306,38 +289,7 @@ export default defineComponent({
     }
   }
 }
-.empty-wishlist {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  flex-direction: column;
-  height: 100%;
-  &__banner {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-  }
-  &__label,
-  &__description {
-    text-align: center;
-  }
-  &__label {
-    --heading-description-margin: 0 0 var(--spacer-xl) 0;
-    --heading-title-margin: 0 0 var(--spacer-xl) 0;
-    --heading-title-color: var(--c-primary);
-    --heading-title-font-weight: var(--font-weight--semibold);
-    @include for-desktop {
-      --heading-title-font-size: var(--font-size--xl);
-      --heading-title-margin: 0 0 var(--spacer-sm) 0;
-    }
-  }
-  &__icon {
-    --image-width: 16rem;
-    margin: 0 0 var(--spacer-2xl) 7.5rem;
-  }
-}
+
 .heading {
   &__wrapper {
     --heading-title-color: var(--c-link);

packages/theme/modules/wishlist/components/__tests__/EmptyWishlist.spec.ts

@@ -0,0 +1,23 @@
+import { render } from '~/test-utils';
+import EmptyWishlist from '~/modules/wishlist/components/EmptyWishlist.vue';
+
+describe('EmptyWishlist.vue', () => {
+  it('Renders with a default value', () => {
+    const { getByTestId } = render(EmptyWishlist);
+
+    const icon = getByTestId('icon');
+    const label = getByTestId('label');
+
+    expect(icon).toBeDefined();
+    expect(label).toBeDefined();
+  });
+
+  it('Renders content from the "default" slot', () => {
+    const wrapper = render(EmptyWishlist, {
+      slots: {
+        default: '<div id="testSlot"></div>',
+      },
+    });
+    expect(wrapper.html()).toContain('<div id="testSlot"></div>');
+  });
+});