fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine catalog cart controls and show cart badge in header

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-03 08:50:24 +07:00
parent 4f14c24e46
commit 0f7787de36
3 changed files with 39 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/pages/products.vue
View File

@@ -6,7 +6,7 @@ import { useClientCart } from '~/composables/useClientCart';
const { result, loading, error } = useQuery(ClientProductsDocument);
const search = ref('');
const stockFilter = ref<'ALL' | 'CUSTOM' | 'STANDARD'>('ALL');
const { addProduct, getQuantity, totalItems } = useClientCart();
const { addProduct, getQuantity, totalItems, incrementQuantity, decrementQuantity } = useClientCart();
const coverPresets = [
['#e9fbe5', '#acfcd5', '#7be9aa'],
@@ -65,6 +65,14 @@ function addProductToCart(product: ClientProductsQuery['clientProducts'][number]
isCustomizable: product.isCustomizable,
});
}
function incrementProduct(productId: string) {
incrementQuantity(productId);
}
function decrementProduct(productId: string) {
decrementQuantity(productId);
}
</script>
<template>
@@ -137,14 +145,20 @@ function addProductToCart(product: ClientProductsQuery['clientProducts'][number]
<div class="px-1 pb-2 pt-3">
<h2 class="text-lg font-bold text-[#133826]">{{ product.name }}</h2>
<p class="text-xs text-base-content/65">SKU: {{ product.sku }}</p>
<div class="mt-3 flex items-center justify-between">
<span class="badge badge-outline">В корзине: {{ getQuantity(product.id) }}</span>
<div class="mt-3">
<button
class="btn btn-circle btn-sm border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
v-if="getQuantity(product.id) === 0"
class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
@click="addProductToCart(product)"
>
+
В корзину
</button>
<div v-else class="flex items-center justify-between rounded-2xl border border-base-300 bg-base-100 px-2 py-1">
<button class="btn btn-square btn-sm" @click="decrementProduct(product.id)">-</button>
<span class="min-w-8 text-center font-semibold">{{ getQuantity(product.id) }}</span>
<button class="btn btn-square btn-sm" @click="incrementProduct(product.id)">+</button>
</div>
</div>
</div>
</article>