feat: add cart summary button to StallView for improved user navigation
- Introduced a cart summary button in StallView.vue that displays the total number of items in the cart. - Implemented a click handler to navigate users to the cart page, enhancing the shopping experience. - Imported the ShoppingCart icon from lucide-vue-next for visual representation. These changes provide users with quick access to their cart, improving overall usability and navigation within the market interface.
This commit is contained in:
parent
56bcb8ec04
commit
688bf5e105
1 changed files with 12 additions and 1 deletions
|
|
@ -130,6 +130,13 @@
|
||||||
@add-to-cart="handleAddToCart"
|
@add-to-cart="handleAddToCart"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- Cart Summary -->
|
||||||
|
<div v-if="marketStore.totalCartItems > 0" class="fixed bottom-4 right-4">
|
||||||
|
<Button @click="viewCart" class="shadow-lg">
|
||||||
|
<ShoppingCart class="w-5 h-5 mr-2" />
|
||||||
|
Cart ({{ marketStore.totalCartItems }})
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -147,7 +154,7 @@ import {
|
||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from '@/components/ui/select'
|
} from '@/components/ui/select'
|
||||||
import { ArrowLeft, Store, X } from 'lucide-vue-next'
|
import { ArrowLeft, Store, X, ShoppingCart } from 'lucide-vue-next'
|
||||||
import FuzzySearch from '@/components/ui/fuzzy-search/FuzzySearch.vue'
|
import FuzzySearch from '@/components/ui/fuzzy-search/FuzzySearch.vue'
|
||||||
import ProductGrid from '../components/ProductGrid.vue'
|
import ProductGrid from '../components/ProductGrid.vue'
|
||||||
import type { Product, Stall } from '../types/market'
|
import type { Product, Stall } from '../types/market'
|
||||||
|
|
@ -273,6 +280,10 @@ const handleAddToCart = (product: Product, quantity?: number) => {
|
||||||
marketStore.addToStallCart(product, quantity || 1)
|
marketStore.addToStallCart(product, quantity || 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const viewCart = () => {
|
||||||
|
router.push('/cart')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
const viewStall = (otherStallId: string) => {
|
const viewStall = (otherStallId: string) => {
|
||||||
if (otherStallId !== stallId.value) {
|
if (otherStallId !== stallId.value) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue