Browse Source
- Added a new page for displaying experimenta annual passes, integrating ProductCard and ProductGrid components for product presentation. - Updated API to filter products by category, allowing for specific product queries. - Enhanced navigation components, including AreaTabs and RoleSwitcher, to improve user experience and accessibility. - Refactored existing components for better styling consistency and responsiveness. - Improved dropdown menu components with updated styles and hover effects for better usability.main
Bastian Masanek
2 months ago
9 changed files with 207 additions and 64 deletions
@ -0,0 +1,142 @@ |
|||
<script setup lang="ts"> |
|||
/** |
|||
* experimenta Products Listing Page |
|||
* |
|||
* Displays experimenta annual passes using ProductCard and ProductGrid components. |
|||
* Fetches only experimenta category products from the database via API. |
|||
*/ |
|||
|
|||
// Page metadata |
|||
definePageMeta({ |
|||
layout: 'default', |
|||
}) |
|||
|
|||
// Type definition for product |
|||
interface Product { |
|||
id: string |
|||
navProductId: string |
|||
name: string |
|||
description: string |
|||
price: string |
|||
stockQuantity: number |
|||
category: string |
|||
active: boolean |
|||
createdAt: Date |
|||
updatedAt: Date |
|||
} |
|||
|
|||
// Fetch products from API - only experimenta passes |
|||
const { data: products, error, pending } = await useFetch<Product[]>('/api/products', { |
|||
query: { |
|||
category: 'annual-pass', |
|||
}, |
|||
}) |
|||
|
|||
// Map product categories to badges |
|||
const getBadge = (category: string): string | undefined => { |
|||
const badges: Record<string, string> = { |
|||
'annual-pass': 'Beliebt', |
|||
} |
|||
return badges[category] |
|||
} |
|||
|
|||
// Map product categories to discount percentages (for demo) |
|||
const getDiscount = (category: string): number | undefined => { |
|||
const discounts: Record<string, number> = { |
|||
// No discounts for now |
|||
} |
|||
return discounts[category] |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<NuxtLayout name="default"> |
|||
<div class="min-h-screen bg-gradient-primary px-4 py-12 md:px-6 lg:px-8"> |
|||
<!-- Page Header --> |
|||
<div class="mx-auto mb-12 max-w-container-wide text-center"> |
|||
<h1 class="mb-4 text-4xl font-bold text-white md:text-5xl"> |
|||
experimenta Jahreskarten |
|||
</h1> |
|||
<p class="mx-auto max-w-2xl text-lg text-white/80"> |
|||
Erlebe die Ausstellungswelt der experimenta ein ganzes Jahr lang. |
|||
Mit freiem Eintritt zu allen Ausstellungen, Science Dome Shows und Sonderausstellungen. |
|||
</p> |
|||
</div> |
|||
|
|||
<!-- Loading State --> |
|||
<div v-if="pending" class="mx-auto max-w-container-wide text-center"> |
|||
<div class="card-glass inline-block"> |
|||
<p class="text-white/80">Produkte werden geladen...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Error State --> |
|||
<div v-else-if="error" class="mx-auto max-w-container-wide"> |
|||
<div class="card-glass border-red/50 bg-red/10"> |
|||
<h2 class="mb-2 text-xl font-semibold text-red"> |
|||
Fehler beim Laden der Produkte |
|||
</h2> |
|||
<p class="text-white/80"> |
|||
{{ error.message || 'Ein unbekannter Fehler ist aufgetreten.' }} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Products Grid --> |
|||
<div v-else-if="products && products.length > 0" class="mx-auto max-w-container-wide"> |
|||
<ProductGrid :columns="3"> |
|||
<ProductCard |
|||
v-for="product in products" |
|||
:key="product.id" |
|||
image="/img/makerspace-jk-2025.jpg" |
|||
:title="product.name" |
|||
:description="product.description" |
|||
:price="Number(product.price)" |
|||
:badge="getBadge(product.category)" |
|||
:discount-percentage="getDiscount(product.category)" |
|||
:product-id="product.id" |
|||
/> |
|||
</ProductGrid> |
|||
</div> |
|||
|
|||
<!-- Empty State --> |
|||
<div v-else class="mx-auto max-w-container-wide text-center"> |
|||
<div class="card-glass"> |
|||
<h2 class="mb-2 text-xl font-semibold text-white"> |
|||
Keine Produkte verfügbar |
|||
</h2> |
|||
<p class="text-white/80"> |
|||
Aktuell sind keine Produkte verfügbar. Bitte schaue später noch einmal vorbei. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Info Card --> |
|||
<div class="mx-auto mt-12 max-w-container-wide"> |
|||
<div class="card-info card-accent-border"> |
|||
<h2 class="mb-3 text-xl font-semibold text-experimenta-accent"> |
|||
Warum eine experimenta Jahreskarte? |
|||
</h2> |
|||
<ul class="space-y-2 text-white/90"> |
|||
<li class="flex items-start gap-2"> |
|||
<span class="mt-1 text-experimenta-accent">✓</span> |
|||
<span>365 Tage unbegrenzter Zugang zur Ausstellungswelt</span> |
|||
</li> |
|||
<li class="flex items-start gap-2"> |
|||
<span class="mt-1 text-experimenta-accent">✓</span> |
|||
<span>Freier Eintritt zu allen Science Dome Shows</span> |
|||
</li> |
|||
<li class="flex items-start gap-2"> |
|||
<span class="mt-1 text-experimenta-accent">✓</span> |
|||
<span>Zugang zu wechselnden Sonderausstellungen</span> |
|||
</li> |
|||
<li class="flex items-start gap-2"> |
|||
<span class="mt-1 text-experimenta-accent">✓</span> |
|||
<span>Flexible Nutzung – komme so oft du möchtest</span> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</NuxtLayout> |
|||
</template> |
|||
Loading…
Reference in new issue