68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<template>
|
|
<div class="cards-grid">
|
|
<div v-for="(product, key) in products" :key="product.id">
|
|
<ProductCard :key="key" :product="product" />
|
|
</div>
|
|
<div class="c-pagination">
|
|
<BPagination
|
|
v-model="currentPage"
|
|
:v-if="relatedProducts"
|
|
:total-rows="rows"
|
|
:per-page="perPage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
relatedProducts: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
productsPerPage: {
|
|
type: Number,
|
|
default: 8,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
currentPage: 1,
|
|
perPage: this.productsPerPage ? this.productsPerPage : 8,
|
|
//rows: this.relatedProducts ? this.relatedProducts.length : 0,
|
|
}
|
|
},
|
|
computed: {
|
|
rows() {
|
|
return Array.isArray(this.relatedProducts) ? this.relatedProducts.length : 0
|
|
},
|
|
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>
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 1.5rem;
|
|
align-items: center;
|
|
justify-items: center;
|
|
margin-top: 2rem;
|
|
}
|
|
.c-pagination {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
margin-top: 4rem;
|
|
}
|
|
</style>
|