93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
<template>
|
|
<div class="c-container">
|
|
<ProductCardDetails
|
|
:product="product"
|
|
:related="related"
|
|
:related-products="relatedProducts"
|
|
:company="company"
|
|
:products-per-page="4"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
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: `consumo-cuidado | ${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>
|
|
.c-container {
|
|
margin-top: 40px;
|
|
margin-bottom: 80px;
|
|
@include mobile {
|
|
margin-top: 80px;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
margin-bottom: 40px;
|
|
font-size: $xl;
|
|
color: $color-navy;
|
|
}
|
|
</style>
|