busqueda functionality amend

components/NavBarSearch.vue

@@ -1,16 +1,25 @@
 <template>
   <div class="navsearch_container container-fluid">
     <NuxtLink to="/busqueda"> Todos</NuxtLink>
-    <NuxtLink :to="{ name: 'busqueda', query: { order: 'newest' } }">
-      Últimos productos</NuxtLink
-    >
+    <button  @click="searchLastestProducts"> Últimos productos</button>
     <NuxtLink to="/busqueda"> Más buscados</NuxtLink>
     <NuxtLink to="/c"> Cooperativas</NuxtLink>
     <NuxtLink to="/registro"> Regístrate</NuxtLink>
   </div>
 </template>
 
-<script></script>
+<script>
+export default {
+  methods: {
+    searchLastestProducts() {
+      return navigateTo({
+        name: 'busqueda',
+        query: { order: 'newest' }
+      })
+    }
+  }
+}
+</script>
 
 <style lang="scss" scoped>
 .navsearch_container {
@@ -22,7 +31,7 @@
     display: none;
   }
 
-  a {
+  a, button {
     font-size: $m;
     font-weight: $bold;
     color: $color-navy;
@@ -31,7 +40,11 @@
   a:nth-child(1):after,
   a:nth-child(2):after,
   a:nth-child(3):after,
-  a:nth-child(4):after {
+  a:nth-child(4):after,
+  button:nth-child(1):after,
+  button:nth-child(2):after,
+  button:nth-child(3):after,
+  button:nth-child(4):after {
     color: $color-navy;
     content: '\22EE';
     margin: 0.5rem;

components/ProductCard.vue

@@ -34,22 +34,15 @@
           class="description"
           :class="{ 'not-expanded-description': !expanded }"
         >
-          <p
+          <p 
             v-if="product.description"
-            v-sanitize="[
-              {
-                allowedTags: ['p'],
-                allowedAttributes: {},
-              },
-              product.description,
-            ]"
-          >
+            v-html="sanitizedDescription"
+          ></p>
             <span v-if="product.shipping_terms">{{
               product.shipping_terms
             }}</span>
-          </p>
         </div>
-        <b-collapse :id="'collapse-' + product.id" accordion="my-accordion">
+        <b-collapse :id="'collapse-' + product.id" accordion="my-accordion" @show="onOpen" @hide="onClose">
           <div class="tags_container">
             <NuxtLink
               :to="tagRoute(n)"
@@ -142,16 +135,16 @@
         }}</span>
       </div>
     </div>
-
     <div v-if="expanded && relatedProducts" class="related_products">
       <h2>Productos relacionados</h2>
       <ProductsRelated :related-products="relatedProducts" />
     </div>
-    <ProductModal :product="product" @close="closeModal" />
+    <ProductModal v-if="modal" :product="product" @close-modal="closeModal" />
   </div>
 </template>
 
 <script>
+import DOMPurify from 'dompurify'
 import { mapState } from 'pinia'
 import socialShare from '~/utils/socialShare'
 export default {
@@ -171,30 +164,40 @@ export default {
   },
   computed: {
     ...mapState(useAuthStore, ['access']),
+    sanitizedDescription() {
+      return DOMPurify.sanitize(this.product.description, {
+        ALLOWED_TAGS: ['p'],
+        ALLOWED_ATTR: [],
+      })
+    }
   },
   mounted() {
     this.productUrl = window.location.origin + `/productos/${this.product.id}`
-
-    this.$root.$on('bv::collapse::state', async (collapseId, isJustShown) => {
-      if (collapseId === `collapse-${this.product.id}`) {
-        this.expanded = isJustShown
-        if (this.expanded) {
-          await this.getRelatedProducts()
-          await this.sendLog('view')
-        }
-      }
-    })
+    this.getRelatedProducts()
   },
 
   methods: {
+    async onOpen() {
+      this.expanded = true
+      await this.getRelatedProducts()
+      await this.sendLog('view')
+    },
+    onClose() {
+      this.expanded = false
+    },
     tagRoute(tag) {
       return `/busqueda?tags=${tag}`
     },
     async getRelatedProducts() {
       try {
-        const { data } = await this.$api.get(
-          `/products/${this.product.id}/related/`
-        )
+        const config = useRuntimeConfig()
+        const data = await $fetch(`/products/${this.product.id}/related/`, {
+          baseURL: config.public.baseURL,
+          method: 'GET',
+          headers: {
+            Authorization: '/',
+          },
+        })
         this.relatedProducts = data
       } catch {
         this.relatedProducts = null