Merge b584cd7 into cdcadc4

vuestorefront · Mar 26, 2021 · 6c2c1b9 · 6c2c1b9
2 parents cdcadc4 + b584cd7
commit 6c2c1b9
Show file tree

Hide file tree

Showing 5 changed files with 364 additions and 418 deletions.
diff --git a/packages/commercetools/theme/composables/useUiHelpers/index.ts b/packages/commercetools/theme/composables/useUiHelpers/index.ts
@@ -2,7 +2,7 @@ import { getCurrentInstance } from '@vue/composition-api';
 import { Category } from '@vue-storefront/commercetools-api';
 import { AgnosticFacet } from '@vue-storefront/core';
 
-const nonFilters = ['page', 'sort', 'term', 'itemsPerPage'];
+const nonFilters = ['page', 'sort', 'phrase', 'itemsPerPage'];
 
 const getInstance = () => {
   const vm = getCurrentInstance();
@@ -40,7 +40,7 @@ const useUiHelpers = () => {
       sort: query.sort || 'latest',
       filters: getFiltersDataFromUrl(instance, true),
       itemsPerPage: parseInt(query.itemsPerPage, 10) || 20,
-      term: query.term
+      phrase: query.phrase
     };
   };
 
@@ -56,7 +56,7 @@ const useUiHelpers = () => {
       sort: query.sort || 'latest',
       filters: getFiltersDataFromUrl(instance, true),
       itemsPerPage: parseInt(query.itemsPerPage, 10) || 20,
-      term: query.term
+      phrase: query.phrase
     };
   };
 
@@ -91,7 +91,7 @@ const useUiHelpers = () => {
     instance.$router.push({
       query: {
         ...getFiltersDataFromUrl(instance, false),
-        term: term || undefined
+        phrase: term || undefined
       }
     });
   };

diff --git a/packages/core/nuxt-theme-module/theme/components/AppHeader.vue b/packages/core/nuxt-theme-module/theme/components/AppHeader.vue
@@ -129,7 +129,7 @@ export default {
     const { isAuthenticated, load: loadUser } = useUser();
     const { cart, load: loadCart } = useCart();
     const { load: loadWishlist } = useWishlist();
-    const term = ref(getFacetsFromURL().term);
+    const term = ref(getFacetsFromURL().phrase);
     const isSearchOpen = ref(false);
     const searchBarRef = ref(null);
 
@@ -170,7 +170,7 @@ export default {
         term.value = paramValue.target.value;
       }
       setTermForUrl(term.value);
-      await search(getSearchTermFromUrl(term.value));
+      await search(getSearchTermFromUrl());
     }, 1000);
 
     const isMobile = computed(() => mapMobileObserver().isMobile.get());

diff --git a/packages/core/nuxt-theme-module/theme/components/SearchResults.vue b/packages/core/nuxt-theme-module/theme/components/SearchResults.vue
@@ -2,15 +2,15 @@
   <div>
     <SfMegaMenu
       :visible="isSearchOpen"
-      title="$t('Search results')"
+      :title="$t('Search results')"
       class="search"
     >
       <transition name="sf-fade" mode="out-in">
         <div v-if="products.length > 0" class="search__wrapper-results" key="results">
           <SfMegaMenuColumn :title="$t('Categories')" class="sf-mega-menu-column--pined-content-on-mobile search__categories">
             <SfList>
               <SfListItem v-for="(category, key) in categories.items" :key="key">
-                <SfMenuItem :label="category.label" :link="`/c/women/${category.slug}`"/>
+                <SfMenuItem :label="category.label" :link="`/c/${category.slug}`"/>
               </SfListItem>
             </SfList>
           </SfMegaMenuColumn>
@@ -38,34 +38,21 @@
               </div>
             </SfScrollable>
             <div class="results--mobile smartphone-only">
-                <SfProductCard
-                  v-for="(product, index) in products"
-                  :key="index"
-                  :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
-                  :score-rating="productGetters.getAverageRating(product)"
-                  :reviews-count="7"
-                  :image="productGetters.getCoverImage(product)"
-                  :alt="productGetters.getName(product)"
-                  :title="productGetters.getName(product)"
-                  :link="`/p/${productGetters.getId(product)}/${productGetters.getSlug(product)}`"
-                />
-              </div>
-            <SfButton
-              v-if="categories.items && categories.items.length"
-              :link="`/c/${categories.slug}/${categories.items[0].slug}`"
-              class="sf-button--text see-all desktop-only"
-            >
-              {{ $t('See all results') }}
-            </SfButton>
+              <SfProductCard
+                v-for="(product, index) in products"
+                :key="index"
+                class="result-card"
+                :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
+                :score-rating="productGetters.getAverageRating(product)"
+                :reviews-count="7"
+                :image="productGetters.getCoverImage(product)"
+                :alt="productGetters.getName(product)"
+                :title="productGetters.getName(product)"
+                :link="`/p/${productGetters.getId(product)}/${productGetters.getSlug(product)}`"
+              />
+            </div>
           </SfMegaMenuColumn>
           <div class="action-buttons smartphone-only">
-            <SfButton
-              v-if="categories.items && categories.items.length"
-              class="action-buttons__button color-secondary"
-              :link="`/c/${categories.slug}/${categories.items[0].slug}`"
-            >
-              {{ $t('See all results') }}
-            </SfButton>
             <SfButton class="action-buttons__button color-light" @click="$emit('close')">{{ $t('Cancel') }}</SfButton>
           </div>
         </div>
@@ -126,15 +113,16 @@ export default {
         document.body.classList.add('no-scroll');
       } else {
         document.body.classList.remove('no-scroll');
-        searchResult.value.data = [];
+        searchResult.value.data = null;
       }
     });
 
     return {
       isSearchOpen,
       productGetters,
       products,
-      categories
+      categories,
+      searchResult
     };
   }
 };
@@ -202,9 +190,6 @@ export default {
   width: 100%;
   &__button {
     width: calc(100% - 32px);
-    &:first-child {
-      margin-bottom: var(--spacer-sm);
-    }
   }
 }
 .results-listing {
@@ -213,7 +198,10 @@ export default {
   margin-left: var(--spacer-2xs);
 }
 .result-card {
-  margin: var(--spacer-2xs) 0;
+  margin: var(--spacer-sm) 0;
+  @include for-desktop {
+    margin: var(--spacer-2xs) 0;
+  }
 }
 
 .before-results {
@@ -222,13 +210,14 @@ export default {
   width: 100%;
   text-align: center;
   @include for-desktop {
-    padding-bottom: var(--spacer-xl);
+    padding: 0;
   }
   &__picture {
     --image-width: 230px;
     margin-top: var(--spacer-2xl);
     @include for-desktop {
-      --image-width: 21.875rem;
+      --image-width: 18.75rem;
+      margin-top: var(--spacer-base);
     }
   }
   &__paragraph {

diff --git a/packages/core/nuxt-theme-module/theme/composables/useUiHelpers/index.ts b/packages/core/nuxt-theme-module/theme/composables/useUiHelpers/index.ts
@@ -53,7 +53,7 @@ const useUiHelpers = () => {
   };
 
   const getSearchTermFromUrl = () => {
-    console.warn('[VSF] please implement useUiHelpers.isFacetCheckbox.');
+    console.warn('[VSF] please implement useUiHelpers.getSearchTermFromUrl.');
   };
 
   return {