Marco
14d824491f
Products.ts's admin.livePreview (added earlier this session) only made the admin UI show a preview iframe — the actual page had no mechanism to receive postMessage updates and re-render with unsaved draft data, unlike Pages/Posts which already have this (LivePageContent.tsx/ LivePostContent.tsx). Edits in the backend were invisible in the preview until an actual save (reported 2026-08-30). New LiveProductContent.tsx mirrors LivePageContent.tsx's pattern exactly: useLivePreview<PayloadProduct> + mapPayloadProduct, rendering via ProductBlocks.tsx's now-exported renderProductBlock (sync) instead of the full async ProductBlocks wrapper. testimonialsRef/crossSell skipped in the live subset (need an async fetch a client component can't perform inline) — same "editable subset only" scope Pages/Posts already accept. shipping/tax/Kleinunternehmer context is fetched once via the newly-exported getProductBlockContext() and passed in rather than re-fetched per keystroke. /der-eine and /tasse-die-pause now check draftMode() and swap in LiveProductContent instead of the normal async ProductBlocks when Payload's Live Preview iframe has it enabled. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013Eg6h91yngXmSnM51wxXM8
58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
import type { Metadata } from "next";
|
||
import { notFound } from "next/navigation";
|
||
import { draftMode } from "next/headers";
|
||
import { ProductBlocks, getProductBlockContext } from "../components/ProductBlocks";
|
||
import { LiveProductContent } from "../components/LiveProductContent";
|
||
import { Footer } from "../components/Footer";
|
||
import { getProductBySlug, getCompanySettings } from "../lib/payload";
|
||
import { buildProductSchema } from "../lib/structuredData";
|
||
|
||
const title = "Der Eine. – Für die eine Sache, die gerade zählt.";
|
||
|
||
// der-eine was the reference template the whole PDP block-builder system
|
||
// was designed to match (gallery sizing, black stepRow-facts icons,
|
||
// CTA-label pattern — see ProductBlocks.tsx's own comments) — now migrated
|
||
// onto it itself, same as /tasse-die-pause before it. Testimonials.tsx
|
||
// dropped entirely rather than migrated: the PDP builder no longer offers
|
||
// testimonialsRef (removed 2026-08-29, unused everywhere; the planned
|
||
// replacement is a real reviews feature). Hero.tsx/Focus.tsx/
|
||
// Testimonials.tsx/Pricing.tsx/PasstDazu.tsx in ./components are now dead
|
||
// code, left for a follow-up cleanup pass rather than deleted here — same
|
||
// as /tasse-die-pause's own old components.
|
||
export async function generateMetadata(): Promise<Metadata> {
|
||
const product = await getProductBySlug("stift-kugelschreiber");
|
||
const description = product?.descriptionText || undefined;
|
||
return {
|
||
title,
|
||
description,
|
||
alternates: { canonical: "/der-eine" },
|
||
openGraph: { title, description, url: "/der-eine" },
|
||
twitter: { title, description },
|
||
};
|
||
}
|
||
|
||
export default async function DerEinePage() {
|
||
const { isEnabled: isPreview } = await draftMode();
|
||
const [product, seller] = await Promise.all([
|
||
getProductBySlug("stift-kugelschreiber"),
|
||
getCompanySettings(),
|
||
]);
|
||
if (!product) notFound();
|
||
const productSchema = buildProductSchema(product, "https://einfach-produktiv.mk360.de/der-eine", seller);
|
||
const ctx = isPreview ? await getProductBlockContext(product) : null;
|
||
|
||
return (
|
||
<>
|
||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }} />
|
||
<main className="flex flex-col flex-1">
|
||
{ctx ? (
|
||
<LiveProductContent initialProduct={product} shipping={ctx.shipping} taxRate={ctx.taxRate} kleinunternehmer={ctx.kleinunternehmer} />
|
||
) : (
|
||
<ProductBlocks product={product} />
|
||
)}
|
||
</main>
|
||
<Footer />
|
||
</>
|
||
);
|
||
}
|