export default async function () { // Alles server-side: /catalog/ filtert, sorteert en bladert op basis van de // querystring, dus het raster staat in de eerste HTML en de paginering klopt // met wat er na het filteren overblijft. // // De filters zijn gewone LINKS naar dezelfde pagina met een andere // querystring. Daardoor werkt dit zonder client-JS, is een gefilterde // weergave deelbaar en doet de terug-knop wat je verwacht. Prijs: een klik is // een navigatie, geen directe update. const params = { category: product_category.slug } for (const key of Object.keys(query)) { if (key !== "category") params[key] = query[key] } let data = await appFetch("webshop", "/catalog/", params) const products = data.products || [] // `filters` (niet `attributes`): het endpoint heeft de waarden er al uit // gehaald die in déze collectie bij geen enkel product voorkomen. Anders stond // er XS/S bij de schoenen, want 'maat' bedient kleding én schoenen. const attributes = data.filters || [] const counts = data.counts || {} const selected = data.selected || {} const saleOnly = !!data.sale_only const sort = data.sort || "" const page = data.page || 1 const pageCount = data.page_count || 1 const matched = data.matched || 0 // formatteert via Intl in de site-taal; Money scheelt alleen // het herhalen van style/currency op elk bedrag. const Money = ({ value }) => ( ) // /catalog/ geeft (nog) geen btw-percentage per product mee: het tarief van dít // product (0% mag) én of de prijzen al btw bevatten. Zelf rekenen zou een // percentage hardcoden en uit de pas lopen met wat het mandje rekent. const showTax = !data.prices_include_tax const isSale = (product) => product.compare_at_price != null && Number(product.compare_at_price) > Number(product.price) /** * Een URL naar deze pagina met een aangepaste querystring. * * Een lege waarde haalt de parameter weg, zodat de URL nooit ?kleur= bevat. * Elke filter- of sorteerwijziging laat `pagina` vallen: sta je op pagina 3 en * filter je terug naar acht producten, dan zou je anders naar een pagina * kijken die niet meer bestaat. */ const urlWith = (changes, keepPage) => { const next = {} for (const key of Object.keys(query)) { if (key !== "category") next[key] = query[key] } for (const key of Object.keys(changes)) { const value = changes[key] if (!value || value.length === 0) delete next[key] else next[key] = Array.isArray(value) ? value.join(",") : String(value) } if (!keepPage) delete next.page const search = Object.keys(next) .map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(next[k])) .join("&") const base = "/collecties/" + product_category.slug + "/" return search ? base + "?" + search : base } /** De URL waarin déze waarde aan/uit gaat binnen z'n eigen groep. */ const toggleUrl = (code, value) => { const chosen = selected[code] || [] const next = chosen.includes(value) ? chosen.filter((v) => v !== value) : chosen.concat(value) return urlWith({ [code]: next }) } const activeCount = Object.keys(selected).reduce((total, code) => total + selected[code].length, 0) + (saleOnly ? 1 : 0) /** * De paginanummers om de huidige pagina heen, met beletseltekens. Eerste en * laatste staan er altijd bij; een gat van precies één pagina tonen we als dat * cijfer — een '…' die één nummer verbergt kost evenveel ruimte. */ const pageWindow = () => { const set = [1, pageCount, page, page - 1, page + 1] const list = [] for (const p of set) { if (p >= 1 && p <= pageCount && !list.includes(p)) list.push(p) } list.sort((a, b) => a - b) const out = [] list.forEach((p, index) => { const previous = list[index - 1] if (previous) { if (p - previous === 2) out.push(previous + 1) else if (p - previous > 2) out.push("…") } out.push(p) }) return out } const groupLabel = (text, extra = {}) => ( {text} ) const SORTS = [ { value: "", label: "Standaard" }, { value: "prijs-op", label: "Prijs: laag → hoog" }, { value: "prijs-af", label: "Prijs: hoog → laag" }, ] /** * De filters als losse variabele, want ze hangen op twee plekken in de * pagina: naast het raster op desktop en in een drawer op mobiel. Eén * definitie, twee plaatsingen — zo kan de mobiele lijst niet achterlopen op * de desktopversie. */ const filterPanel = ( {groupLabel("Filters")} {activeCount > 0 ? ( ) : null} {attributes.map((group) => { const values = (group.values || []) .slice() .sort((a, b) => Number(a.volgorde || 0) - Number(b.volgorde || 0)) const chosen = selected[group.code] || [] const isRow = group.display === "swatches" || group.display === "knoppen" const perValue = counts[group.code] || {} const control = (value) => { const active = chosen.includes(value.value) const count = perValue[String(value.value)] || 0 const disabled = count === 0 && !active // Uitgegrijsd = geen link, dus dan geen asChild: een // zonder href. Anders zou asChild een kind verwachten dat er // niet is. if (group.display === "swatches") { const swatch = { title: value.label + (count ? " (" + count + ")" : ""), "aria-label": value.label, display: "block", w: "30px", h: "30px", bg: value.color || "theme.bg.subtle", borderWidth: "2px", borderColor: active ? "theme.accent" : "theme.border", opacity: disabled ? 0.25 : 1, cursor: disabled ? "not-allowed" : "pointer", transition: "border-color 0.15s linear", _hover: disabled ? undefined : { borderColor: "theme.accent" }, } if (disabled) return return ( ) } if (group.display === "knoppen") { if (disabled) { return ( ) } return ( ) } const row = { align: "center", gap: 2, opacity: disabled ? 0.4 : 1, cursor: disabled ? "not-allowed" : "pointer", color: disabled ? "theme.fg.muted" : "theme.fg", _hover: disabled ? undefined : { color: "theme.accent" }, transition: "color 0.15s linear", } /* Eigen vinkje: een is een form-control en dit is een link. Zo blijft de rij één klikdoel. */ const inner = ( <> {value.label} {count ? ( {count} ) : null} ) if (disabled) return {inner} return ( {inner} ) } return ( {groupLabel(group.title)} {isRow ? ( {values.map((value) => ( {control(value)} ))} ) : ( {values.map((value) => ( {control(value)} ))} )} ) })} {groupLabel("Aanbieding")} Alleen afgeprijsd {/* Sorteren hoort in de drawer thuis: op mobiel staat de knoppenrij boven het raster te dringen. Op desktop is deze kopie verborgen, daar staat de rij naast het aantal resultaten. */} {groupLabel("Sorteren")} {SORTS.map((option) => ( ))} ) return ( <> Home Collecties {product_category.title} {product_category.title} {product_category.description ? ( ) : null} Naar de winkel {/* Filterkolom, twee plaatsingen: naast het raster op desktop, achter een knop in een drawer op mobiel — daar vreet een vaste kolom de halve pagina op. Omdat elke filterwaarde een link is, sluit de drawer vanzelf zodra je er een aanklikt. */} {filterPanel} Filters & sorteren {activeCount > 0 ? {activeCount} : null} } > {filterPanel} {/* Resultaten */} {pageCount > 1 ? data.first_on_page + "–" + data.last_on_page + " van " + matched : matched + (matched === 1 ? " product" : " producten")} {/* Sorteren als drie losse links: een

Verzending: Ophalen bij Maljaars

Niets gevonden