feat: Add shopping cart to catalog page with sidebar
This commit is contained in:
@@ -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>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user