feat: add CartButton component for consistent cart access across views
- Introduced a new CartButton component to encapsulate cart summary functionality, improving code reusability and maintainability. - Updated MarketPage.vue and StallView.vue to utilize the CartButton component, enhancing user navigation to the cart. - Removed redundant cart summary code from both views, streamlining the component structure. These changes provide a unified and consistent user experience for accessing the cart across different market views.
This commit is contained in:
parent
688bf5e105
commit
da5c4d6de1
5 changed files with 515 additions and 24 deletions
23
src/modules/market/components/CartButton.vue
Normal file
23
src/modules/market/components/CartButton.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<!-- Cart Summary Button -->
|
||||
<div v-if="marketStore.totalCartItems > 0" class="fixed bottom-4 right-4 z-50">
|
||||
<Button @click="viewCart" class="shadow-lg">
|
||||
<ShoppingCart class="w-5 h-5 mr-2" />
|
||||
Cart ({{ marketStore.totalCartItems }})
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useMarketStore } from '@/modules/market/stores/market'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ShoppingCart } from 'lucide-vue-next'
|
||||
|
||||
const router = useRouter()
|
||||
const marketStore = useMarketStore()
|
||||
|
||||
const viewCart = () => {
|
||||
router.push('/cart')
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue