Build & Ship a Stripe Storefront

Valmis pood tegevuses — sirvi kategooriat, ava toode, lisa korvi, vormista ost.

Praktiline juhend, mis ehitab Profound CMS-is sisupõhise poe: CMS-is modelleeritud tootekataloog (kategooriad + tooted), nimekirja- ja detaillehed ühest marsruudikomplektist ning peata komponendina tarnitav Stripe'i hallatav kassaprotsess.

Selgroog on käsitsi kirjutatud Next.js koos Profoundi adminiga. Claude Code (Profound MCP kaudu) teeb ära põhiosa kolmest ülesandest — kataloogi külvamine, disainisüsteemi ühendamine ja vitriinikomponentide (sh peata ostukorvi) kirjutamine. Kolm osa: Seadistus, Ehitus, Tööversioon.

Maksed ühe reaga. Kasutame Stripe'i hallatavat kassaprotsessi: ostja maksab Stripe'i lehel, mitte sinu omal. Sinu rakendus teeb serveris vaid kaks asja — loob Checkout Sessioni ja valideerib ühe veebikonksu. Ei ühtegi kaardivälja, ei Stripe Elementsit, pole PCI koormust.

Mida sa ehitad

• Väike avaldatud kataloog CMS-is — kolm kategooriat ja kaheksa toodet (demo "Edisoni leiutised") — igaüht saab kaupmees ilma koodita muuta.
• Kaks parametrilist marsruuti (/products/{item_code}, /categories/{category_code}) pluss staatiline /cart, kõik ühest komponentide komplektist.
• Peata ostukorv (useCart) ja Stripe'i hallatav kassaprotsess, kus hind lahendatakse alati serveris Stripe'i Price ID põhjal.
• Pood on Vercelis üles pandud koos reaalajas eelvaate ja tiimisisese kohapealse muutmisvõimalusega.

Eeltingimused

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code koos Profound MCP-ga (osa 1 paigaldab selle).
• Profound CMS-i konto.
• Stripe'i konto. See juhend töötab testrežiimis, nii et ehitamise ajal ei liigu pärisraha — kuid voo käitumine on identne elavate võtmetega, nii et soovi korral kasuta oma päriskontos olevaid võtmeid. (Testrežiim ei vaja äri- ega pangainfo.)
• Stripe CLI (stripe login) lokaalsete veebikonksude jaoks.
• Deploy'ks: GitHub CLI (gh) ja Verceli konto, mis on GitHubiga ühendatud.

Kuidas tükid kokku sobituvad

Profound eraldab sisu ja renderdamise:

• Komponendid määratlevad sisu struktuuri. Kohandatud komponendil, millel on Route Slug väli, on marsruut (category, item); üks märgendiga UI Element on paigutatav lehele (nav, product_grid, …).
• Dokumendid on sisu (toode, kategooria).
• UI elemendid on lehe lõigud; iga skalaarkent võtab staatilise väärtuse või CEL-avalduse, mis hinnatakse renderdamisel.
• Parametrilised marsruudid seovad URL-i dokumendi + UI elementidega, andes marsruudiparameetrid edasi (meta.params.* CEL-is, routeParams Reactis).
• Sinu Next.js rakendus loeb seda cms-rendereri kaudu; Stripe lisatakse tavaliste API marsruutidena.

Üks reegel, mis kujundab kogu ehituse: CEL seob ainult string/number välju. Seega skalaarkromi (navibränd, jaluse tekst, pealkirjad) seotakse CEL-iga, samas kui kõik rikkalik või kogumik (tooteruudustik, pildigalerii, rikkalik tekst) tuuakse Reacti komponendi sees marsruudiparameetri alusel. Ja Stripe on hinnainfo tõeallikas — CMS-i price on vaid kuvamiseks; tasu lahendatakse alati serveris Stripe'i Price ID-st.

Osa 1 — Seadistus

