chore: fixes from CR

vuestorefront · Dec 27, 2020 · e9dad20 · e9dad20
1 parent cf9f8b7
commit e9dad20
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 239 deletions.
diff --git a/...ommercetools/theme/components/TopMenu.vue → ...ols/theme/components/header/HeaderNav.vue b/...ommercetools/theme/components/TopMenu.vue → ...ols/theme/components/header/HeaderNav.vue
@@ -11,9 +11,9 @@
     >
       <SfMegaMenu
         :is-absolute="true"
-        :visible="categorySlug === category.slug"
+        :visible="currentCatSlug === category.slug"
         :title="category.name"
-        @close="categorySlug = ''"
+        @close="currentCatSlug = ''"
         v-if="category && category.children.length"
       >
         <SfMegaMenuColumn
@@ -36,22 +36,7 @@
             </SfList>
           </SfLoader>
         </SfMegaMenuColumn>
-        <SfMegaMenuColumn
-          v-if="isCategoryWithBanners"
-          title="Featured"
-          class="sf-mega-menu-column--pined-content-on-mobile sf-mega-menu-column--hide-header-on-mobile sb-mega-menu__featured"
-        >
-          <div class="sb-mega-menu__banners">
-            <SfBanner
-              v-for="(banner, key) in banners"
-              :key="key"
-              :title="banner.title"
-              :subtitle="banner.subtitle"
-              :image="banner.pictures"
-              class="sb-mega-menu__banner"
-            />
-          </div>
-        </SfMegaMenuColumn>
+        <NewCatBanners v-if="currentCatSlug === 'new'" />
       </SfMegaMenu>
     </SfHeaderNavigationItem>
   </SfHeaderNavigation>
@@ -61,101 +46,50 @@
 import { SfMegaMenu, SfMenuItem, SfList, SfBanner, SfLoader } from '@storefront-ui/vue';
 import { useCategory } from '@vue-storefront/commercetools';
 import { onSSR } from '@vue-storefront/core';
-import { computed, ref } from '@vue/composition-api';
-import { menuCatQuery } from '../queries/topCategories';
+import { ref } from '@vue/composition-api';
+import { rootCategoriesQuery } from '../../queries/topCategories';
 import debounce from 'lodash.debounce';
 
 export default {
-  name: 'TopMenu',
+  name: 'HeaderNav',
   components: {
     SfMegaMenu,
     SfMenuItem,
     SfList,
     SfBanner,
-    SfLoader
+    SfLoader,
+    NewCatBanners: () => import('./NewCatBanners')
   },
   setup (_, { emit }) {
     const { categories, search } = useCategory('menu-categories');
     const { categories: subCategories, search: subCategoriesSearch, loading: subCategoriesLoading } = useCategory('menu-subCategories');
-    const categorySlug = ref('');
-    const categoriesWithBanners = ref(['new']);
-
-    const isCategoryWithBanners = computed(() => categoriesWithBanners.value.includes(categorySlug.value));
+    const currentCatSlug = ref('');
 
     const handleMouseEnter = debounce((slug) => {
-      if (categorySlug.value) return;
+      if (currentCatSlug.value) return;
 
       emit('setOverlay', true);
-      categorySlug.value = slug;
+      currentCatSlug.value = slug;
       subCategoriesSearch({ slug });
     }, 200);
 
     const handleMouseLeave = debounce(() => {
       emit('setOverlay', false);
-      categorySlug.value = '';
+      currentCatSlug.value = '';
     }, 200);
 
     onSSR(async () => {
-      await search({ customQuery: menuCatQuery });
+      await search({ customQuery: rootCategoriesQuery });
     });
 
     return {
       categories,
       subCategories,
-      categorySlug,
+      currentCatSlug,
       subCategoriesLoading,
-      categoriesWithBanners,
-      isCategoryWithBanners,
       handleMouseEnter,
       handleMouseLeave
     };
-  },
-  data() {
-    return {
-      banners: [
-        {
-          title: 'THE OFFICE LIFE',
-          subtitle: 'T-shirts',
-          pictures: {
-            mobile: '/megamenu/bannerA.webp',
-            desktop: '/megamenu/bannerA.webp'
-          }
-        },
-        {
-          title: 'ECO SANDALS',
-          subtitle: 'T-shirts',
-          pictures: {
-            mobile: '/megamenu/bannerB.webp',
-            desktop: '/megamenu/bannerB.webp'
-          }
-        }
-      ]
-    };
   }
 };
 </script>
-
-<style scoped lang='scss'>
-.sb-mega-menu {
-  &__featured {
-    flex: 0 0 43.125rem;
-  }
-  &__banners {
-    display: flex;
-    flex-direction: column;
-    padding: var(--spacer-base);
-    @include for-desktop {
-      flex-direction: row;
-      padding: 0;
-    }
-  }
-  &__banner{
-    &:first-child{
-      margin: 0 0 var(--spacer-sm) 0;
-      @include for-desktop {
-        margin: 0 var(--spacer-sm) 0 0;
-      }
-    }
-  }
-}
-</style>
diff --git a/packages/commercetools/theme/queries/topCategories.ts b/packages/commercetools/theme/queries/topCategories.ts
@@ -23,7 +23,7 @@ const customQuery = gql`
   }
 `;
 
-export const menuCatQuery = (query, variables) => {
+export const rootCategoriesQuery = (query, variables) => {
   const customVariables = {
     ...variables,
     where: 'parent is not defined'

diff --git a/packages/core/nuxt-theme-module/theme/components/TopMenu.vue b/packages/core/nuxt-theme-module/theme/components/TopMenu.vue
diff --git a/...eme-module/theme/components/AppHeader.vue → ...ule/theme/components/header/AppHeader.vue b/...eme-module/theme/components/AppHeader.vue → ...ule/theme/components/header/AppHeader.vue
@@ -20,7 +20,7 @@
         </nuxt-link>
       </template>
       <template #navigation>
-        <TopMenu @setOverlay="isOverlayVisible = $event" />
+        <HeaderNav @setOverlay="isOverlayVisible = $event" />
       </template>
       <template #aside>
         <LocaleSelector class="smartphone-only" />
@@ -36,8 +36,8 @@ import { useCart, useWishlist, useUser, cartGetters } from '<%= options.generate
 import { computed, ref } from '@vue/composition-api';
 import { onSSR } from '@vue-storefront/core';
 import { useUiHelpers } from '~/composables';
-import LocaleSelector from './LocaleSelector';
-import TopMenu from './TopMenu';
+import LocaleSelector from '../LocaleSelector';
+import HeaderNav from './HeaderNav';
 
 export default {
   components: {
@@ -46,7 +46,7 @@ export default {
     SfLink,
     SfOverlay,
     LocaleSelector,
-    TopMenu
+    HeaderNav
   },
   setup(props, { root }) {
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();