- Create Pinia cart store to manage cart state globally - Sync quantity changes between catalog cards and cart sidebar - Improve product card design with borders and hover effects - Fix cart sync when updating quantity via minus button or input field
44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
import { defineStore } from 'pinia'
|
|
|
|
export const useCartStore = defineStore('cart', {
|
|
state: () => ({
|
|
items: []
|
|
}),
|
|
getters: {
|
|
cartCount: (state) => state.items.reduce((sum, item) => sum + item.quantity, 0),
|
|
cartTotal: (state) => state.items.reduce((sum, item) => sum + (item.price * item.quantity), 0)
|
|
},
|
|
actions: {
|
|
addItem(product) {
|
|
const existing = this.items.find(i => i.id === product.id)
|
|
if (existing) {
|
|
existing.quantity = product.quantity
|
|
} else {
|
|
this.items.push({
|
|
id: product.id,
|
|
name: product.name,
|
|
img: product.img,
|
|
price: product.price,
|
|
quantity: product.quantity,
|
|
measuring_unit: product.measuring_unit || 'Unidad'
|
|
})
|
|
}
|
|
},
|
|
removeItem(itemId) {
|
|
const index = this.items.findIndex(i => i.id === itemId)
|
|
if (index > -1) {
|
|
this.items.splice(index, 1)
|
|
}
|
|
},
|
|
updateQuantity({ itemId, quantity }) {
|
|
const item = this.items.find(i => i.id === itemId)
|
|
if (item) {
|
|
item.quantity = quantity
|
|
}
|
|
},
|
|
clearCart() {
|
|
this.items = []
|
|
}
|
|
}
|
|
})
|