From f33da4af80c7cac3644095c685a4d973d9cd87dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Mon, 18 Aug 2025 13:07:36 +0200
Subject: [PATCH] product page

---
 components/ProductCardDetails.vue  | 445 +++++++++++++++++++++++++++++
 components/ProductModal.vue        | 310 ++++++++++++++++++++
 components/ProductsRelated.vue     |  86 ++++++
 package-lock.json                  |  17 ++
 package.json                       |   1 +
 pages/editar/perfil/contrasena.vue |   1 -
 pages/productos/[id].vue           |  89 +++++-
 7 files changed, 942 insertions(+), 7 deletions(-)
 create mode 100644 components/ProductCardDetails.vue
 create mode 100644 components/ProductModal.vue
 create mode 100644 components/ProductsRelated.vue

diff --git a/components/ProductCardDetails.vue b/components/ProductCardDetails.vue
new file mode 100644
index 0000000..8956f92
--- /dev/null
+++ b/components/ProductCardDetails.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="productcard_container">
+    <div class="row productcard_container-basic">
+      <div class="image_container col-md-5">
+        <img :src="getProductImg(product)" class="image" alt="" />
+      </div>
+      <div class="info_container col-md-5">
+        <h2 variant="primary">
+          {{ product?.name }}
+        </h2>
+        <span v-if="product?.price" class="price">{{
+          `${product?.price}€`
+        }}</span>
+        <span v-else class="price">Precio a consultar</span>
+        <span v-if="Number(product?.shipping_cost)"
+          >| {{ `Gastos de envío ${product?.shipping_cost}€` }}</span
+        >
+        <span v-else>| Sin gastos de envío</span>
+
+        <span v-if="product?.stock">| {{ `Stock ${product?.stock}€` }} </span>
+        <p
+          v-if="product?.description"
+          class="description"
+          v-html="sanitize(product?.description)"
+        ></p>
+        <span v-if="product?.shipping_terms">{{ product?.shipping_terms }}</span>
+        <BCollapse visible accordion="my-accordion">
+          <div class="tags_container">
+            <NuxtLink
+              v-for="n in product?.tags"
+              :key="n"
+              :to="tagRoute(n)"
+              class="tag_container"
+            >
+              <img
+                class="tag_img"
+                alt="tag image"
+                src="@/assets/img/latienda-tag.svg"
+              />
+              <span>{{ n }}</span>
+            </NuxtLink>
+          </div>
+          <div class="smlogos_container">
+            <p class="share-text">Comparte:</p>
+            <div class="smlogo_container">
+              <a @click="shareFacebook">
+                <img
+                  alt="facebook logo"
+                  class="smlogo_img"
+                  src="@/assets/img/latienda-smlogo-facebook.svg"
+                />
+              </a>
+            </div>
+            <a :href="shareTwitter()">
+              <div class="smlogo_container">
+                <img
+                  alt="twitter logo"
+                  class="smlogo_img"
+                  src="@/assets/img/latienda-smlogo-twitter.svg"
+                />
+              </div>
+            </a>
+            <a
+              :href="shareWhatsApp()"
+              data-action="share/whatsapp/share"
+              target="_blank"
+              title="latiendacoop"
+            >
+              <div class="smlogo_container">
+                <img
+                  alt="whatsapp logo"
+                  class="smlogo_img"
+                  src="@/assets/img/latienda-smlogo-whatsapp.svg"
+                />
+              </div>
+            </a>
+          </div>
+          <div class="coop_info">
+            <NuxtLink :to="`/c/${company?.id}`">
+              <h2>{{ company?.company_name }}</h2>
+            </NuxtLink>
+            <p class="description">{{ company?.description }}</p>
+            <a href="#">{{ company?.web_link }}</a>
+          </div>
+        </BCollapse>
+      </div>
+      <div class="col-md-2 button_container-detail" align="center">
+        <button class="button_buy-simple" @click="buyIntent">
+          <img
+            class="button_cart_img"
+            alt="cart"
+            src="@/assets/img/latienda-carrito.svg"
+          />
+        </button>
+        <div
+          v-if="product?.discount && product?.discount > 0"
+          class="discount-tag"
+        >
+          {{ `Descuento ${product?.discount}%` }}
+        </div>
+      </div>
+    </div>
+    <div class="related_products">
+      <h2 v-if="related">Productos relacionados</h2>
+      <h2 v-else>Otros productos</h2>
+      <ProductsRelated :related-products="relatedProducts" />
+    </div>
+    <ProductModal v-if="modal" :product="product" @close-modal="closeModal" />
+  </div>
+</template>
+
+<script>
+import DOMPurify from 'dompurify'
+import socialShare from '~/utils/socialShare'
+export default {
+  props: {
+    product: {
+      type: Object,
+      default: () => ({}),
+    },
+    company: {
+      type: Object,
+      default: () => ({}),
+    },
+    relatedProducts: {
+      type: Array,
+      default: () => [],
+    },
+    related: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      modal: true,
+      productUrl: null,
+      geolocation: null,
+    }
+  },
+
+  mounted() {
+    this.productUrl = window.location.href
+    this.sendLog('view')
+  },
+
+  methods: {
+    getProductImg(product) {
+      if (product && product.image) 
+        return product.image
+      return `@/assets/img/latienda-product-default.svg`
+    },
+    tagRoute(tag) {
+      return `/busqueda?tags=${tag}`
+    },
+    openUrl(url) {
+      window.open(url)
+    },
+    closeModal(value) {
+      this.modal = false
+      if (value === 200) {
+        this.$bvToast.toast(`Email enviado correctamente`, {
+          title: 'latienda.coop',
+          autoHideDelay: 5000,
+          appendToast: true,
+        })
+      } else if (value) {
+        this.$bvToast.toast(`Se ha producido un error en el envío`, {
+          title: 'latienda.coop',
+          autoHideDelay: 5000,
+          appendToast: true,
+          variant: 'danger',
+        })
+      }
+    },
+    buyIntent() {
+      this.sendLog('shop')
+      return this.product.url
+        ? this.openUrl(this.product.url)
+        : (this.modal = true)
+    },
+
+    async getPosition() {
+      const geoLocation = () =>
+        new Promise((resolve, reject) =>
+          navigator.geolocation.getCurrentPosition(
+            (posData) => {
+              resolve(posData)
+            },
+            (error) => {
+              reject(error)
+            }
+          )
+        )
+      try {
+        const position = await geoLocation()
+        const geo = {
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        }
+        return geo
+      } catch {
+        const geo = null
+        return geo
+      }
+    },
+
+    async sendLog(action) {
+      const geo = await this.getPosition()
+      try {
+        const { data } = await this.$axios.get(
+          'https://api.ipify.org?format=json'
+        )
+        const ip = data.ip
+        const object = {
+          action: action,
+          action_object: {
+            model: 'product',
+            id: this.product.id,
+          },
+        }
+        if (ip) object.ip = ip
+        if (geo) object.geo = geo
+        await this.$api.post(`/stats/me/`, object)
+      } catch {}
+    },
+
+    shareFacebook() {
+      const url = socialShare.facebook(this.productUrl)
+      window.open(url, '_blank')
+    },
+    shareTwitter() {
+      return socialShare.twitter(this.productUrl)
+    },
+    shareWhatsApp() {
+      return socialShare.whatsApp(this.productUrl)
+    },
+
+    sanitize(dirtyHtml) {
+      return DOMPurify.sanitize(dirtyHtml, {
+        ALLOWED_TAGS: [
+          'b',
+          'i',
+          'em',
+          'strong',
+          'a',
+          'p',
+          'br',
+          'ul',
+          'li',
+          'ol',
+          'span',
+          'h1',
+          'h2',
+          'h3',
+        ],
+        ALLOWED_ATTR: ['href', 'target', 'rel', 'class'],
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.productcard_container {
+  border: 3px solid $color-grey-nav;
+  border-radius: 5px;
+  margin-bottom: 12px;
+}
+.productcard_container-basic {
+  padding: 25px 20px;
+}
+
+.image_container {
+  height: 100%;
+  overflow: hidden;
+  margin: auto;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.info_container {
+  h2 {
+    outline: none;
+    font-weight: medium;
+    color: $color-navy;
+    font-size: $m;
+  }
+  .price {
+    font-weight: bold;
+    color: $color-navy;
+    font-size: $m;
+  }
+  span {
+    color: $color-greytext;
+  }
+  .description {
+    margin-top: 8px;
+    font-family: $font-secondary;
+    font-size: $s;
+    color: $color-greytext;
+  }
+}
+
+.button_container {
+  display: flex;
+  flex-direction: column;
+  font-size: $m;
+
+  span {
+    margin-top: 15px;
+    text-align: center;
+    font-weight: medium;
+    font-size: $m;
+    color: $color-navy;
+  }
+
+  .button_buy {
+    border: 3px solid $color-orange;
+    border-radius: 5px;
+    background-color: $color-light;
+
+    &:hover {
+      box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
+      transition: all 0.2s ease;
+    }
+
+    span {
+      color: $color-orange;
+      font-weight: $bold;
+      display: inline-block;
+      margin-bottom: 15px;
+    }
+  }
+}
+
+.button_buy-simple {
+  border: 3px solid $color-orange;
+  border-radius: 8px;
+  background-color: $color-light;
+  padding: 10px 20px;
+
+  &:hover {
+    box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
+    transition: all 0.2s ease;
+  }
+
+  .button_cart_img {
+    margin-right: 0;
+  }
+}
+
+.tag_container {
+  margin: 25px 6px 0 0;
+  border: 2px solid $color-greylayout;
+  border-radius: 5px;
+  padding: 6px 10px;
+  display: inline-block;
+  font-family: $font-secondary;
+  font-size: $xs;
+  color: $color-greytext;
+
+  .tag_img {
+    width: 18px;
+  }
+}
+
+.share-text {
+  color: $color-navy;
+  font-size: $m;
+  margin-top: 2rem;
+  padding-bottom: 0.2em;
+}
+
+.smlogo_container {
+  cursor: pointer;
+  display: inline-block;
+  margin-bottom: 0.5rem;
+
+  .smlogo_img {
+    cursor: pointer;
+    width: 40px;
+    fill: $color-greylayout;
+  }
+  img:hover {
+    transform: scale(1.1);
+    transition: all 0.2s ease;
+  }
+}
+
+.button_cart_img {
+  width: 20px;
+  margin-right: 10px;
+}
+
+.coop_info {
+  margin-top: 25px;
+  p,
+  a {
+    margin-top: 8px;
+    font-family: $font-secondary;
+    font-size: $s;
+    color: $color-greytext;
+  }
+  a {
+    text-decoration: underline;
+  }
+}
+
+.related_products {
+  background-color: $color-lighter-green;
+  text-align: center;
+  padding: 0 15px;
+
+  h2 {
+    margin: 35px auto;
+    font-weight: medium;
+    color: $color-navy;
+    font-size: $m;
+    display: inline-block;
+  }
+}
+
+.discount-tag {
+  margin: 5px;
+  border: none;
+  background-color: $color-green;
+  border-radius: 5px;
+  padding: 6px 10px;
+  display: inline-block;
+  font-family: $font-secondary;
+  font-size: $xs;
+  color: $color-greytext;
+}
+
+.content > h2,
+h3,
+p {
+  margin: 0;
+}
+</style>
diff --git a/components/ProductModal.vue b/components/ProductModal.vue
new file mode 100644
index 0000000..04011c2
--- /dev/null
+++ b/components/ProductModal.vue
@@ -0,0 +1,310 @@
+<template>
+  <transition name="modal">
+    <div v-if="product" class="mask">
+      <div class="wrapper" @click.self="handleEmit">
+        <div class="container">
+          <div class="element header">
+            <h2>Interesado en comprar el producto</h2>
+            <img src="@/assets/img/latienda-lineapuntos-2.svg" alt="" />
+          </div>
+
+          <div class="modal-body">
+            <form @submit.prevent="sendForm">
+              <div>
+                <BFormGroup class="element">
+                  <BFormInput
+                    v-model="form.email"
+                    required
+                    class="input"
+                    size="lg"
+                    placeholder="Email"
+                  />
+                </BFormGroup>
+              </div>
+
+              <div>
+                <BFormGroup class="element">
+                  <BFormInput
+                    v-model="form.telephone"
+                    required
+                    class="input"
+                    size="lg"
+                    placeholder="Teléfono"
+                  />
+                </BFormGroup>
+              </div>
+              <div v-if="!isAuthenticated" class="element">
+                <BButton
+                  class="input"
+                  size="lg"
+                  variant="outline-primary w-100"
+                  @click="redirectToLogin"
+                  >Login</BButton
+                >
+              </div>
+              <div class="element coop">
+                <!-- <BCard
+                  img-src="https://placekitten.com/1000/300"
+                  img-alt="Card image"
+                  img-left
+                >
+                  <BCardText>
+                    <h3>Cooperativa</h3>
+                    <p>Dirección</p>
+                  </BCardText>
+                </BCard> -->
+                <div class="content">
+                  <img :src="getImgUrl(product.company.logo)" alt="" />
+                  <div class="text">
+                    <h3>{{ product?.company?.company_name }}</h3>
+                    <p>{{ product?.company?.address }}</p>
+                    <br />
+                  </div>
+                </div>
+              </div>
+
+              <div class="element coop">
+                <!-- <BCard
+                  img-src="https://placekitten.com/1000/300"
+                  img-alt="Card image"
+                  img-left
+                >
+                  <BCardText>
+                    <h3>Cooperativa</h3>
+                    <p>Dirección</p>
+                  </BCardText>
+                </BCard> -->
+                <div class="content">
+                  <img :src="getImgUrl(product.image)" alt="" />
+                  <div class="text">
+                    <h3>{{ product?.name }}</h3>
+                    <p>{{ product?.price }} €</p>
+                    <p class="text-muted">
+                      {{ product?.shipping_cost || 'Sin gastos de envío' }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div class="element">
+                <BFormTextarea
+                  id="textarea-no-resize"
+                  v-model="form.comment"
+                  class="input"
+                  placeholder="Comentarios"
+                  rows="3"
+                  no-resize
+                />
+              </div>
+              <div>
+                <BButton type="submit" class="enviar-button">
+                  <v-progress-circular
+                    v-if="loading"
+                    :size="15"
+                    :width="2"
+                    indeterminate
+                  />
+                  <span v-else>Enviar</span>
+                </BButton>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { useAuthStore } from '@/stores/auth'
+export default {
+  props: {
+    product: { type: Object, default: () => ({}) },
+  },
+  emits: ['closeModal'],
+  setup() {
+    const authStore = useAuthStore()
+    return {
+      authStore
+    }
+  },
+  data() {
+    return {
+      isAuthenticated: true,
+      form: {
+        email: undefined,
+        telephone: undefined,
+        company: undefined,
+        product: undefined,
+        comment: '',
+      },
+      loading: false,
+    }
+  },
+
+  mounted() {
+    this.isAuthenticated = this.authStore.isAuthenticated
+    if (this.isAuthenticated) {
+      const email = this.authStore.email
+      this.form.email = email
+    }
+  },
+
+  methods: {
+    async sendForm() {
+      this.form.company = this.product.company.id
+      this.form.product = this.product.id
+      this.loading = true
+
+      let response
+      let status
+      const config = useRuntimeConfig()
+      try { //TODO: review if its working
+        response = await $fetch(`/purchase_email/`, {
+          baseURL: config.public.baseURL,
+          method: 'POST',
+          body: { ...this.form }
+        })
+        status = response.status
+      } catch {
+        status = 500
+      }
+
+      this.loading = false
+      this.$emit('closeModal', status)
+    },
+    getImgUrl(image) {
+      if (image) return image
+      return `@/assets/img/latienda-product-default.svg`
+    },
+    redirectToLogin() {
+      this.$router.push({
+        name: 'login',
+      })
+    },
+    handleEmit() {
+      this.$emit('closeModal')
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+.mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+  transition: opacity 0.3s ease;
+}
+
+.wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 500px;
+  margin: 0px auto;
+  padding: 20px 40px;
+  background-color: #fff;
+  border-radius: 7px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+}
+
+.element {
+  margin-bottom: 10px;
+}
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.header > h2 {
+  margin-bottom: 20px;
+  text-align: center;
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: #374493;
+}
+
+.header > img {
+  width: 50px;
+}
+
+.modal-body {
+  width: 300px;
+}
+
+.input {
+  font-size: 0.75rem;
+  margin: 0;
+}
+
+.input-group-text {
+  width: 48px;
+  border-right: none;
+  background-color: #ffffff;
+}
+
+.coop {
+  border: 1px lightgray solid;
+  border-radius: 5px;
+}
+
+.coop > .content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  margin: 5px 10px;
+}
+.coop > .content > img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  margin-right: 5px;
+}
+.coop > .content > .text > h3,
+p {
+  font-size: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.enviar-button {
+  width: 100%;
+  background: #fd6871;
+  border-color: #fd6871;
+  color: white;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter {
+  opacity: 0;
+}
+
+.modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(0.8);
+}
+</style>
diff --git a/components/ProductsRelated.vue b/components/ProductsRelated.vue
new file mode 100644
index 0000000..bf4e84c
--- /dev/null
+++ b/components/ProductsRelated.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="row related_products-cards">
+    <NuxtLink
+      v-for="(product, key) in relatedProducts"
+      :key="`related-${key}`"
+      :to="`/productos/${product.id}`"
+      class="col mx-2 related_product-card"
+    >
+      <img
+        v-if="product.image"
+        :src="product.image"
+        alt=""
+        class="related_product-image"
+      />
+      <img
+        v-else
+        class="image-default"
+        src="@/assets/img/latienda-product-default.svg"
+        alt=""
+      />
+      <h3>{{ product.name }}</h3>
+      <span v-if="product.price" class="price">{{ `${product.price}€` }}</span>
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    relatedProducts: {
+      type: Array,
+      default: () => [],
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.related_products {
+  background-color: $color-lighter-green;
+  text-align: center;
+  padding: 0 15px;
+
+  img {
+    margin-top: 12px;
+  }
+
+  .image-default {
+    object-fit: cover;
+  }
+
+  .star {
+    width: 12px;
+    margin-right: 1px;
+  }
+
+  .related_product-card {
+    border: 3px solid $color-grey-nav;
+    border-radius: 5px;
+    margin-bottom: 35px;
+
+    .related_product-image {
+      width: 100px;
+      height: 100px;
+      object-fit: cover;
+    }
+
+    h3 {
+      font-weight: $regular;
+      color: $color-navy;
+      font-size: $m;
+      display: inline-block;
+      margin-bottom: 0;
+    }
+
+    span {
+      font-weight: $regular;
+      color: $color-navy;
+      font-size: $m;
+      display: block;
+      font-weight: bolder;
+      margin-bottom: 5px;
+    }
+  }
+}
+</style>
diff --git a/package-lock.json b/package-lock.json
index 1914c5e..48d8e98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@nuxt/eslint": "^1.8.0",
         "@nuxtjs/sitemap": "^7.4.3",
         "@pinia/nuxt": "^0.11.2",
+        "dompurify": "^3.2.6",
         "eslint": "^9.32.0",
         "nuxt": "^3.17.7",
         "pinia": "^3.0.3",
@@ -4321,6 +4322,13 @@
       "integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==",
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -7027,6 +7035,15 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+      "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/domutils": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
diff --git a/package.json b/package.json
index b0adf2a..a2471ca 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@nuxt/eslint": "^1.8.0",
     "@nuxtjs/sitemap": "^7.4.3",
     "@pinia/nuxt": "^0.11.2",
+    "dompurify": "^3.2.6",
     "eslint": "^9.32.0",
     "nuxt": "^3.17.7",
     "pinia": "^3.0.3",
diff --git a/pages/editar/perfil/contrasena.vue b/pages/editar/perfil/contrasena.vue
index bc50380..30a5f0e 100644
--- a/pages/editar/perfil/contrasena.vue
+++ b/pages/editar/perfil/contrasena.vue
@@ -31,7 +31,6 @@
             <SubmitButton text="Actualizar" image-url="" />
           </div>
         </form>
-        {{ form }}
       </BCol>
     </BRow>
   </BContainer>
diff --git a/pages/productos/[id].vue b/pages/productos/[id].vue
index 24fee24..29afb45 100644
--- a/pages/productos/[id].vue
+++ b/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>
\ No newline at end of file
+.title {
+  margin-bottom: 40px;
+  font-size: $xl;
+  color: $color-navy;
+}
+</style>