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

feat: Improve product card design and sync cart quantity

Browse Source 
- Add borders, hover effects, and box shadows to product cards
- Improve typography and layout styling
- Fix cart sync when updating quantity via minus button or input field
- Add updateQuantity prop to handle manual quantity changes
This commit is contained in:
aserrador
2026-03-14 16:28:10 -05:00
parent 04509006a4
commit 1d37ce42dc
2 changed files with 155 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/components/catalog/Card.vue
View File

@@ -1,29 +1,30 @@
<template>
<v-card>
<v-row no-gutters align="center" class="w-100">
<v-col cols="12" md="3" class="d-flex">
<v-card class="product-card">
<v-row no-gutters align="center" class="w-100 py-3 px-2">
<v-col cols="12" md="3" class="d-flex justify-center">
<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>
<v-col cols="12" md="5">
<v-card-title class="product-name">{{ product.name }}</v-card-title>
<v-card-subtitle class="product-description">{{ product.description }}</v-card-subtitle>
<div class="prices mt-3">
<div class="price-unit">
<span class="price-label">Precio unitario</span>
<span class="price-value">{{ currency(product.price) }}</span>
</div>
<div class="price-line">
Precio total:
<strong>{{ currency(product.price * product.quantity) }}</strong>
<div class="price-total">
<span class="price-label">Precio total</span>
<span class="price-value total">{{ currency(product.price * product.quantity) }}</span>
</div>
</div>
</v-col>
<v-col cols="12" md="3" class="d-flex align-center justify-end">
<v-col cols="12" md="4" class="d-flex align-center justify-md-end justify-center mt-3 mt-md-0">
<div class="quantity-controls">
<v-btn small text class="qty-btn" @click="decrease(product)"
><v-icon small>mdi-minus</v-icon></v-btn
>
<v-btn icon small 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"
@@ -33,9 +34,11 @@
outlined
hide-details
aria-label="Cantidad"
@input="handleQuantityChange"
/>
<v-btn small text class="qty-btn" @click="handleIncrease"
><v-icon small>mdi-plus</v-icon></v-btn>
<v-btn icon small class="qty-btn qty-btn-add" @click="handleIncrease">
<v-icon small>mdi-plus</v-icon>
</v-btn>
</div>
</v-col>
</v-row>
@@ -60,48 +63,140 @@ export default {
currency: {
type: Function,
required: true
},
updateQuantity: {
type: Function,
required: true
}
},
methods: {
handleIncrease() {
this.increase(this.product);
this.$emit('add-to-cart', this.product);
},
handleQuantityChange(value) {
this.updateQuantity(this.product);
if (this.product.quantity > 0) {
this.$emit('add-to-cart', this.product);
}
}
}
}
</script>
<style scoped>
.product-card {
border: 1px solid #e0e0e0;
border-radius: 12px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
transition: all 0.3s ease;
}
.product-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
border-color: #bdbdbd;
}
.product-img {
width: 150px;
height: 100px;
border-radius: 6px;
width: 120px;
height: 120px;
border-radius: 10px;
object-fit: cover;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.product-name {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
line-height: 1.3;
padding: 0 0 4px 0;
}
.product-description {
font-size: 0.85rem;
color: #7f8c8d;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.prices {
display: flex;
flex-direction: column;
gap: 6px;
}
.price-unit, .price-total {
display: flex;
align-items: center;
gap: 8px;
}
.price-label {
font-size: 0.75rem;
color: #95a5a6;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.price-value {
font-size: 0.95rem;
font-weight: 600;
color: #2c3e50;
}
.price-value.total {
color: #27ae60;
font-size: 1.1rem;
}
.quantity-controls {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.prices .price-line {
margin-bottom: 4px;
gap: 4px;
background: #f5f5f5;
border-radius: 25px;
padding: 4px;
}
.quantity-input {
max-width: 90px;
max-width: 70px;
}
.quantity-input input {
text-align: center;
font-weight: 600;
}
.qty-btn {
min-width: 36px !important;
height: 36px !important;
border-radius: 18px !important;
min-width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.qty-btn:hover {
background: #e0e0e0;
}
.qty-btn-add {
background: #27ae60;
color: white;
}
.qty-btn-add:hover {
background: #219a52 !important;
}
@media (max-width: 960px) {
.product-img {
width: 100px;
height: 100px;
}
}
@media (max-width: 600px) {
.product-card {
border-radius: 8px;
}
.product-img {
width: 120px;
width: 80px;
height: 80px;
}
.product-name {
font-size: 1rem;
text-align: center;
}
.prices {
align-items: center;
}
}
</style>

48
src/pages/catalog.vue
View File

@@ -6,7 +6,7 @@
<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"/>
<Card :product="item" :increase="increase" :decrease="decrease" :currency="currency" :updateQuantity="updateQuantity" @add-to-cart="addToCart"/>
</v-list-item>
</v-col>
@@ -28,6 +28,7 @@
<script>
import Card from '@/components/catalog/Card.vue';
import Cart from '@/components/catalog/Cart.vue';
import { inject } from 'vue';
export default {
components: {
@@ -36,33 +37,33 @@ export default {
},
data() {
return {
api: inject('api'),
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: 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 },
],
items: [],
};
},
created() {
this.fetchProducts();
},
computed: {
cartCount() {
return this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
}
},
methods: {
fetchProducts() {
this.api.getProducts()
.then(data => {
this.items = data.map(product => ({
...product,
quantity: 0,
img: product.img || `https://picsum.photos/300/200?random=${product.id}`
}));
})
.catch(error => {
console.error(error);
});
},
increase(item) {
item.quantity = Number(item.quantity) + 1;
this.addToCart(item);
@@ -71,6 +72,15 @@ export default {
item.quantity = Math.max(0, Number(item.quantity) - 1);
if (item.quantity === 0) {
this.removeFromCart(item.id);
} else {
this.addToCart(item);
}
},
updateQuantity(item) {
if (item.quantity > 0) {
this.addToCart(item);
} else {
this.removeFromCart(item.id);
}
},
addToCart(item) {