better overlay visibility for categories without children

vuestorefront · Jan 6, 2021 · 73f36cb · 73f36cb
1 parent 9447532
commit 73f36cb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/packages/boilerplate/api-client/src/api/getCategory/index.ts b/packages/boilerplate/api-client/src/api/getCategory/index.ts
@@ -7,22 +7,26 @@ export default async function getCategory(context, params, customQuery?: CustomQ
       id: 1,
       name: 'New',
       slug: 'new',
+      childCount: 2,
       children: [
         {
           id: 15,
           name: 'Women',
           slug: 'new-women',
+          childCount: 2,
           children: [
             {
               id: 16,
               name: 'Clothing',
               slug: 'new-women-clothing',
+              childCount: 0,
               children: []
             },
             {
               id: 17,
               name: 'Shoes',
               slug: 'new-women-shoes',
+              childCount: 0,
               children: []
             }
           ]
@@ -31,17 +35,20 @@ export default async function getCategory(context, params, customQuery?: CustomQ
           id: 11,
           name: 'Men',
           slug: 'new-men',
+          childCount: 1,
           children: [
             {
               id: 18,
               name: 'Clothing',
               slug: 'new-men-clothing',
+              childCount: 0,
               children: []
             },
             {
               id: 19,
               name: 'Shoes',
               slug: 'new-men-shoes',
+              childCount: 0,
               children: []
             }
           ]
@@ -52,22 +59,26 @@ export default async function getCategory(context, params, customQuery?: CustomQ
       id: 2,
       name: 'Women',
       slug: 'women',
+      childCount: 2,
       children: [
         {
           id: 4,
           name: 'Women jackets',
           slug: 'women-jackets',
+          childCount: 2,
           children: [
             {
               id: 9,
               name: 'Winter jackets',
               slug: 'winter-jackets',
+              childCount: 0,
               children: []
             },
             {
               id: 10,
               name: 'Autumn jackets',
               slug: 'autmun-jackets',
+              childCount: 0,
               children: []
             }
           ]
@@ -76,6 +87,7 @@ export default async function getCategory(context, params, customQuery?: CustomQ
           id: 5,
           name: 'Skirts',
           slug: 'skirts',
+          childCount: 0,
           children: []
         }
       ]
@@ -84,11 +96,13 @@ export default async function getCategory(context, params, customQuery?: CustomQ
       id: 3,
       name: 'Men',
       slug: 'men',
+      childCount: 1,
       children: [
         {
           id: 6,
           name: 'Men T-shirts',
           slug: 'men-tshirts',
+          childCount: 0,
           children: []
         }
       ]
@@ -97,22 +111,26 @@ export default async function getCategory(context, params, customQuery?: CustomQ
       id: 4,
       name: 'Kids',
       slug: 'kids',
+      childCount: 1,
       children: [
         {
           id: 7,
           name: 'Toys',
           slug: 'toys',
+          childCount: 2,
           children: [
             {
               id: 8,
               name: 'Toy Cars',
               slug: 'toy-cars',
+              childCount: 0,
               children: []
             },
             {
               id: 8,
               name: 'Dolls',
               slug: 'dolls',
+              childCount: 0,
               children: []
             }
           ]

diff --git a/packages/commercetools/theme/components/header/HeaderNav.vue b/packages/commercetools/theme/components/header/HeaderNav.vue
@@ -46,7 +46,7 @@
 import { SfMegaMenu, SfMenuItem, SfList, SfBanner, SfLoader } from '@storefront-ui/vue';
 import { useCategory } from '@vue-storefront/commercetools';
 import { onSSR } from '@vue-storefront/core';
-import { ref } from '@vue/composition-api';
+import { computed, ref } from '@vue/composition-api';
 import { rootCategoriesQuery } from '../../queries/topCategories';
 import debounce from 'lodash.debounce';
 
@@ -68,8 +68,9 @@ export default {
     const handleMouseEnter = debounce((slug) => {
       if (currentCatSlug.value) return;
 
-      emit('setOverlay', true);
       currentCatSlug.value = slug;
+      const catChild = computed(() => categories.value.find(category => category.slug === currentCatSlug.value));
+      emit('setOverlay', Boolean(catChild.value.childCount));
       subCategoriesSearch({ slug });
     }, 200);
 

diff --git a/packages/core/nuxt-theme-module/theme/components/header/HeaderNav.vue b/packages/core/nuxt-theme-module/theme/components/header/HeaderNav.vue
@@ -44,7 +44,7 @@
 import { SfMegaMenu, SfMenuItem, SfList } from '@storefront-ui/vue';
 import { useCategory } from '<%= options.generate.replace.composables %>';
 import { onSSR } from '@vue-storefront/core';
-import { ref } from '@vue/composition-api';
+import { computed, ref } from '@vue/composition-api';
 
 export default {
   name: 'HeaderNav',
@@ -61,8 +61,9 @@ export default {
     const handleMouseEnter = (slug) => {
       if (currentCatSlug.value) return;
 
-      emit('setOverlay', true);
       currentCatSlug.value = slug;
+      const catChild = computed(() => categories.value.find(category => category.slug === currentCatSlug.value));
+      emit('setOverlay', Boolean(catChild.value.childCount));
     };
 
     const handleMouseLeave = () => {