Lõpptulemus: väike avaldatud kataloog, rakendus loeb seda, Stripe on paigaldatud, disain on paigas — renderdust veel pole.

1. Registreeru ja loo veebisait

Registreeru Profoundis (WorkOS autent). Loo store-nimeline veebisait, seejärel kopeeri selle veebisaidi ID (UUID admini URL-is) ja lugemistaseme API-võti (Deployments → Create API key). Rakendus ainult loeb; kataloogi külvamine käib hiljem MCP kaudu, mis autentib eraldi.

2. Skafoldeeri rakendus, ühenda see ja lisa Stripe

bunx create-profound-next store
cd store
bun add stripe

Skafold on Next.js App Routeri projekt, mis on Profoundi jaoks eelhäälestatud (cms-rendereri SDK, kõike püüdva marsruudi, generate-schemas skripti, <Refresher>i) abil. Kujundust see kaasa ei too. bun add stripe toob serveri SDK — ainus maksetesõltuvus, mida hallatav kassaprotsess vajab.

Lisa oma väärtused faili .env.local:

# CMS
PROFOUND_API_KEY=<sinu lugemisvõti>
NEXT_PUBLIC_PROFOUND_WEBSITE_ID=<sinu veebisaidi ID>
NEXT_PUBLIC_CMS_API_URL=https://cms.dev.tryprofound.com
NEXT_PUBLIC_BUNNY_CDN_URL=https://cms-profound.b-cdn.net   # pakub CMS-is hostitud pilte

# Stripe
STRIPE_SECRET_KEY=sk_test_...            # siia testvõti; päris võtme vahetad sisse, kui lähed live'i
STRIPE_WEBHOOK_SECRET=whsec_...          # täidetakse Ehitus, samm 4
NEXT_PUBLIC_SITE_URL=http://localhost:3000

Haara STRIPE_SECRET_KEY saidilt Stripe → Developers → API keys. Kasutame testvõtit (sk_test_…), nii et ehituse ajal pärisraha ei liigu; kui oled valmis pärismakseid vastu võtma, lülita elusvõtmele. Käivita bun dev ja ava localhost:3000 — stardirakendus renderdub.

Hallatav kassaprotsess suunab brauseri Stripe'i URL-ile, seega serveri salavõtmest piisab — pole avalikku võtit ega kliendipoolset Stripe'i SDK-d.

3. Loo komponendid category, product_image ja item

Loo kolm kohandatud komponenti (Components → Create new component) — need on andmeallikas, seega ilma UI Elementi märgendita. Määra iga komponent Active olekusse.

CMS-il pole "pildimassiivi" välja, seega on galerii väike viidete massiiv product_image komponendile. Loo category ja product_image (ja märgi need Active) enne item komponenti — viitevälja sihtmärgiks saab valida ainult aktiivseid komponente.

• category — name (Text), code (Text, Route Slug), description (Rich text), heroImage (Image)
• product_image — image (Image)
• item — name (Text), code (Text, Route Slug), description (Rich text), images (viidete massiiv → product_image), price (Number, sendid — ainult kuvamine), currency (Select, usd), stripePriceId (Text), category (Reference → category), active (Boolean)

Jäta kõik väljad valikuliseks. Admin muudab väljanimed alamkriipsudega variandiks ("Stripe Price Id" → stripe_price_id) — sinu kood kasutab just neid nimesid, seega loe tõelised nimed hiljem generate-schemas abil tagasi. Marsruuditava handle'i nimeks paneme code (mitte slug): see on Route Slug ja puhta documents.getByCode päringu võti.

Komponent item — code Route Slug'ina, images viidetena product_image-le, lisaks stripePriceId ja category viide.

4. Tõmba komponendid alla lokaalseks tüübiks

bun run generate-schemas

Kirjutab Zodi skeemid + tüübid faili generated/cms-schemas.ts (categorySchema/Category, itemSchema/Item). Toimib ka ühendustestina — valed mandaadid annavad siin veateate.

5. Külva kataloog Profound MCP kaudu

Paigalda ja autendi MCP ühekordselt:

claude mcp add --transport http Profound http://107.21.107.99:8081/mcp

Käivita mcp__Profound__authenticate, lõpeta WorkOS-i voog ja palu siis Claudelt:

Genereeri väike e-poe kataloog nimega Edison's Inventions — kolm kategooriat ja järgmised tooted, igale lühike ajastutruu description, price sentides, currency: "usd" ja active: true:

• Lighting & Power (code: lighting): Incandescent Lightbulb (incandescent-lightbulb, 24 $), Electric Dynamo (electric-dynamo, 890 $), Electric Pen (electric-pen, 49 $)
• Sound Recording (code: sound): Tinfoil Phonograph (tinfoil-phonograph, 249 $), Carbon Microphone (carbon-microphone, 59 $), Dictaphone (dictaphone, 179 $)
• Motion Pictures (code: motion): Kinetoscope (kinetoscope, 399 $), Kinetograph Camera (kinetograph, 549 $)

Igal kategoorial olgu name ja see väikeste tähtedega code; igal tootel name, seesama väiketähtedega code, description, price (sentides), currency ja active. Salvesta see faili data/catalog.json ja valideeri meie category ja item komponentide vastu. Seejärel kasuta Profound MCP-d, et luua igaüks avaldatud dokumendina: loo kategooriad esimesena, püüa kinni nende ID-d, seejärel loo tooted, seades category viiteks — { "_type": "reference", "_ref": "<category-id>", "_schema": "category" }. Tee toodete loomine paralleelselt.

Claude kirjutab faili data/catalog.json, valideerib selle ning käivitab paralleelsed create_document-kutsed (status: "published"). Külva kategooriad enne tooteid, et viited osutaksid juba olemasolevatele ID-dele.

Kolm külvatud kategooriat, avaldatud ja Live.

Kaheksa külvatud toodet, igaüks seotud kategooriaga.

6. Loo Stripe'i hinnad ja ühenda mõned tooted

Kataloog on CMS-is; nüüd anna mõnele tootele päris Stripe'i hind — see on kaupmehe töö, mis toimub kahes halduspaneelis ilma koodita:

1. Stripe'i töölaual → Products → + Add product, määra ühekordne hind, kopeeri Price ID (price_…).
2. Tee seda umbes 3-le tipp-tootele (nt hõõglamp, fonograaf, kinetoskoop).
3. Profoundi admin → item → Documents → kleebi iga produkti stripePriceId väljale vastav Price ID ja salvesta.

CMS hoiab kataloogi; Stripe hoiab hinnatõde; link on üks string, mille kaupmees kleebib. (Soovid automatiseerida? Ametlik Stripe MCP saab Products/Prices sinu eest luua — kleebi tagastatud ID-d samal moel.)

7. Lisa disainisüsteem ja seo see tehisintellekti abil

Skafold on stiilita. Aseta projekti juurkausta DESIGN.md (Tailwind v4 @theme plokk + tokenid) — kas enda oma või laadi alla refero.design lehelt. Seejärel palu Claudel, keskendudes ainult stiilile:

Loe disainifail, mille just lisasin. Sea vajadusel üles Tailwind, seejärel ühenda teema ja fondid, et stiil toimiks. Kasuta fonte laadides next/fonti — ära lae neid Google'ist jooksu pealt. Ainult stiil — ära ehita veel lehti ega komponente.

Veendu, et src/app/globals.css sisaldab @import "tailwindcss"; + @theme plokki ning et localhost:3000 kuvab tokenid. Hoia prompt lühike (liiga avatud ülesanne paneb agendi ehitama terve avalehe) ja laadi fondid next/fonti kaudu, mitte runtime'is Google'ist.

8. Lisa tootepildid (valikuline)

