export default async function () { // Eén call die alles kant-en-klaar levert: de keuzeknoppen met hun leesbare // labels in de juiste volgorde, wat leverbaar is, de gekozen variant en de // prijs die daarbij hoort. Dat rekenwerk hoort op de server, want alleen die // kent zowel het product als de eigenschap-records — een pagina die het zelf // samenstelt ziet enkel de codes ('kleur', 'm') en niet de labels. const data = await appFetch("webshop", "/product/", { slug: product.slug, variant: query.variant || "", }) const item = data.product || {} const collection = data.collection || null const related = data.related || [] const axes = data.axes || [] const variant = data.variant || null const Money = ({ value }) => ( ) // Het btw-tarief komt van de server: die kent zowel het tarief van dít // product (0% mag) als de shopinstelling incl./excl. Zelf rekenen zou een // percentage hardcoden en uit de pas lopen met wat het mandje rekent. const showTax = !data.prices_include_tax const isSale = (row) => row.compare_at_price != null && Number(row.compare_at_price) > Number(row.price) /** De URL voor 'deze as op deze waarde'. * * Het enige dat de pagina zelf uitrekent: het pad van de productpagina hoort * bij de site, niet bij de app. Welke combinaties bestaan en leverbaar zijn * heeft de server al bepaald (value.available). */ const variantUrl = (axis, value) => { const parts = axes.map((a) => a.code + ":" + (a.code === axis.code ? value.value : (a.values.find((v) => v.selected) || {}).value || ""), ) return "/producten/" + item.slug + "/?variant=" + encodeURIComponent(parts.sort().join("|")) } const label = (text) => ( {text} ) return ( <> Home {(item.categories || []).includes("niet-in-shop") ? null : ( Winkel )} {item.title} {item.slug === "business-diner" ? ( Ga je mee op reis?

) : null} {(variant && variant.image) || item.image ? ( {item.title}

) : ( )} {item.slug === "business-diner" ? ( Wij zien ernaar uit u ook dit jubilieum jaar te ontmoeten! ) : null} {item.gallery && item.gallery.length > 0 ? ( {item.gallery.map((photo, index) => ( {item.title}

))} ) : null} {item.sku ? label(item.sku) : null} {item.title} {item.subtitle ? ( {item.subtitle} ) : null} {item.slug === "business-diner" ? ( {item.short_description} Programma: inloop, opening en locatie van de avond

Programma: inloop, opening en locatie van de avond

) : null} {isSale(item) ? ( ) : null} {showTax && data.tax_rate ? ( Prijs excl. btw — incl. {data.tax_rate}% btw ) : null} {item.short_description && item.slug !== "business-diner" ? ( {item.short_description} ) : null} {/* Variantkeuze als LINKS: de sleutel staat in ?variant=, dus een link naar 'de zwarte in maat 42' is deelbaar en de terug-knop draait een keuze terug. Geen client-state nodig. */} {axes.map((axis) => ( {label(axis.title)} {axis.values.map((value) => ( {axis.display === "swatches" && value.color ? ( ) : ( )} ))} ))} {axes.length && !data.sellable ? ( Deze combinatie is uitverkocht. Kies een andere maat of kleur. ) : null} {item.slug === "business-diner" ? ( Geniet tijdens de avondreis van muzikale omlijsting met Carina Bossenbroek en Wilbert Magré. Daarnaast kondigt Dominee C. Sonnevelt het 5-jarig jubileum van Njalowei aan. Uiteraard is er volop gelegenheid om te netwerken met andere ondernemers. ) : null} {/* Het enige dat client-side moet: toevoegen aan het mandje. */} {variant && variant.sku ? label("Artikelnummer " + variant.sku) : null} {item.description ? ( ) : null} {related.length && !(item.categories || []).includes("niet-in-shop") ? ( {collection ? "Meer uit " + collection.title : "Misschien ook iets"} {related.map((other) => ( {other.image ? ( {other.title}

) : null} {other.title} {showTax ? " excl. btw" : ""} ))} ) : null} ) }

Notitieblok

Meer uit Webshop