OneTeam/don_confiao_frontend
16
0
Fork 0
Code Issues 4 Pull Requests 3 Actions Packages Projects Releases 8 Wiki Activity

feat: Add shopping cart to catalog page with sidebar

Browse Source
This commit is contained in:
aserrador
2026-03-07 17:30:38 -05:00
parent c95279d96b
commit 339ac6727f
3 changed files with 288 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/catalog/Card.vue Normal file
View File

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

83
src/components/catalog/Cart.vue Normal file
View File

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

160
src/pages/catalog.vue
View File

@@ -1,83 +1,105 @@
<template> <template>
<v-container> <v-container fluid>
<v-card> <v-row>
<v-card-title> <v-col cols="12" md="9">
<span class="headline">Catálogo</span> <v-card-title>
</v-card-title> <span class="headline">Catálogo</span>
<v-card-text> </v-card-title>
<v-list two-line> <v-list-item v-for="item in items" :key="item.id" class="catalog-item">
<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-row no-gutters align="center" class="w-100"> </v-list-item>
<v-col cols="12" md="3" class="d-flex"> </v-col>
<v-img :src="item.img" class="product-img" contain></v-img>
</v-col> <v-col cols="12" md="3">
<div class="cart-sidebar">
<v-col cols="12" md="6"> <Cart
<v-list-item-title class="title">{{ item.name }}</v-list-item-title> :cart-items="cartItems"
<v-list-item-subtitle class="subtitle">{{ item.description }}</v-list-item-subtitle> :currency="currency"
<div class="prices mt-2"> @remove="removeFromCart"
<div class="price-line">Precio unitario: <strong>{{ currency(item.price) }}</strong></div> @checkout="goToCheckout"
<div class="price-line">Precio total: <strong>{{ currency(item.price * item.quantity) }}</strong></div> />
</div> </div>
</v-col> </v-col>
</v-row>
<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> </v-container>
</template> </template>
<script> <script>
import Card from '@/components/catalog/Card.vue';
import Cart from '@/components/catalog/Cart.vue';
export default { export default {
components: {
Card,
Cart
},
data() { data() {
return { return {
cartItems: [],
items: [ 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 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: 2, name: 'Producto 2', description: 'Descripción del producto 2', img: 'https://picsum.photos/300/200?random=2', 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: 3, name: 'Producto 3', description: 'Descripción del producto 3', img: 'https://picsum.photos/300/200?random=3', 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: 4, name: 'Producto 4', description: 'Descripción del producto 4', img: 'https://picsum.photos/300/200?random=4', 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: 5, name: 'Producto 5', description: 'Descripción del producto 5', img: 'https://picsum.photos/300/200?random=5', 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: 6, name: 'Producto 6', description: 'Descripción del producto 6', img: 'https://picsum.photos/300/200?random=6', 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: 7, name: 'Producto 7', description: 'Descripción del producto 7', img: 'https://picsum.photos/300/200?random=7', 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: 8, name: 'Producto 8', description: 'Descripción del producto 8', img: 'https://picsum.photos/300/200?random=8', 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: 9, name: 'Producto 9', description: 'Descripción del producto 9', img: 'https://picsum.photos/300/200?random=9', 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: 10, name: 'Producto 10', description: 'Descripción del producto 10', img: 'https://picsum.photos/300/200?random=10', 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: 11, name: 'Producto 11', description: 'Descripción del producto 11', img: 'https://picsum.photos/300/200?random=11', 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: 12, name: 'Producto 12', description: 'Descripción del producto 12', img: 'https://picsum.photos/300/200?random=12', 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: 13, name: 'Producto 13', description: 'Descripción del producto 13', img: 'https://picsum.photos/300/200?random=13', 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: 14, name: 'Producto 14', description: 'Descripción del producto 14', img: 'https://picsum.photos/300/200?random=14', 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: 15, name: 'Producto 15', description: 'Descripción del producto 15', img: 'https://picsum.photos/300/200?random=15', 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: 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: { methods: {
increase(item) { increase(item) {
item.quantity = Number(item.quantity) + 1; item.quantity = Number(item.quantity) + 1;
this.addToCart(item);
}, },
decrease(item) { decrease(item) {
item.quantity = Math.max(0, Number(item.quantity) - 1); 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) { currency(val) {
if (val == null) return '-'; if (val == null) return '-';
@@ -95,6 +117,10 @@ export default {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
} }
.cart-sidebar {
position: sticky;
top: 80px;
}
.product-img { .product-img {
width: 150px; width: 150px;
height: 100px; height: 100px;
@@ -121,10 +147,20 @@ export default {
height: 36px !important; height: 36px !important;
border-radius: 18px !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) { @media (max-width: 600px) {
.product-img { .product-img {
width: 120px; width: 120px;
height: 80px; height: 80px;
} }
} }
</style> </style>