You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
2.2 KiB
65 lines
2.2 KiB
<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>
|
|
|