catalogo y producto page

pages/busqueda.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="container mt-5">
-    <div class="row">
+  <div class="">
+    <HeroWithSearch 
+        title="Encuentra tu entidad aliada"
+        subtitle="Colabora, compra o aprende con la economía social"
+      />
+    <div class="c-container row">
       <div class="col-md-3">
         <ProductFilter
         :filters="filters"
@@ -14,12 +18,28 @@
         <BSpinner />
         <span>Cargando productos...</span>
       </div>
-      <div v-if="!loadingProducts" class="col-md-9">
-        <div class="carousel">
-          <h2 class="title">Últimos productos</h2>
-          <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" />
+      <!-- <div class="items">
+        <div class="title-container">
+          <div class="title-lines"></div>
+          <h5 class="items-title">Últimos productos</h5>
+          <div class="title-lines"></div>
         </div>
-        <div v-if="hasFilterTags" class="applied-filters">
+        <div class="items-container">
+          <ItemsRow :type="`product`" :items="carouselProducts" />
+          <NuxtLink to="/busqueda" class="link">
+            <ButtonCTA class="button">Ver todos los servicios</ButtonCTA>
+          </NuxtLink>
+        </div>
+      </div> -->
+      <div v-if="!loadingProducts" class="col-md-9 container-fluid">
+        <div class="carousel">
+          <div class="title-container">
+            <h5 class="items-title">Últimos productos y servicios</h5>
+            <div class="title-lines"></div>
+          </div>
+          <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" :items-to-show="3" />
+        </div>
+        <!-- <div v-if="hasFilterTags" class="applied-filters">
           <h2 class="title">FILTROS APLICADOS</h2>
           <div class="filter-buttons">
             <button
@@ -53,31 +73,37 @@
               </button>
             </div>
           </div>
-        </div>
+        </div> -->
         <div class="results">
-          <h2 class="title"></h2>
-          <p class="count">Hay {{ count }} productos</p>
-        </div>
-        
-        <div v-if="products.length !== 0">
-          <div v-for="product in products" :key="product.id">
-            <ProductCard :key="product.key" :product="product" />
+          <div class="title-container">
+            <h5 class="items-title">Catálogo</h5>
+            <div class="title-lines"></div>
           </div>
-          <BPagination
-            v-model="currentPage"
-            class="pagination"
-            :total-rows="count"
-            :per-page="perPage"
-            @change="handlePageChange"
-          />
-        </div>
-        <div v-else class="no-results">
-          <p>
-            No hemos encontrado resultados para su búsqueda... pero puede buscar
-            otro o consultar estos productos.
-          </p>
-          <div v-for="product in defaultProducts" :key="product.id">
-            <ProductCard :key="product.key" :product="product" />
+          <p class="count">Resultados de búsqueda: {{ count }} resultados</p>
+          <div v-if="products.length !== 0">
+            <ProductsRelated :related-products="products" :products-per-page="12" />
+            <!-- <div v-for="product in products" :key="product.id">
+              <ProductCard :key="product.key" :product="product" />
+            </div> -->
+            <!-- <BPagination
+              v-model="currentPage"
+              class="pagination"
+              :total-rows="count"
+              :per-page="perPage"
+              @change="handlePageChange"
+            /> -->
+          </div>
+          <div v-else class="no-results">
+            <p class="query-text">
+              No encontramos "{{ queryText }}" en Consumo Cuidado.
+            </p>
+            <p>
+              Prueba un término más general, revisa la ortografía o 
+              <span class="link" @click="clearFilters">limpia los filtros</span>.
+            </p>
+            <!-- <div v-for="product in defaultProducts" :key="product.id">
+              <ProductCard :key="product.key" :product="product" />
+            </div> -->
           </div>
         </div>
       </div>
@@ -112,6 +138,7 @@ export default {
   data() {
     return {
       searchText: '',
+      queryText: '',
       currentPage: 1,
       perPage: 10,
       filterTags: {
@@ -146,12 +173,16 @@ export default {
 
   watch: {
     '$route.query'(newValue) {
-      //console.log('New Value:', newValue)
+      console.log('New Value:', newValue)
       //console.log('Route changed:', this.$route.fullPath)
       //console.log('Current params:', this.$route.query)
-      this.updateData(newValue)
+      this.queryText = newValue.q || ''
+      if (newValue.q) {
+        this.updateData(newValue)
+      } else {
+        window.location.reload()
+      }
       Object.assign(this.$data, this.$options.data())
-      
     }
   },
 
@@ -328,11 +359,27 @@ export default {
         })
       }
     },
+
+    clearFilters() {
+      this.currentFilters = null
+      this.appliedFilters = null
+      this.queryText = ''
+      this.$router.push({ 
+        name: 'busqueda'
+      })
+
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
+.c-container {
+  contain: content;
+  width: 100%;
+  min-height: 100dvh;
+  margin-bottom: 2rem;
+}
 .ad {
   margin: 40px auto;
   width: 100%;
@@ -376,10 +423,44 @@ export default {
   }
 }
 
+.container-fluid {
+  background-color: $color-bg-light;
+  margin-top: 2rem;
+  border-radius: 24px;
+}
+
 .carousel {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2rem;
+  padding: 8rem 8rem 8rem 8rem;
+  border-radius: 24px;
+  padding: 2rem 0;
+  margin-top: 2rem;
+  &-title {
+    text-align: center;
+  }
   @include mobile {
     display: none;
   }
+}
+.title-container {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  padding: 0 1rem;
+  .title-lines {
+    width: 34px;
+    height: 2px;
+    background: $color-consumo-base;
+    margin: 0 8px;
+  }
+  .items-title {
+    font-size: $h5;
+    text-transform: uppercase;
+    padding-top: 10px;
+  }
   .title {
     font-size: $xl;
     color: $color-navy;
@@ -392,13 +473,18 @@ export default {
   }
 }
 .results {
-  .title {
-    font-size: $xl;
-    color: $color-navy;
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+  padding: 8rem8rem;
+  border-radius: 24px;
+  padding: 2rem 0;
+  margin-top: 2rem;
   .count {
-    font-size: $xs;
-    color: $color-greytext;
+    padding: 0 1rem;
+    font-size: $s;
+    font-weight: $medium;
   }
 }
 .pagination {
@@ -410,12 +496,26 @@ export default {
 }
 
 .no-results {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  .query-text {
+    font-size: $xxl;
+    color: $color-primary;
+    font-weight: $medium;
+  }
   p {
     text-align: center;
     font-size: $xl;
-    color: $color-navy;
-    margin-top: 100px;
-    margin-bottom: 100px;
+    color: $color-primary;
+    font-weight: $medium;
+  }
+  .link {
+    color: $color-button;
+    text-decoration: none;
+    cursor: pointer;
   }
 }
 
@@ -426,5 +526,16 @@ export default {
   align-items: center;
   justify-content: center;
   height: 100%;
+  min-height: 100dvh;
+ background-color: $color-bg-light;
+  border-radius: 1rem;
+  padding: 2rem;
+  margin-top: 2rem;
+  gap: 3rem;
+  color: $color-primary;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
 }
 </style>