ebb6dc0b27
- Simplified Transition component structure in CartFAB.vue for better readability. - Enhanced FAB button size and adjusted ShoppingCart icon scale for improved visibility. - Updated Badge component styling for better alignment and visual appeal. - Modified CartSidebar.vue to adjust empty state layout, improving user experience when the cart is empty. These changes aim to enhance the overall user interface and interaction within the shopping cart components.
66 lines
2.2 KiB
Vue
66 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { ShoppingCart } from 'lucide-vue-next'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
// Get cart data
|
|
const { itemCount, total } = useCart()
|
|
const { open } = useCartUI()
|
|
|
|
// Get current route
|
|
const route = useRoute()
|
|
|
|
// Determine if FAB should be visible
|
|
const isVisible = computed(() => {
|
|
// Only show on /products and /products/[id] routes
|
|
const isProductPage = route.path === '/products' || route.path.startsWith('/products/')
|
|
|
|
// Only show when cart has items
|
|
return isProductPage && itemCount.value > 0
|
|
})
|
|
|
|
// Format price as EUR in German locale
|
|
const formattedTotal = computed(() => {
|
|
return new Intl.NumberFormat('de-DE', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
}).format(total.value)
|
|
})
|
|
|
|
// Handle FAB click
|
|
function handleClick() {
|
|
open()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Transition enter-active-class="transition-all duration-200 ease-out" enter-from-class="scale-0 opacity-0"
|
|
enter-to-class="scale-100 opacity-100" leave-active-class="transition-all duration-150 ease-in"
|
|
leave-from-class="scale-100 opacity-100" leave-to-class="scale-0 opacity-0">
|
|
<div v-if="isVisible" class="fixed bottom-20 right-4 z-40">
|
|
<!-- FAB Button -->
|
|
<Button @click="handleClick"
|
|
class="h-16 w-16 rounded-full shadow-gray-900 shadow-lg transition-all duration-200 hover:scale-110 active:scale-95"
|
|
variant="default" size="icon" aria-label="Warenkorb öffnen">
|
|
<!-- Cart icon with relative positioning for badge -->
|
|
<div class="relative">
|
|
<ShoppingCart class="h-6 w-6 scale-150" />
|
|
|
|
<!-- Item count badge -->
|
|
<Badge
|
|
class="absolute -top-4 -right-4 h-5.5 min-w-[22px] px-1.5 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border-2 border-purple-darkest shadow-lg scale-75">
|
|
{{ itemCount > 99 ? '99+' : itemCount }}
|
|
</Badge>
|
|
</div>
|
|
</Button>
|
|
|
|
<!-- Price text below button -->
|
|
<!-- <div class="mt-2 text-center">
|
|
<p class="text-xs font-semibold text-foreground whitespace-nowrap">
|
|
{{ formattedTotal }}
|
|
</p>
|
|
</div> -->
|
|
</div>
|
|
</Transition>
|
|
</template>
|