product page

pages/editar/perfil/contrasena.vue

@@ -31,7 +31,6 @@
             <SubmitButton text="Actualizar" image-url="" />
           </div>
         </form>
-        {{ form }}
       </BCol>
     </BRow>
   </BContainer>

pages/productos/[id].vue

@@ -1,15 +1,92 @@
 <template>
-  <div>
-    Producto 1
+  <div class="container">
+    <h1 class="title">Detalles del producto</h1>
+    <ProductCardDetails
+      :product="product"
+      :related="related"
+      :related-products="relatedProducts"
+      :company="company"
+    />
   </div>
 </template>
 
 <script>
-  export default {
-    
-  }
+import { useRoute } from 'vue-router'
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'mainbanner'
+    })
+  },
+  data() {
+    return {
+      product: null,
+      company: null,
+      relatedProducts: null,
+      related: false,
+    }
+  },
+  async mounted() {
+    try {
+      const config = useRuntimeConfig()
+      const $route = useRoute()
+      this.product = await $fetch(`/products/${$route.params.id}/`, {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+      })
+
+      if (this.product.company) {
+        this.company = await $fetch(`/companies/${this.product.company.id}/`, {
+          baseURL: config.public.baseURL,
+          method: 'GET',
+        })
+      }
+
+      this.relatedProducts = await $fetch(`/products/${this.product.id}/related/`, {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+      })
+      this.related = this.relatedProducts.length > 0
+
+      //return { product, company, relatedProducts, related }
+    } catch (error) {
+      console.error('Error fetching product details:', error)
+    }
+  },
+  //TODO: meta data
+  // mounted() {
+  //   useHead({
+  //     title: `latienda.coop | ${this.product.id}`,
+  //     meta: [
+  //       {
+  //         hid: 'description',
+  //         name: 'description',
+  //         content: this.product.description,
+  //       },
+  //       { property: 'og:title', content: this.product.id },
+  //       { property: 'og:description', content: this.product.description },
+  //       { property: 'og:image', content: this.product.image },
+  //       { property: 'og:url', content: this.product.url },
+  //       { name: 'twitter:card', content: 'summary_large_image' },
+  //     ],
+  //   })
+  // },
+  
+}
 </script>
 
 <style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+  @include mobile {
+    margin-top: 80px;
+  }
+}
 
-</style>
+.title {
+  margin-bottom: 40px;
+  font-size: $xl;
+  color: $color-navy;
+}
+</style>