catalogo y producto page

components/ProductsRelated.vue

@@ -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>