44107c0734
Some checks failed
Build and publish / build (push) Failing after 19s
Source moved verbatim from mp/shop/ on 2026-04-29; mp was the first concrete adapter consuming the libreshop toolkit. Builds and publishes git.librete.ch/libreshop/shop on every main / v* push via the standard .gitea/workflows/build.yml shared across libreshop components.
59 lines
2.0 KiB
Vue
59 lines
2.0 KiB
Vue
<template>
|
|
<main class="pb-20">
|
|
<PageHero title="Versand" subtitle="Lieferung und Versandkosten" />
|
|
<PageSection :content="VERSAND_CONTENT" />
|
|
|
|
<!-- Dynamic Delivery Methods from API -->
|
|
<section class="py-12 lg:py-16 bg-gray-50">
|
|
<div class="xl:container mx-auto px-6">
|
|
<h2 class="text-2xl font-bold mb-8">Verfügbare Versandarten</h2>
|
|
|
|
<div v-if="pending" class="text-center py-8">
|
|
<LoadingSpinner />
|
|
</div>
|
|
|
|
<div v-else-if="deliveryMethods.length > 0" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div v-for="method in deliveryMethods" :key="method.id" class="bg-white rounded-xl p-6 shadow-sm">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<h3 class="text-lg font-semibold">{{ method.name }}</h3>
|
|
<span class="text-lg font-bold">{{ formatPrice(method.price) }}</span>
|
|
</div>
|
|
<p v-if="method.description" class="text-gray-600 text-sm">{{ method.description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { VERSAND_CONTENT } from "~/composables/usePageContent";
|
|
import { numberFormatter } from "~/utils/numberFormatter";
|
|
|
|
const shopApi = useShopApi();
|
|
|
|
const { data: deliveryData, status } = await useAsyncData("delivery-methods", async () => {
|
|
const response = await shopApi.getDeliveryMethods();
|
|
// Flatten Strapi v4 attributes structure
|
|
return (response.data || []).map((item: any) => ({
|
|
id: item.id,
|
|
name: item.attributes?.name ?? item.name,
|
|
price: item.attributes?.price ?? item.price ?? 0,
|
|
description: item.attributes?.description ?? item.description
|
|
}));
|
|
});
|
|
|
|
const pending = computed(() => status.value === "pending");
|
|
const deliveryMethods = computed(() => deliveryData.value || []);
|
|
|
|
function formatPrice(price: number) {
|
|
if (price === 0) return "Kostenlos";
|
|
return numberFormatter(price, "EUR");
|
|
}
|
|
|
|
useSeoMeta({
|
|
title: "Versand | MUELLERPRINTS",
|
|
description: "Informationen zu Lieferung und Versandkosten bei MUELLERPRINTS. Schneller Versand mit DHL und Deutsche Post.",
|
|
});
|
|
</script>
|