From 9d0e77fc984a16a92d6d3560e8fba71d0ae11a57 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Mon, 3 Nov 2025 11:41:32 +0100
Subject: [PATCH] Add cart button to desktop header with price display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented desktop cart button in navigation header that displays:
- Shopping cart icon with item count badge (red, top-right)
- Total cart price in German locale (EUR)
- Click opens CartSidebar via useCartUI() composable
- Responsive: visible only on lg breakpoint and above
- Hidden on mobile (FAB is used instead)

Uses useCart() composable for itemCount and total, with proper
Intl.NumberFormat formatting for EUR display.

Also standardized CartFAB price formatting to use Intl.NumberFormat
for consistency with rest of codebase.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/components/Cart/CartFAB.vue          | 75 +++++++++++++++++++++++
 app/components/navigation/CartButton.vue | 77 +++++++++++++++---------
 2 files changed, 125 insertions(+), 27 deletions(-)
 create mode 100644 app/components/Cart/CartFAB.vue

diff --git a/app/components/Cart/CartFAB.vue b/app/components/Cart/CartFAB.vue
new file mode 100644
index 0000000..dcd5d48
--- /dev/null
+++ b/app/components/Cart/CartFAB.vue
@@ -0,0 +1,75 @@
+<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-14 w-14 rounded-full 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" />
+
+          <!-- Item count badge -->
+          <Badge
+            class="absolute -top-2 -right-2 h-5 min-w-[20px] px-0.5 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border border-white dark:border-zinc-950"
+          >
+            {{ 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>
diff --git a/app/components/navigation/CartButton.vue b/app/components/navigation/CartButton.vue
index 2fdd178..7ba3622 100644
--- a/app/components/navigation/CartButton.vue
+++ b/app/components/navigation/CartButton.vue
@@ -2,42 +2,65 @@
 import { ShoppingCart } from 'lucide-vue-next'
 import { Badge } from '@/components/ui/badge'
 
-// TODO: This will come from cart store/composable in Phase 5
-const cartItemCount = ref(0)
+const { itemCount, total } = useCart()
+const { open } = useCartUI()
 
-const hasItems = computed(() => cartItemCount.value > 0)
+const hasItems = computed(() => itemCount.value > 0)
+
+// Format total price in German locale (EUR)
+const formattedTotal = computed(() => {
+  return new Intl.NumberFormat('de-DE', {
+    style: 'currency',
+    currency: 'EUR',
+  }).format(total.value)
+})
+
+// Handle button click to open cart sidebar
+function handleClick(e: Event) {
+  e.preventDefault()
+  open()
+}
 </script>
 
 <template>
-  <NuxtLink
-    to="/cart"
-    class="relative inline-flex items-center justify-center rounded-full p-3 transition-all hover:bg-experimenta-accent/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2"
-    aria-label="Warenkorb"
+  <!-- Desktop cart button (visible only on lg and up) -->
+  <button
+    @click="handleClick"
+    class="hidden lg:flex items-center gap-2 rounded-lg px-4 py-2 transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-transparent"
+    aria-label="Warenkorb öffnen"
   >
-    <ShoppingCart class="h-6 w-6 text-foreground" />
-
-    <!-- Item count badge -->
-    <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"
-    >
-      <Badge
-        v-if="hasItems"
-        class="absolute -top-1 -right-1 h-5 min-w-[20px] px-1 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border-2 border-white dark:border-zinc-950"
+    <!-- Cart icon with item count badge -->
+    <div class="relative inline-flex">
+      <ShoppingCart class="h-6 w-6 text-white" />
+
+      <!-- Item count badge -->
+      <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"
       >
-        {{ cartItemCount > 99 ? '99+' : cartItemCount }}
-      </Badge>
-    </Transition>
+        <Badge
+          v-if="hasItems"
+          class="absolute -top-2 -right-2 h-5 min-w-[20px] px-1 flex items-center justify-center bg-red-500 text-white text-xs font-bold border-2 border-white"
+        >
+          {{ itemCount > 99 ? '99+' : itemCount }}
+        </Badge>
+      </Transition>
+    </div>
+
+    <!-- Total price (desktop only) -->
+    <span class="text-sm font-semibold text-white">
+      {{ formattedTotal }}
+    </span>
 
-    <!-- Pulse animation when items are added (optional) -->
+    <!-- Pulse animation when items are added -->
     <span
       v-if="hasItems"
-      class="absolute inset-0 rounded-full bg-experimenta-accent/20 animate-ping opacity-75"
+      class="absolute inset-0 rounded-lg bg-experimenta-accent/20 animate-pulse opacity-50"
       aria-hidden="true"
     />
-  </NuxtLink>
+  </button>
 </template>