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

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) {