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"
|
||||
/>
|
||||
|
||||
<!-- 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>
|
||||
</template>
|
||||
|
||||
|
|
@ -147,7 +154,7 @@ import {
|
|||
SelectTrigger,
|
||||
SelectValue,
|
||||
} 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 ProductGrid from '../components/ProductGrid.vue'
|
||||
import type { Product, Stall } from '../types/market'
|
||||
|
|
@ -273,6 +280,10 @@ const handleAddToCart = (product: Product, quantity?: number) => {
|
|||
marketStore.addToStallCart(product, quantity || 1)
|
||||
}
|
||||
|
||||
const viewCart = () => {
|
||||
router.push('/cart')
|
||||
}
|
||||
|
||||
|
||||
const viewStall = (otherStallId: string) => {
|
||||
if (otherStallId !== stallId.value) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue