"use client" import { useState } from "react" import { Box, Button, Drawer, HStack, Portal, Spinner, Stack, Text } from "@chakra-ui/react" import NextLink from "next/link" import { Icon } from "@obelisk/blocks" import { useBasket, useBasketCount } from "@app/webshop" /** * Winkelmandje voor de header: een knop met het aantal, en de inhoud in een * drawer. * * Het mandje komt uit de gedeelde webshop-context, niet uit een eigen fetch. * Legt de bezoeker elders op de pagina iets in z'n mandje, dan telt de badge * meteen op en staat het hier goed — zonder herladen. * * De badge leest apart `useBasketCount()`: die hoeft niet te her-renderen als * alleen een prijs verandert. * * Alleen-lezen. Aantallen wijzigen en verwijderen doe je op de volledige * mandje-pagina (); een drawer is te klein voor bewerken, en de * bezoeker die dat wil is toch op weg naar het mandje. */ export default function BasketDrawer({ label = "Winkelmandje", basketUrl = "/winkelmandje/", checkoutUrl = "/checkout/", shopUrl = "/collecties/", placement = "end", }) { const [open, setOpen] = useState(false) const basket = useBasket() const count = useBasketCount() const money = (value) => { try { return new Intl.NumberFormat("nl-NL", { style: "currency", currency: basket.currency || "EUR", }).format(Number(value) || 0) } catch (error) { return "€ " + (Number(value) || 0).toFixed(2) } } /** De inhoud van de drawer: laden, mislukt, leeg, of het mandje zelf. */ function body() { if (basket.loading) { return ( ) } // Een mislukte fetch blijft hier staan i.p.v. als toast: de drawer heeft // dan niets anders te tonen, en een melding die wegvalt zou een lege doos // achterlaten. if (basket.failed) { return ( Je winkelmandje kon niet geladen worden. ) } if (!count) { return ( Je winkelmandje is leeg. ) } return ( {basket.items.map((item) => ( {item.title} {item.variant_label || item.variant ? ( {item.variant_label || item.variant} ) : null} {item.quantity} × {money(item.unit_price)} {money(item.line_total)} ))} Subtotaal {money(basket.subtotal)} {Number(basket.discount_total) > 0 ? ( Korting −{money(basket.discount_total)} ) : null} {Number(basket.shipping_total) > 0 ? ( Verzendkosten {money(basket.shipping_total)} ) : null} Totaal {money(basket.total)} ) } return ( setOpen(event.open)} placement={placement} size="sm" > {count > 0 ? ( // De badge hangt over de rand van de knop; aria-hidden omdat het // aantal al in het aria-label van de knop zit. ) : null} {label} {body()} ) }

Les

Praktisch

Meedoen?