catalogo y producto page
This commit is contained in:
María
@@ -12,7 +12,7 @@
|
||||
<Carousel
|
||||
ref="productDetails"
|
||||
class="carousel"
|
||||
:items-to-show="4"
|
||||
:items-to-show="itemsToShow"
|
||||
:gap="1"
|
||||
:pagination-enabled="false"
|
||||
:wrap-around="false"
|
||||
@@ -78,6 +78,10 @@ export default {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
itemsToShow: {
|
||||
type: Number,
|
||||
default: 4,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -117,7 +121,7 @@ export default {
|
||||
name: item.company_name,
|
||||
image:
|
||||
item.logo || this.defaultImage,
|
||||
url: `/c/${item.id}`,
|
||||
url: `/productoras/${item.id}`,
|
||||
}
|
||||
}
|
||||
if (this.type === 'category') {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="c-filter">
|
||||
<div class="c-filter-content">
|
||||
<div class="">
|
||||
<div v-b-toggle.collapse-all class="filters-header">
|
||||
<img
|
||||
class="image"
|
||||
src="@/assets/img/product-filter-filtrar.svg"
|
||||
src="@/assets/img/filter.svg"
|
||||
alt=""
|
||||
/>
|
||||
<h2 class="text">FILTRAR POR</h2>
|
||||
<h2 class="text">FILTRAR PROPUESTAS</h2>
|
||||
</div>
|
||||
<BCollapse id="collapse-all" visible>
|
||||
<!-- Location -->
|
||||
@@ -47,7 +47,7 @@
|
||||
:max="500"
|
||||
step="10"
|
||||
thumb-label="always"
|
||||
color="#8cead8"
|
||||
color="#143E8C"
|
||||
track-color="#d6d5d5"
|
||||
>
|
||||
<template #prepend>
|
||||
@@ -117,7 +117,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<button class="filter-button" @click="applyFilters">
|
||||
Aplicar
|
||||
APLICAR FILTROS
|
||||
</button>
|
||||
</div>
|
||||
</BCollapse>
|
||||
@@ -241,6 +241,25 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.c-filter {
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: linear-gradient($color-consumo-base-light, $color-bg-light);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
margin-top: 2rem;
|
||||
gap: 3rem;
|
||||
color: $color-primary;
|
||||
|
||||
@include mobile {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
margin-top: 30px;
|
||||
background-color: $color-navy;
|
||||
@@ -263,11 +282,11 @@ export default {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.text {
|
||||
font-size: $s;
|
||||
font-size: $m;
|
||||
margin: 0;
|
||||
margin-left: 10px;
|
||||
color: $color-navy;
|
||||
font-weight: $bold;
|
||||
color: $color-primary;
|
||||
font-weight: $medium;
|
||||
}
|
||||
.image {
|
||||
height: 20px;
|
||||
@@ -277,7 +296,7 @@ export default {
|
||||
.location {
|
||||
label {
|
||||
font-size: $s;
|
||||
color: $color-navy;
|
||||
color: $color-primary;
|
||||
font-weight: $bold;
|
||||
position: relative;
|
||||
}
|
||||
@@ -311,8 +330,9 @@ export default {
|
||||
|
||||
h2 {
|
||||
font-size: $s;
|
||||
color: $color-navy;
|
||||
font-weight: $bold;
|
||||
color: $color-primary;
|
||||
font-weight: $medium;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
img {
|
||||
width: 12px;
|
||||
@@ -322,7 +342,7 @@ export default {
|
||||
display: inline-block;
|
||||
font-family: Noto Sans Regular, sans-serif;
|
||||
font-size: $s;
|
||||
color: $color-greytext;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,26 +1,16 @@
|
||||
<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"
|
||||
<div class="cards-grid">
|
||||
<div v-for="product in products" :key="product.id">
|
||||
<ProductCard :key="product.key" :product="product" />
|
||||
</div>
|
||||
<div class="c-pagination">
|
||||
<BPagination
|
||||
v-model="currentPage"
|
||||
:v-if="products"
|
||||
:total-rows="rows"
|
||||
:per-page="perPage"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
class="image-default"
|
||||
src="@/assets/img/consumo-default.png"
|
||||
alt=""
|
||||
/>
|
||||
<h3>{{ product.name }}</h3>
|
||||
<span v-if="product.price" class="price">{{ `${product.price}€` }}</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -31,56 +21,46 @@ export default {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
productsPerPage: {
|
||||
type: Number,
|
||||
default: 8,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1,
|
||||
perPage: this.productsPerPage,
|
||||
rows: this.relatedProducts.length,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
products() {
|
||||
const initial = (this.currentPage - 1) * this.perPage
|
||||
const final = this.currentPage * this.perPage
|
||||
const items = this.relatedProducts ? this.relatedProducts.slice(initial, final) : []
|
||||
return items
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.related_products {
|
||||
background-color: $color-lighter-green;
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
|
||||
img {
|
||||
margin-top: 12px;
|
||||
.cards-grid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
gap: 32px var(--spacing-p-8, 32px);
|
||||
align-self: stretch;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.image-default {
|
||||
object-fit: cover;
|
||||
.c-pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user