From 339ac6727f7adcc0e791a4861175a9bd50f47166 Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Sat, 7 Mar 2026 17:30:38 -0500
Subject: [PATCH] feat: Add shopping cart to catalog page with sidebar

---
 src/components/catalog/Card.vue | 107 +++++++++++++++++++++
 src/components/catalog/Cart.vue |  83 +++++++++++++++++
 src/pages/catalog.vue           | 160 +++++++++++++++++++-------------
 3 files changed, 288 insertions(+), 62 deletions(-)
 create mode 100644 src/components/catalog/Card.vue
 create mode 100644 src/components/catalog/Cart.vue

diff --git a/src/components/catalog/Card.vue b/src/components/catalog/Card.vue
new file mode 100644
index 0000000..42f2856
--- /dev/null
+++ b/src/components/catalog/Card.vue
@@ -0,0 +1,107 @@
+<template>
+  <v-card>
+    <v-row no-gutters align="center" class="w-100">
+      <v-col cols="12" md="3" class="d-flex">
+        <v-img :src="product.img" class="product-img" contain></v-img>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card-title>{{ product.name }}</v-card-title>
+        <v-card-subtitle>{{ product.description }}</v-card-subtitle>
+        <div class="prices mt-2">
+          <div class="price-line">
+            Precio unitario: <strong>{{ currency(product.price) }}</strong>
+          </div>
+          <div class="price-line">
+            Precio total:
+            <strong>{{ currency(product.price * product.quantity) }}</strong>
+          </div>
+        </div>
+      </v-col>
+
+      <v-col cols="12" md="3" class="d-flex align-center justify-end">
+        <div class="quantity-controls">
+          <v-btn small text class="qty-btn" @click="decrease(product)"
+            ><v-icon small>mdi-minus</v-icon></v-btn
+          >
+          <v-text-field
+            v-model.number="product.quantity"
+            type="number"
+            min="0"
+            class="quantity-input"
+            dense
+            outlined
+            hide-details
+            aria-label="Cantidad"
+          />
+          <v-btn small text class="qty-btn" @click="handleIncrease"
+            ><v-icon small>mdi-plus</v-icon></v-btn>
+        </div>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    increase: {
+      type: Function,
+      required: true
+    },
+    decrease: {
+      type: Function,
+      required: true
+    },
+    currency: {
+      type: Function,
+      required: true
+    }
+  },
+  methods: {
+    handleIncrease() {
+      this.increase(this.product);
+      this.$emit('add-to-cart', this.product);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.product-img {
+  width: 150px;
+  height: 100px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+.quantity-controls {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.prices .price-line {
+  margin-bottom: 4px;
+}
+.quantity-input {
+  max-width: 90px;
+}
+.quantity-input input {
+  text-align: center;
+}
+.qty-btn {
+  min-width: 36px !important;
+  height: 36px !important;
+  border-radius: 18px !important;
+}
+@media (max-width: 600px) {
+  .product-img {
+    width: 120px;
+    height: 80px;
+  }
+}
+</style>
diff --git a/src/components/catalog/Cart.vue b/src/components/catalog/Cart.vue
new file mode 100644
index 0000000..f9d7276
--- /dev/null
+++ b/src/components/catalog/Cart.vue
@@ -0,0 +1,83 @@
+<template>
+  <v-card>
+    <v-card-title class="d-flex align-center">
+      <v-icon class="mr-2">mdi-cart</v-icon>
+      Carrito
+      <v-chip v-if="cartCount" color="primary" class="ml-2">{{ cartCount }}</v-chip>
+    </v-card-title>
+    
+    <v-divider></v-divider>
+    
+    <v-card-text v-if="cartItems.length === 0" class="text-center grey--text">
+      El carrito está vacío
+    </v-card-text>
+    
+    <v-list v-else density="compact" max-height="300" class="overflow-y-auto">
+      <v-list-item v-for="item in cartItems" :key="item.id">
+        <template v-slot:prepend>
+          <v-avatar size="40" rounded>
+            <v-img :src="item.img" cover></v-img>
+          </v-avatar>
+        </template>
+        
+        <v-list-item-title>{{ item.name }}</v-list-item-title>
+        <v-list-item-subtitle>
+          {{ item.quantity }} x {{ currency(item.price) }}
+        </v-list-item-subtitle>
+        
+        <template v-slot:append>
+          <div class="d-flex align-center">
+            <strong>{{ currency(item.price * item.quantity) }}</strong>
+            <v-btn 
+              icon="mdi-delete" 
+              size="small" 
+              variant="text" 
+              color="red"
+              class="ml-2"
+              @click="$emit('remove', item.id)"
+            ></v-btn>
+          </div>
+        </template>
+      </v-list-item>
+    </v-list>
+    
+    <v-divider v-if="cartItems.length > 0"></v-divider>
+    
+    <v-card-text v-if="cartItems.length > 0">
+      <div class="d-flex justify-space-between align-center">
+        <strong>Total:</strong>
+        <strong class="text-h6">{{ currency(cartTotal) }}</strong>
+      </div>
+    </v-card-text>
+    
+    <v-card-actions v-if="cartItems.length > 0">
+      <v-btn color="primary" block @click="$emit('checkout')">
+        Finalizar Compra
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'Cart',
+  props: {
+    cartItems: {
+      type: Array,
+      default: () => []
+    },
+    currency: {
+      type: Function,
+      required: true
+    }
+  },
+  computed: {
+    cartCount() {
+      return this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
+    },
+    cartTotal() {
+      return this.cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+    }
+  }
+}
+</script>
diff --git a/src/pages/catalog.vue b/src/pages/catalog.vue
index a7ad18f..3047d99 100644
--- a/src/pages/catalog.vue
+++ b/src/pages/catalog.vue
@@ -1,83 +1,105 @@
 <template>
-  <v-container>
-    <v-card>
-      <v-card-title>
-        <span class="headline">Catálogo</span>
-      </v-card-title>
-      <v-card-text>
-        <v-list two-line>
-          <v-list-item v-for="item in items" :key="item.id" class="catalog-item">
-            <v-row no-gutters align="center" class="w-100">
-              <v-col cols="12" md="3" class="d-flex">
-                <v-img :src="item.img" class="product-img" contain></v-img>
-              </v-col>
-
-              <v-col cols="12" md="6">
-                <v-list-item-title class="title">{{ item.name }}</v-list-item-title>
-                <v-list-item-subtitle class="subtitle">{{ item.description }}</v-list-item-subtitle>
-                <div class="prices mt-2">
-                  <div class="price-line">Precio unitario: <strong>{{ currency(item.price) }}</strong></div>
-                  <div class="price-line">Precio total: <strong>{{ currency(item.price * item.quantity) }}</strong></div>
-                </div>
-              </v-col>
-
-              <v-col cols="12" md="3" class="d-flex align-center justify-end">
-                <div class="quantity-controls">
-                  <v-btn small text class="qty-btn" @click="decrease(item)"><v-icon small>mdi-minus</v-icon></v-btn>
-                  <v-text-field
-                    v-model.number="item.quantity"
-                    type="number"
-                    min="0"
-                    class="quantity-input"
-                    dense
-                    outlined
-                    hide-details
-                    aria-label="Cantidad"
-                  />
-                  <v-btn small text class="qty-btn" @click="increase(item)"><v-icon small>mdi-plus</v-icon></v-btn>
-                </div>
-              </v-col>
-            </v-row>
-          </v-list-item>
-        </v-list>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn color="primary">Ver más</v-btn>
-      </v-card-actions>
-    </v-card>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12" md="9">
+        <v-card-title>
+          <span class="headline">Catálogo</span>
+        </v-card-title>
+        <v-list-item v-for="item in items" :key="item.id" class="catalog-item">
+          <Card :product="item" :increase="increase" :decrease="decrease" :currency="currency" @add-to-cart="addToCart"/>
+        </v-list-item>
+      </v-col>
+      
+      <v-col cols="12" md="3">
+        <div class="cart-sidebar">
+          <Cart 
+            :cart-items="cartItems" 
+            :currency="currency"
+            @remove="removeFromCart"
+            @checkout="goToCheckout"
+          />
+        </div>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script>
+import Card from '@/components/catalog/Card.vue';
+import Cart from '@/components/catalog/Cart.vue';
+
 export default {
+  components: {
+    Card,
+    Cart
+  },
   data() {
     return {
+      cartItems: [],
       items: [
         { id: 1, name: 'Producto 1', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 2', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 3', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 4', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 5', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 6', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 7', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 8', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 9', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 10', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 11', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 12', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 13', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 14', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 15', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 1, name: 'Producto 16', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 2, name: 'Producto 2', description: 'Descripción del producto 2', img: 'https://picsum.photos/300/200?random=2', quantity: 0, price: 1200 },
+        { id: 3, name: 'Producto 3', description: 'Descripción del producto 3', img: 'https://picsum.photos/300/200?random=3', quantity: 0, price: 1200 },
+        { id: 4, name: 'Producto 4', description: 'Descripción del producto 4', img: 'https://picsum.photos/300/200?random=4', quantity: 0, price: 1200 },
+        { id: 5, name: 'Producto 5', description: 'Descripción del producto 5', img: 'https://picsum.photos/300/200?random=5', quantity: 0, price: 1200 },
+        { id: 6, name: 'Producto 6', description: 'Descripción del producto 6', img: 'https://picsum.photos/300/200?random=6', quantity: 0, price: 1200 },
+        { id: 7, name: 'Producto 7', description: 'Descripción del producto 7', img: 'https://picsum.photos/300/200?random=7', quantity: 0, price: 1200 },
+        { id: 8, name: 'Producto 8', description: 'Descripción del producto 8', img: 'https://picsum.photos/300/200?random=8', quantity: 0, price: 1200 },
+        { id: 9, name: 'Producto 9', description: 'Descripción del producto 9', img: 'https://picsum.photos/300/200?random=9', quantity: 0, price: 1200 },
+        { id: 10, name: 'Producto 10', description: 'Descripción del producto 10', img: 'https://picsum.photos/300/200?random=10', quantity: 0, price: 1200 },
+        { id: 11, name: 'Producto 11', description: 'Descripción del producto 11', img: 'https://picsum.photos/300/200?random=11', quantity: 0, price: 1200 },
+        { id: 12, name: 'Producto 12', description: 'Descripción del producto 12', img: 'https://picsum.photos/300/200?random=12', quantity: 0, price: 1200 },
+        { id: 13, name: 'Producto 13', description: 'Descripción del producto 13', img: 'https://picsum.photos/300/200?random=13', quantity: 0, price: 1200 },
+        { id: 14, name: 'Producto 14', description: 'Descripción del producto 14', img: 'https://picsum.photos/300/200?random=14', quantity: 0, price: 1200 },
+        { id: 15, name: 'Producto 15', description: 'Descripción del producto 15', img: 'https://picsum.photos/300/200?random=15', quantity: 0, price: 1200 },
+        { id: 16, name: 'Producto 16', description: 'Descripción del producto 16', img: 'https://picsum.photos/300/200?random=16', quantity: 0, price: 1200 },
       ],
     };
   },
+  computed: {
+    cartCount() {
+      return this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
+    }
+  },
   methods: {
     increase(item) {
       item.quantity = Number(item.quantity) + 1;
+      this.addToCart(item);
     },
     decrease(item) {
       item.quantity = Math.max(0, Number(item.quantity) - 1);
+      if (item.quantity === 0) {
+        this.removeFromCart(item.id);
+      }
+    },
+    addToCart(item) {
+      if (item.quantity <= 0) return;
+      
+      const existingItem = this.cartItems.find(i => i.id === item.id);
+      if (existingItem) {
+        existingItem.quantity = item.quantity;
+      } else {
+        this.cartItems.push({
+          id: item.id,
+          name: item.name,
+          img: item.img,
+          price: item.price,
+          quantity: item.quantity
+        });
+      }
+    },
+    removeFromCart(itemId) {
+      const index = this.cartItems.findIndex(i => i.id === itemId);
+      if (index > -1) {
+        this.cartItems.splice(index, 1);
+      }
+      const item = this.items.find(i => i.id === itemId);
+      if (item) {
+        item.quantity = 0;
+      }
+    },
+    goToCheckout() {
+      this.$router.push('/comprar');
     },
     currency(val) {
       if (val == null) return '-';
@@ -95,6 +117,10 @@ export default {
   padding-top: 12px;
   padding-bottom: 12px;
 }
+.cart-sidebar {
+  position: sticky;
+  top: 80px;
+}
 .product-img {
   width: 150px;
   height: 100px;
@@ -121,10 +147,20 @@ export default {
   height: 36px !important;
   border-radius: 18px !important;
 }
+@media (max-width: 960px) {
+  .cart-sidebar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: auto;
+    z-index: 100;
+  }
+}
 @media (max-width: 600px) {
   .product-img {
     width: 120px;
     height: 80px;
   }
 }
-</style>
\ No newline at end of file
+</style>