Valikuline — toimiva kassani jõuad ka ilma piltideta. Kui soovid neid lisada: loo iga pildi jaoks product_image dokument (lae pilt selle image väljale), seejärel viita neile toote images massiivis. Too omad tootefotod või genereeri ühtne komplekt mõne pildimudeliga (lase Claudel tuletada DESIGN.md põhjal brändikohased promptid ja lukusta üks Midjourney --sref, et kõik võtted sobiksid kokku).

Iseseisval cms-rendereril pole pildi-URL-i abifunktsiooni, seega vendori buildAssetUrl faili src/lib/image.ts (~40 rida) — see lisab ette NEXT_PUBLIC_BUNNY_CDN_URL ja laiendi. Komponendid Ehitus, samm 3 kasutavad seda.

Osa 2 — Ehitus

Ehita renderduskiht ja kassaprotsess, mis lõpeb päris testmaksega.

1. Loo viis UI elemendikomponenti

Viis komponenti, igaüks Active ja märgendiga UI Element (Settings → Tags), ilma Route Slugita:

• nav → brand · product_grid → heading · product_detail → heading · cart_summary → heading · footer → text (kõik Text)

UI Element märgend paneb komponendi ilmuma Page Builderi Add UI Element loendis — Active olekust üksi ei piisa. Iga väli on skalaar (need, mida CEL seob); tegelik kataloog info pole siin väli — ProductGrid/ProductDetail toovad selle marsruudiparameetri põhjal (samm 3).

2. Genereeri tüübid uuesti

bun run generate-schemas

3. Genereeri kataloogi lugeja, komponendid ja peata ostukorv

Üks prompt loob lugemispõhise abisti, viis komponenti, ostukorvi ja registri:

Ehita meie vitriin kataloogi src/ kausta, kasutades Profoundi cms-renderer SDK-d.

src/lib/catalog.ts — serveripoolne CMS-i lugeja. Loo klient getCmsClient({ cmsUrl: process.env.NEXT_PUBLIC_CMS_API_URL!, apiKey: process.env.PROFOUND_API_KEY, websiteId: process.env.NEXT_PUBLIC_PROFOUND_WEBSITE_ID! }) abil teegist cms-renderer/lib/cms-api. Ekspordi getItemByCode(code) → cms.documents.getByCode.query({ websiteId, schemaName: "item", code }), mis tagastab res.document.published_content. Ekspordi listItems(categoryCode?) → cms.documents.list.query({ websiteId, schemaName: "item", status: "published", limit: 100 }), kaardista res.documents väärtuseks .published_content, filtreeri välja active !== false, ja kui categoryCode on antud, jäta alles üksused, mille category._ref võrdub kategooria document.id-ga. Ekspordi resolveImages(refs), mis lahendab iga item.images viite kaudu cms.documents.get.query({ websiteId, id: ref._ref }) ja muudab selle pildivälja URL-iks vendordatud buildAssetUrl abil (Osa 1 samm 8).

src/components/ — viis UI elementide komponenti, registreeritud kõike püüdvas marsruudis registrisse komponentide nimede järgi, snake_case kujul, et kattuks adminiga: { nav, product_grid, product_detail, cart_summary, footer }. Nav ja Footer loevad oma skalaarkent content propilt (tüüp BlockComponentProps<T> teegist cms-renderer/lib/types). ProductGrid ja ProductDetail on asünkroonsed serverikomponendid, mis loevad routeParams ja toovad andmed failist catalog.ts: routeParams.<param> on kujul { value, … } — kasuta .value, seega ProductGrid kutsub listItems(routeParams.category_code?.value) (kaardid viitavad aadressile /products/{code}) ja ProductDetail kutsub getItemByCode(routeParams.item_code?.value) (galerii resolveImages kaudu, rikkalik kirjeldus, hind, Lisa korvi nupp). CartSummary renderdab ostukorvi useCartist koos maksenupuga. Hoia formatPrice puhtas failis src/lib/format.ts, et kliendikomponendid ei impordiks serveripoolset catalog.tsi.

