67 lines
1.4 KiB
Vue
67 lines
1.4 KiB
Vue
<template>
|
|
<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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
relatedProducts: {
|
|
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>
|
|
.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;
|
|
}
|
|
.c-pagination {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
margin-top: 4rem;
|
|
}
|
|
</style>
|