bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement checkout and payment flow with new components

Browse Source 
- Added Checkout and Payment pages to handle user authentication and order processing.
- Introduced MockPayPalButton for simulating payment during development.
- Updated CartSheet and CartSidebar components to navigate to the new checkout page.
- Enhanced Cart UI with responsive design for mobile and desktop views.
- Implemented order confirmation and success pages to provide feedback after payment completion.

These changes complete the checkout and payment functionality, improving the overall user experience and ensuring a seamless transition from cart to order confirmation.
This commit is contained in:
Bastian Masanek
2025-11-03 16:24:00 +01:00
parent 527379a2cd
commit b302411626
10 changed files with 169 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/pages/products/[id].vue
View File

@@ -100,10 +100,8 @@ const handleAddToCart = async () => {
<div class="min-h-screen bg-gradient-primary px-4 py-12 md:px-6 lg:px-8">
<!-- Back Button -->
<div class="mx-auto mb-8 max-w-container-narrow">
<NuxtLink
to="/products"
class="inline-flex items-center gap-2 text-white/80 transition-colors hover:text-white"
>
<NuxtLink to="/products"
class="inline-flex items-center gap-2 text-white/80 transition-colors hover:text-white">
<ArrowLeft :size="20" />
<span>Zurück zur Übersicht</span>
</NuxtLink>
@@ -142,15 +140,9 @@ const handleAddToCart = async () => {
<div class="overflow-hidden rounded-2xl border border-white/20 bg-white/10 shadow-glass backdrop-blur-lg">
<!-- Product Image (no padding, flush with top) -->
<div class="relative aspect-[16/9] w-full overflow-hidden bg-purple-dark">
<img
src="/img/makerspace-jk-2025.jpg"
:alt="product.name"
class="h-full w-full object-cover"
/>
<img src="/img/makerspace-jk-2025.jpg" :alt="product.name" class="h-full w-full object-cover" />
<!-- Gradient overlay -->
<div
class="absolute inset-0 bg-gradient-to-t from-purple-darkest/80 via-transparent to-transparent"
/>
<div class="absolute inset-0 bg-gradient-to-t from-purple-darkest/80 via-transparent to-transparent" />
</div>
<!-- Product Content -->
@@ -178,12 +170,10 @@ const handleAddToCart = async () => {
<!-- Availability Card -->
<div class="rounded-xl bg-white/5 p-4 backdrop-blur-sm">
<span class="mb-1 block text-xs uppercase tracking-wide text-white/60">Verfügbarkeit</span>
<div
:class="[
'flex items-center gap-2 text-xl font-semibold',
product.stockQuantity > 0 ? 'text-green' : 'text-red',
]"
>
<div :class="[
'flex items-center gap-2 text-xl font-semibold',
product.stockQuantity > 0 ? 'text-green' : 'text-red',
]">
<CheckCircle v-if="product.stockQuantity > 0" :size="24" />
<span>{{ product.stockQuantity > 0 ? 'Sofort' : 'Nicht verfügbar' }}</span>
</div>
@@ -217,19 +207,13 @@ const handleAddToCart = async () => {
<!-- Action Buttons -->
<div class="flex flex-col gap-4 sm:flex-row">
<Button
variant="experimenta"
size="experimenta"
class="flex-1 relative"
:disabled="product.stockQuantity === 0 || isAddingToCart"
@click="handleAddToCart"
>
<NuxtLink to="/products" class="btn-secondary flex-1 text-center">
Weitere Produkte ansehen
</NuxtLink>
<Button variant="experimenta" size="experimenta" class="flex-1 relative"
:disabled="product.stockQuantity === 0 || isAddingToCart" @click="handleAddToCart">
<!-- Loading spinner -->
<Loader2
v-if="isAddingToCart"
:size="20"
class="mr-2 animate-spin"
/>
<Loader2 v-if="isAddingToCart" :size="20" class="mr-2 animate-spin" />
<!-- Button text -->
<span v-if="isAddingToCart">Wird hinzugefügt...</span>
@@ -237,16 +221,10 @@ const handleAddToCart = async () => {
<span v-else>In den Warenkorb</span>
</Button>
<NuxtLink to="/products" class="btn-secondary flex-1 text-center">
Weitere Produkte ansehen
</NuxtLink>
</div>
<!-- Already in cart hint -->
<div
v-if="isInCart && product.stockQuantity > 0"
class="mt-2 text-center text-sm text-white/70"
>
<div v-if="isInCart && product.stockQuantity > 0" class="mt-2 text-center text-sm text-white/70">
Dieses Produkt befindet sich bereits in deinem Warenkorb.
</div>
</div>