Merge pull request #3 from vuestorefront-community/dev

Release 1.3.0
vuestorefront-community · Mar 25, 2022 · c87ad06 · c87ad06
2 parents 291120f + 7a5bd26
commit c87ad06
Show file tree

Hide file tree

Showing 10 changed files with 438 additions and 238 deletions.
diff --git a/assets/css/category.scss b/assets/css/category.scss
@@ -0,0 +1,156 @@
+#category {
+    box-sizing: border-box;
+    @include for-desktop {
+      max-width: 1240px;
+      margin: 0 auto;
+    }
+  }
+  .main {
+    &.section {
+      padding: var(--spacer-xs);
+      @include for-desktop {
+        padding: 0;
+      }
+    }
+  }
+  .breadcrumbs {
+    margin: var(--spacer-base) auto var(--spacer-lg);
+    text-transform: capitalize;
+  }
+
+  .sort-by {
+    flex: unset;
+    width: 11.875rem;
+  }
+  .main {
+    display: flex;
+  }
+
+  .sidebar {
+    flex: 0 0 15%;
+    padding: var(--spacer-sm);
+    border: 1px solid var(--c-light);
+    border-width: 0 1px 0 0;
+  }
+  .list {
+    --menu-item-font-size: var(--font-size--sm);
+    &__item {
+      &:not(:last-of-type) {
+        --list-item-margin: 0 0 var(--spacer-sm) 0;
+      }
+
+      .nuxt-link-exact-active {
+        text-decoration: underline;
+      }
+    }
+  }
+  .products {
+    box-sizing: border-box;
+    flex: 1;
+    margin: 0;
+    &__grid {
+      justify-content: space-between;
+      @include for-desktop {
+        justify-content: flex-start;
+      }
+    }
+    &__grid,
+    &__list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    &__product-card {
+      --product-card-title-margin: var(--spacer-base) 0 0 0;
+      --product-card-title-font-weight: var(--font-weight--medium);
+      --product-card-title-margin: var(--spacer-xs) 0 0 0;
+      flex: 1 1 50%;
+      @include for-desktop {
+        --product-card-title-font-weight: var(--font-weight--normal);
+        --product-card-add-button-bottom: var(--spacer-base);
+        --product-card-title-margin: var(--spacer-sm) 0 0 0;
+      }
+    }
+    &__product-card-horizontal {
+      flex: 0 0 100%;
+    }
+    &__slide-enter {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+    &__slide-enter-active {
+      transition: all 0.2s ease;
+      transition-delay: calc(0.1s * var(--index));
+    }
+    @include for-desktop {
+      &__grid {
+        margin: var(--spacer-sm) 0 0 var(--spacer-sm);
+      }
+      &__pagination {
+        display: flex;
+        justify-content: flex-start;
+        margin: var(--spacer-xl) 0 0 0;
+      }
+      &__product-card-horizontal {
+        margin: var(--spacer-lg) 0;
+      }
+      &__product-card {
+        flex: 1 1 25%;
+      }
+      &__list {
+        margin: 0 0 0 var(--spacer-sm);
+      }
+    }
+    &__show-on-page {
+      display: flex;
+      justify-content: flex-end;
+      align-items: baseline;
+      &__label {
+        font-family: var(--font-family--secondary);
+        font-size: var(--font-size--sm);
+      }
+    }
+  }
+  .loading {
+    margin: var(--spacer-3xl) auto;
+    @include for-desktop {
+      margin-top: 6.25rem;
+    }
+  }
+  ::v-deep .sf-sidebar__aside {
+    --sidebar-z-index: 3;
+  }
+
+  .before-results {
+    box-sizing: border-box;
+    padding: var(--spacer-lg) var(--spacer-sm) var(--spacer-2xl);
+    width: 100%;
+    text-align: center;
+    @include for-desktop {
+      padding: 0;
+    }
+    &__picture {
+      --image-width: 230px;
+      margin-top: var(--spacer-2xl);
+      @include for-desktop {
+        --image-width: 18.75rem;
+        margin-top: var(--spacer-base);
+      }
+    }
+    &__paragraph {
+      font-family: var(--font-family--primary);
+      font-weight: var(--font-weight--normal);
+      font-size: var(--font-size--base);
+      color: var(--c-text-muted);
+      margin: 0;
+      @include for-desktop {
+        font-size: var(--font-size--lg);
+      }
+      &:first-of-type {
+        margin: var(--spacer-xl) auto var(--spacer-xs);
+      }
+    }
+    &__button {
+      margin: var(--spacer-xl) auto;
+      width: 100%;
+    }
+  }
diff --git a/assets/css/mobileMenuSideBar.scss b/assets/css/mobileMenuSideBar.scss
@@ -0,0 +1,24 @@
+.mobileMenu {
+    --sidebar-z-index: 3;
+    --overlay-z-index: 3;
+    --sidebar-top-padding: var(--spacer-lg) var(--spacer-base) 0
+      var(--spacer-base);
+    --sidebar-content-padding: var(--spacer-lg) var(--spacer-base);
+  }
+
+  .heading {
+    &__wrapper {
+      --heading-title-color: var(--c-link);
+      --heading-title-font-weight: var(--font-weight--semibold);
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .sidebar-bottom {
+    margin: auto 0 0 0;
+  }
+
+::v-deep .sf-list .sf-list__item {
+  padding: 10px 0;
+}  
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -120,8 +120,8 @@ import {
   SfOverlay,
   SfBadge,
   SfHeader
-} from "@storefront-ui/vue";
-import { useUiState } from "~/composables";
+} from '@storefront-ui/vue';
+import { useUiState } from '~/composables';
 import {
   useCart,
   useWishlist,
@@ -130,16 +130,16 @@ import {
   categoryGetters,
   useCategory,
   useFacet
-} from "@vue-storefront/odoo";
-import { clickOutside } from "@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js";
-import { computed, ref, watch } from "@nuxtjs/composition-api";
-import { onSSR } from "@vue-storefront/core";
-import { useUiHelpers } from "~/composables";
-import LocaleSelector from "./LocaleSelector";
-import SearchResults from "~/components/SearchResults";
+} from '@vue-storefront/odoo';
+import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
+import { computed, ref, watch } from '@nuxtjs/composition-api';
+import { onSSR } from '@vue-storefront/core';
+import { useUiHelpers } from '~/composables';
+import LocaleSelector from './LocaleSelector';
+import SearchResults from '~/components/SearchResults';
 
-import debounce from "lodash.debounce";
-import { mapMobileObserver } from "@storefront-ui/vue/src/utilities/mobile-observer.js";
+import debounce from 'lodash.debounce';
+import { mapMobileObserver } from '@storefront-ui/vue/src/utilities/mobile-observer.js';
 export default {
   components: {
     SfHeader,
@@ -160,20 +160,15 @@ export default {
     const isSearchOpen = ref(false);
 
     const { changeSearchTerm } = useUiHelpers();
-    const {
-      toggleCartSidebar,
-      toggleWishlistSidebar,
-      toggleLoginModal
-    } = useUiState();
+    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } =
+      useUiState();
 
     const { load: loadUser, isAuthenticated } = useUser();
     const { load: loadCart, cart } = useCart();
     const { load: loadWishlist, wishlist } = useWishlist();
-    const { search: searchProductApi, result } = useFacet("AppHeader:Search");
-    const {
-      categories: topCategories,
-      search: searchTopCategoryApi
-    } = useCategory("AppHeader:TopCategories");
+    const { search: searchProductApi, result } = useFacet('AppHeader:Search');
+    const { categories: topCategories, search: searchTopCategoryApi } =
+      useCategory('AppHeader:TopCategories');
 
     const isMobile = computed(() => mapMobileObserver().isMobile.get());
 
@@ -182,7 +177,7 @@ export default {
       return count ? count.toString() : null;
     });
     const accountIcon = computed(() =>
-      isAuthenticated.value ? "profile_fill" : "profile"
+      isAuthenticated.value ? 'profile_fill' : 'profile'
     );
 
     const removeSearchResults = () => {
@@ -191,46 +186,50 @@ export default {
 
     const closeSearch = () => {
       if (!isSearchOpen.value) return;
-      term.value = "";
+      term.value = '';
       isSearchOpen.value = false;
     };
 
-    const handleSearch = debounce(async paramValue => {
+    const handleSearch = debounce(async (paramValue) => {
       if (!paramValue.target) {
         term.value = paramValue;
       } else {
         term.value = paramValue.target.value;
       }
       if (term.value.length < 2) return;
 
-      await searchProductApi({ search: term.value, pageSize: 12 });
+      await searchProductApi({
+        search: term.value,
+        pageSize: 12,
+        fetchCategory: true
+      });
 
       formatedResult.value = {
         products: result?.value?.data?.products,
         categories: result?.value?.data?.categories
-          .filter(category => category.childs === null)
-          .map(category => categoryGetters.getTree(category))
+          .filter((category) => category.childs === null)
+          .map((category) => categoryGetters.getTree(category))
       };
     }, 100);
     const closeOrFocusSearchBar = () => {
       if (isMobile.value) {
         return closeSearch();
       }
-      term.value = "";
+      term.value = '';
       return searchBarRef.value.$el.children[0].focus();
     };
     // TODO: https://github.com/DivanteLtd/vue-storefront/issues/4927
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
-        return root.$router.push("/my-account");
+        return root.$router.push('/my-account');
       }
 
       toggleLoginModal();
     };
 
     const filteredTopCategories = computed(() =>
       topCategories.value.filter(
-        cat => cat.name === "WOMEN" || cat.name === "MEN"
+        (cat) => cat.name === 'WOMEN' || cat.name === 'MEN'
       )
     );