busqueda functionality amend

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