catalogo y producto page
This commit is contained in:
María
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="productcard_container">
|
||||
<div class="row productcard_container-basic">
|
||||
<div class="image_container col-md-5">
|
||||
<div class="productcard_container-basic">
|
||||
<div class="image_container">
|
||||
<img :src="getProductImg(product)" class="image" alt="" />
|
||||
</div>
|
||||
<div class="info_container col-md-5">
|
||||
<div class="info_container">
|
||||
<h2 variant="primary">
|
||||
{{ product?.name }}
|
||||
</h2>
|
||||
@@ -15,7 +15,7 @@
|
||||
<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-else>| Sin gastos de envío</span> -->
|
||||
|
||||
<span v-if="product?.stock">| {{ `Stock ${product?.stock}€` }} </span>
|
||||
<p
|
||||
@@ -32,14 +32,19 @@
|
||||
:to="tagRoute(n)"
|
||||
class="tag_container"
|
||||
>
|
||||
<img
|
||||
class="tag_img"
|
||||
alt="tag image"
|
||||
src="@/assets/img/latienda-tag.svg"
|
||||
/>
|
||||
<span>{{ n }}</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<BButton
|
||||
v-if="company?.shop_link"
|
||||
class="div-link"
|
||||
align="center"
|
||||
target="_blank"
|
||||
@click="buyIntent"
|
||||
>
|
||||
<img class="div-link-img" src="@/assets/img/shopping-bag-white.svg" />
|
||||
COMPRA EN SU TIENDA
|
||||
</BButton>
|
||||
<div class="smlogos_container">
|
||||
<p class="share-text">Comparte:</p>
|
||||
<div class="smlogo_container">
|
||||
@@ -76,44 +81,34 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="coop_info">
|
||||
<NuxtLink :to="`/c/${company?.id}`">
|
||||
<h2>{{ company?.company_name }}</h2>
|
||||
</NuxtLink>
|
||||
<p class="share-text">Vendido por:</p>
|
||||
<h4>{{ company?.company_name }}</h4>
|
||||
<p class="description">{{ company?.description }}</p>
|
||||
<a href="#">{{ company?.web_link }}</a>
|
||||
<NuxtLink :to="`/productoras/${company?.id}`" class="link-saber">
|
||||
<p>Saber más</p>
|
||||
</NuxtLink>
|
||||
</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" />
|
||||
|
||||
<BModal
|
||||
id="modal-center"
|
||||
v-model="active"
|
||||
centered
|
||||
title="latienda.coop"
|
||||
:ok-variant="modalColor"> {{ modalText }}
|
||||
id="modal-center"
|
||||
v-model="active"
|
||||
centered
|
||||
title="latienda.coop"
|
||||
:ok-variant="modalColor"> {{ modalText }}
|
||||
</BModal>
|
||||
</div>
|
||||
<div class="related_products">
|
||||
<div class="title-container">
|
||||
<div class="title-lines"></div>
|
||||
<h2 v-if="related" class="items-title">Productos relacionados</h2>
|
||||
<h2 v-else class="items-title">Otros productos</h2>
|
||||
<div class="title-lines"></div>
|
||||
</div>
|
||||
<ProductsRelated :related-products="relatedProducts" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -285,18 +280,65 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.productcard_container {
|
||||
border: 3px solid $color-grey-nav;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 12px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: linear-gradient($color-consumo-base-light, $color-bg-light);
|
||||
border-radius: 1rem;
|
||||
padding: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
gap: 3rem;
|
||||
color: $color-primary;
|
||||
|
||||
@include mobile {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.productcard_container-basic {
|
||||
padding: 25px 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: start;
|
||||
justify-content: start;
|
||||
gap: 4rem;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
margin-top: 4rem;
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
@include mobile {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 5rem;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.image_container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
height: 400px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
border-radius: 16px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
@@ -306,96 +348,97 @@ export default {
|
||||
}
|
||||
|
||||
.info_container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
@include mobile {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
h2 {
|
||||
outline: none;
|
||||
font-weight: medium;
|
||||
color: $color-navy;
|
||||
font-size: $m;
|
||||
font-size: $h2;
|
||||
font-weight: $bold;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.price {
|
||||
font-weight: bold;
|
||||
color: $color-navy;
|
||||
font-size: $m;
|
||||
font-weight: $medium;
|
||||
color: $color-primary;
|
||||
font-size: $h5;
|
||||
}
|
||||
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;
|
||||
width: 80%;
|
||||
@include tablet {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-orange;
|
||||
font-weight: $bold;
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button_buy-simple {
|
||||
border: 3px solid $color-orange;
|
||||
border-radius: 8px;
|
||||
background-color: $color-light;
|
||||
padding: 10px 20px;
|
||||
.div-link:hover {
|
||||
background-color: white;
|
||||
transition: all 0.2s ease;
|
||||
color: $color-button;
|
||||
}
|
||||
|
||||
.div-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
width: auto;
|
||||
border: 1px solid $color-button;
|
||||
border-radius: 5px;
|
||||
background-color: $color-button;
|
||||
font-weight: $bold;
|
||||
padding: 15px 20px;
|
||||
color: white;
|
||||
margin-top: 2rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px rgba(99, 99, 99, 0.2);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button_cart_img {
|
||||
margin-right: 0;
|
||||
.div-link-img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.tags_container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
gap: 8px;
|
||||
margin-top: 1rem;
|
||||
|
||||
.tag_img {
|
||||
width: 18px;
|
||||
.tag_container {
|
||||
margin: 5px 6px 0 0;
|
||||
border-radius: 1rem;
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
font-size: $xs;
|
||||
background-color: white;
|
||||
color: $color-primary;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.share-text {
|
||||
color: $color-navy;
|
||||
font-size: $m;
|
||||
color: $color-primary;
|
||||
font-size: $h5;
|
||||
font-weight: $medium;
|
||||
margin-top: 2rem;
|
||||
padding-bottom: 0.2em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.smlogo_container {
|
||||
@@ -406,7 +449,7 @@ export default {
|
||||
.smlogo_img {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
fill: $color-greylayout;
|
||||
fill: $color-button;
|
||||
}
|
||||
img:hover {
|
||||
transform: scale(1.1);
|
||||
@@ -421,29 +464,63 @@ export default {
|
||||
|
||||
.coop_info {
|
||||
margin-top: 25px;
|
||||
p,
|
||||
a {
|
||||
margin-top: 8px;
|
||||
font-family: $font-secondary;
|
||||
font-size: $s;
|
||||
color: $color-greytext;
|
||||
h4 {
|
||||
font-size: $h4;
|
||||
font-weight: $medium;
|
||||
color: $color-navy;
|
||||
margin-top: 5px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
|
||||
.description {
|
||||
font-size: $m;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.link-saber {
|
||||
font-weight: $bold;
|
||||
color: $color-button;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.related_products {
|
||||
background-color: $color-lighter-green;
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 24px;
|
||||
padding: 4rem 4rem;
|
||||
background: $color-bg-light;
|
||||
width: 100%;
|
||||
&-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 35px auto;
|
||||
font-weight: medium;
|
||||
color: $color-navy;
|
||||
font-size: $m;
|
||||
display: inline-block;
|
||||
.title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
.title-lines {
|
||||
width: 34px;
|
||||
height: 2px;
|
||||
background: $color-consumo-base;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.items-title {
|
||||
font-size: $h5;
|
||||
text-transform: uppercase;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user