Page Examples

<script lang="ts">
export const description = "Order confirmation page with order summary, shipping details, and next-step CTAs."
export const iframeHeight = "1600px"
</script>

<script setup lang="ts">
import HeaderShop from "@/components/HeaderShop.vue"
import FooterRich from "@/components/FooterRich.vue"
import OrderConfirmation from "@/components/OrderConfirmation.vue"

const { result, status } = useDemoSearch()

const orderItems = computed(() => {
  const items = result.value?.items
  if (!items?.length) return undefined
  return items.slice(0, 3).map((item: any, index: number) => ({
    id: item.id ?? String(index + 1),
    name: item.name,
    variant: [
      item.options?.[0]?.values?.[0]?.name,
      item.manufacturer?.name,
    ].filter(Boolean).join(' / ') || 'Default',
    price: item.price,
    quantity: index === 1 ? 2 : 1,
    image: item.cover?.src ?? '/placeholder.svg',
  }))
})
</script>

<template>
  <div class="flex min-h-svh flex-col bg-background">
    <HeaderShop />
    <main class="flex-1 p-6 md:p-10">
      <div class="mx-auto max-w-4xl">
        <OrderConfirmation
          :items="status === 'success' ? orderItems : undefined"
          :currency="result?.items?.[0]?.price?.currency ?? 'EUR'"
        />
      </div>
    </main>
    <FooterRich />
  </div>
</template>