src/components/AddToCartButton.tsx — "use client" nupp proportsiooniga { code, name, priceLabel }, mis kutsub useCart().addItem({ code, name, priceLabel, quantity: 1 }). Kasuta seda ProductDetailis.

src/lib/useCart.ts — peata ostukorv: read { code, name, priceLabel, quantity } seisundis, püsiv localStorageis, eksponeerib addItem/removeItem/updateQty/subtotal ning checkout(), mis POSTitab { lines: [{ code, quantity }] } (ainult koodid ja kogused — mitte kunagi hindu) aadressile /api/stripe/checkout, seejärel suunab edasi tagastatud urlile.

Stiili kõike meie disainisüsteemiga, kasutades oma komponente — ära kopeeri allikveebi paigutust.

Pärast käivitamist tea kolme asja:

• Skalaarkromi saab content propilt ({ content }: BlockComponentProps<T>) — kui destruktureerid väljad otse ülemise taseme propsidesse, jääb plokk tühjaks. Kataloogandmed tulevad routeParams + catalog.ts päringu kaudu, sest CEL ei seo loendeid ega galeriisid. Ostukorv kannab kaasa tootekoodid, mitte hindu.
• routeParams.<param> on { value, schemaName, document } — loe .value. Lugemised tagastavad published_content, mitte .content. Registri võtmeks on snake_case, et see langeks admini nimetusega kokku.
• Uuenda @types/react/@types/react-dom versioonile 19 — skafold on 18. versioonis, mis rikub asünkroonseid serverikomponentide plokke React 19 vastu.

4. Kirjuta Stripe'i serverikood (selgroog)

Kolm lühikest serverifaili — ainsad maksekoodid rakenduses. Need kasutavad getItemByCode funktsiooni, nii et tasu lahendatakse serveris.

src/lib/stripe.ts:

import Stripe from "stripe";
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

src/app/api/stripe/checkout/route.ts — lahenda iga toode CMS-ist, võta Stripe'i hind:

import { NextResponse } from "next/server";
import { stripe } from "@/lib/stripe";
import { getItemByCode } from "@/lib/catalog"; // serveripoolne, lugemisvõtmega

export async function POST(req: Request) {
  const { lines } = await req.json();                // [{ code, quantity }] — kliendilt ei tule hindu
  const line_items = await Promise.all(
    lines.map(async ({ code, quantity }: { code: string; quantity: number }) => {
      const item = await getItemByCode(code);          // server toob CMS-ist
      return { price: item!.stripe_price_id, quantity }; // hind CMS-ist, mitte kliendilt
    })
  );
  const session = await stripe.checkout.sessions.create({
    mode: "payment",
    line_items,
    success_url: `${process.env.NEXT_PUBLIC_SITE_URL}/cart?status=success`,
    cancel_url: `${process.env.NEXT_PUBLIC_SITE_URL}/cart?status=cancelled`,
  });
  return NextResponse.json({ url: session.url });     // klient suunatakse siia
}

src/app/api/stripe/webhook/route.ts — usaldusväärne täitmissignaal:

import { stripe } from "@/lib/stripe";

export async function POST(req: Request) {
  const body = await req.text();                      // TOOREE keha — vajalik allkirja kontrolliks
  const sig = req.headers.get("stripe-signature")!;
  let event;
  try {
    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!);
  } catch {
    return new Response("Bad signature", { status: 400 });
  }
  if (event.type === "checkout.session.completed") {
    // täida tellimus: salvesta order / saada kviitung.
  }
  return new Response(null, { status: 200 });
}

