Implement shopping cart functionality with UI components and API integration
- Added CartItem, CartSummary, CartEmpty, CartSidebar, and CartSheet components for managing cart display and interactions. - Integrated useCart and useCartUI composables for cart state management and UI control. - Implemented API endpoints for cart operations, including fetching, adding, updating, and removing items. - Enhanced user experience with loading states and notifications using vue-sonner for cart actions. - Configured session management for guest and authenticated users, ensuring cart persistence across sessions. This commit completes the shopping cart feature, enabling users to add items, view their cart, and proceed to checkout. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
45
app/components/Cart/CartEmpty.vue
Normal file
45
app/components/Cart/CartEmpty.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { ShoppingBag } from 'lucide-vue-next'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* Additional CSS classes
|
||||
*/
|
||||
class?: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card :class="cn('', props.class)">
|
||||
<div class="flex flex-col items-center justify-center py-16 px-6 text-center space-y-6">
|
||||
<!-- Shopping Bag Icon -->
|
||||
<div
|
||||
class="flex items-center justify-center w-24 h-24 rounded-full bg-white/5 border-2 border-white/20"
|
||||
>
|
||||
<ShoppingBag class="w-12 h-12 text-white/60" stroke-width="1.5" />
|
||||
</div>
|
||||
|
||||
<!-- Text Content -->
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-2xl font-bold text-white">Dein Warenkorb ist leer</h2>
|
||||
<p class="text-white/70 max-w-md">
|
||||
Entdecke unsere Produkte und füge deine Favoriten zum Warenkorb hinzu.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<Button
|
||||
as-child
|
||||
class="mt-4 bg-gradient-button bg-size-300 bg-left hover:bg-right transition-all duration-300 font-bold text-white shadow-lg hover:shadow-2xl"
|
||||
size="lg"
|
||||
>
|
||||
<NuxtLink to="/products">
|
||||
Produkte entdecken
|
||||
</NuxtLink>
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
Reference in New Issue
Block a user