Vajalik skafoldi parandus: skafoldi src/proxy.ts suunab kõik /api/* päringud CMS-i, mistõttu Stripe'i marsruudid ei tööta. Lase neil kõigepealt läbi:

import { createCmsProxy } from "cms-renderer/lib/proxy";
import { NextResponse, type NextRequest } from "next/server";
import { cmsConfig } from "@/lib/cms-config";

const cmsProxy = createCmsProxy({ upstream: cmsConfig.cmsUrl });
const LOCAL_API_PREFIXES = ["/api/stripe"];

export const proxy = async (request: NextRequest) => {
  if (LOCAL_API_PREFIXES.some((p) => request.nextUrl.pathname.startsWith(p))) {
    return NextResponse.next();                       // käitle lokaalselt
  }
  return cmsProxy(request as unknown as Parameters<typeof cmsProxy>[0]);
};
// jäta skafoldi `export const config = { matcher: [...] }` muutmata

Kontroll: curl -X POST localhost:3000/api/stripe/webhook -d x peab tagastama Bad signature.

Käivita Stripe CLI lokaalsete veebikonksude jaoks:

stripe login
stripe listen --forward-to localhost:3000/api/stripe/webhook
# kopeeri whsec_... STRIPE_WEBHOOK_SECRET väärtuseks, taaskäivita bun dev

whsec_… kehtib iga seansi kohta eraldi. Turvalisuse tagavad kaks reeglit: kassaprotsess tuletab hinna uuesti CMS-ist koodi järgi (võltsitud ostukorv ei saa seda muuta) ning veebikonks valideerib allkirja toore keha vastu.

5. Loo marsruudid

Admin → Pages → Create page, kolm korda. Seo iga parameeter vastava komponendiga (slugi väli code):

1. /products/{item_code} → item
2. /categories/{category_code} → category
3. /cart — staatiline leht (sisesta sõna-sõnalt /cart, mitte /{cart})

6. Lisa UI elemendid, seo CEL ja avalda

Iga marsruudi jaoks: Page Builder → Add UI Element → Custom → lisa komponendid õiges järjekorras, täida skalaarkennad (staatiline väärtus või CEL), Publish.

• /products/{item_code}: nav, product_detail, footer
• /categories/{category_code}: nav, product_grid, footer
• /cart: nav, cart_summary, footer

Määra nav.brand ja footer.text staatiliste stringidena; pealkirjade väljadesse kirjuta staatilised sildid.

Page Builder kategooria marsruudil — valitud product_grid element, selle pealkiri seotuna CEL-iga.

Page Builder toote marsruudil — product_detail element seotud tootega.

Parametrilise Page Builderi iseärasus: kahel parametrilisel marsruudil UI elementide lisamine ei püsi (plokid orvustuvad ja leht jääb tühjaks). Kuni see on parandatud, sea nende lehtede block_ids otse Profound MCP update_page käsuga, seejärel avalda. (Staatiline /cart seob elemendid tavapäraselt.) Samal põhjusel tuletab ProductGrid pealkirja hoopis kategooriast, mille ta toob, mitte CEL-iga.

7. Renderda ja tee ost

• /categories/lighting → ruudustik. Klõpsa tootel → detailvaade + Lisa korvi. /cart → maksa.
• Kassaprotsess suunab Stripe'i hallatavale kassale. Kasuta testkaarti 4242 4242 4242 4242, ükskõik milline tulevikukuupäev/CVC. Sind tuuakse tagasi aadressile /cart?status=success, ja stripe listen kuvab sündmuse checkout.session.completed.

Renderdatud tooteleht — galerii, hind ja Lisa korvi nupp.

Ostukorv — read ja üks Pay-with-Stripe nupp.

Vaid hinnaga tooted on ostetavad — osta üks neist ~3, mille hinnad samm 6-s lisasid.

Valikuline — rahvusvahelistamine. Tõlgi iga komponent (kõik 35 keelt korraga), lisa /{language}/… segment, mis on seotud sisseehitatud language süsteemikomponendiga, ja vaheta CEL-i abil seotud väljad documents.translated peale. Vaata lennujaama kataloogi juhendi osa 2 sammu 7.

Osa 3 — Tööversioon

1. Saada välja: GitHub, siis Vercel

git init && git add -A && git commit -m "Stripe storefront"
gh repo create store --private --source=. --push   # --public sobib samuti

Ehituskäsk: generated/cms-schemas.ts on .gitignore all, seega pane ehitus käsule tuginema selle regenereerimine — lisa vercel.json:

{ "$schema": "https://openapi.vercel.sh/vercel.json", "buildCommand": "bun run generate-schemas && next build" }

Vercelis: Add New → Project, impordi store ja lisa keskkonnamuutujad — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL, NEXT_PUBLIC_BUNNY_CDN_URL, STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET (deployitud lõpp-punkti väärtus, vt allpool) ja NEXT_PUBLIC_SITE_URL (sinu tootmiskeskkonna URL). Deploy.

Seejärel seo deployitud veebikonks (lokal stripe listeni salavõti kehtis vaid lokaalselt): Stripe → Developers → Webhooks → + Add endpoint → https://<prod>/api/stripe/webhook, sündmus checkout.session.completed. Kopeeri selle whsec_… Vercelisse ja redeploy.

Puuduvad keskkonnamuutujad = "töötab lokaalselt, on produktsioonis tühi" — levinum deploy'ga seotud viga. Siin deployme testvõtmetega; kui oled valmis pärismakseid vastu võtma, vaheta STRIPE_SECRET_KEY ja veebikonksu salavõti live väärtuste vastu.

2. Reaalajas eelvaade ja kohapealne muutmine

Mõlemad tulevad skafoldiga kaasa.

• Reaalajas eelvaade: <Refresher> uuendab eelvaate lehte, kui toimetaja adminis salvestab — redeployd pole vaja. (See on eelvaade toimetajale; külastajad näevad avaldatud sisu tavapärase revalideerimisega.)
• Kohapealne muutmine: lisa ükskõik millisele URL-ile ?edit_mode=true, et näha muutmis-ülekateid. Tavakülastajad näevad puhast lehte.

Lisa eelvaate marsruut, mida skafold ei sisalda. Admin laadib oma eelvaate iframe'i aadressilt /cms-preview_<path>; ilma selle marsruudita lähevad kõik eelvaated 404-ks. Lisa see:

// src/app/cms-preview_/[...slug]/page.tsx
import { ParametricRoutePreviewPage } from "cms-renderer/lib/renderer";
import { registry } from "../../registry";   // tõsta oma register jagatud moodulisse
export default async function Page({ params, searchParams }) {
  const { slug } = await params;
  const PreviewPage = ParametricRoutePreviewPage as any; // asünkroonne RSC; React 19 tüübid
  return <PreviewPage registry={registry} apiKey={process.env.PROFOUND_API_KEY ?? ""}
    websiteId={process.env.NEXT_PUBLIC_PROFOUND_WEBSITE_ID ?? ""}
    cmsUrl={process.env.NEXT_PUBLIC_CMS_API_URL ?? "https://cms.dev.tryprofound.com"}
    params={Promise.resolve({ slug })} searchParams={searchParams} />;
}

Lisa ka src/app/cms-preview_/page.tsx (sama, slug: []) segmendi juure jaoks.

Valmis ehitus

Sisupõhine Stripe'i vitriin: CMS-i kataloog, nimekirja- ja detaillehed ühest marsruudikomplektist ning toimiv hallatav kassaprotsess. AI külvas kataloogi, ühendas disaini ja kirjutas kataloogilugeja + komponendid + peata ostukorvi; sina tegid komponendid, Stripe'i hinnalinkid, kolm marsruuti, CEL-i kromi ning kolm lühikest Stripe'i faili. CEL seob kromi; komponendid toovad kataloogi. Ja Stripe jäi väikeseks — üks sessions.create kõne ja üks allkirjastatud veebikonks, kus ostja maksab Stripe'i enda lehel.