NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Afrekenen in twee kolommen Nieuw

Afrekenpagina van een webshop (koffiebranderij): stappenbalk, contact en bezorgadres links, een vaste ordersamenvatting rechts (position:sticky) met aantallen die je nog kunt wijzigen. Verzendkeuze als radiokaarten (standaard, avondlevering, ophalen), drempel voor gratis verzending met voortgangsbalk, btw-splitsing 9% en 21%, totaal loopt live mee. Bij verder gaan: foutsamenvatting met links naar de velden plus inline fouten (aria-invalid, aria-describedby). Mobiel: samenvatting inklapbaar bovenaan. Container queries met media-query-fallback.

  1. 1Winkelmand
  2. 2Gegevens en verzending
  3. 3Betalen
1Contact

2Bezorgadres

3Verzending
Terug naar winkelmand

Je bestelling

    Zo gebruik je het

    1. Plak de HTML op de plek waar het onderdeel moet komen.
    2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
    3. Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
    <!-- Afrekenen in twee kolommen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bck"><div class="bck__top"><p class="bck__logo">Het Anker<span>koffiebranderij · Haarlem</span></p><ol class="bck__steps"><li class="is-done"><span>1</span>Winkelmand</li><li aria-current="step"><span>2</span>Gegevens en verzending</li><li><span>3</span>Betalen</li></ol></div><div class="bck__grid"><button type="button" class="bck__stog" aria-expanded="false" aria-controls="bck-sum"><span>Toon bestelling</span><b class="bck__stot"></b></button><form class="bck__form" novalidate><div class="bck__errs" role="alert" tabindex="-1" hidden></div><fieldset class="bck__fs"><legend><span>1</span>Contact</legend><div class="bck__row"><div class="bck__f bck__f--w"><label for="bck-mail">E-mailadres</label><input id="bck-mail" type="email" autocomplete="email" required aria-describedby="bck-mail-e" value=""><p class="bck__e" id="bck-mail-e"></p></div><div class="bck__f bck__f--w"><label for="bck-tel">Telefoon <span>voor de bezorger, optioneel</span></label><input id="bck-tel" type="tel" autocomplete="tel" inputmode="tel"></div></div></fieldset><fieldset class="bck__fs"><legend><span>2</span>Bezorgadres</legend><div class="bck__row"><div class="bck__f bck__f--w"><label for="bck-naam">Voor- en achternaam</label><input id="bck-naam" autocomplete="name" required aria-describedby="bck-naam-e" value="Sem Bakker"><p class="bck__e" id="bck-naam-e"></p></div><div class="bck__f"><label for="bck-pc">Postcode</label><input id="bck-pc" autocomplete="postal-code" required aria-describedby="bck-pc-e" value="2011 TC" maxlength="7"><p class="bck__e" id="bck-pc-e"></p></div><div class="bck__f bck__f--s"><label for="bck-nr">Huisnr.</label><input id="bck-nr" inputmode="numeric" required aria-describedby="bck-nr-e" value=""><p class="bck__e" id="bck-nr-e"></p></div><div class="bck__f bck__f--w"><label for="bck-str">Straat</label><input id="bck-str" autocomplete="address-line1" required aria-describedby="bck-str-e" value="Kruisstraat"><p class="bck__e" id="bck-str-e"></p></div><div class="bck__f bck__f--w"><label for="bck-pl">Plaats</label><input id="bck-pl" autocomplete="address-level2" required aria-describedby="bck-pl-e" value="Haarlem"><p class="bck__e" id="bck-pl-e"></p></div></div></fieldset><fieldset class="bck__fs"><legend><span>3</span>Verzending</legend><div class="bck__ship"><label class="bck__opt"><input type="radio" name="bck-ship" value="std" checked><span class="bck__ot"><b>PostNL, standaard</b>Morgen in huis, als je voor 22:00 bestelt</span><span class="bck__op" data-p="std"></span></label><label class="bck__opt"><input type="radio" name="bck-ship" value="eve"><span class="bck__ot"><b>Avondlevering</b>Tussen 18:00 en 22:00</span><span class="bck__op">&euro;&nbsp;6,95</span></label><label class="bck__opt"><input type="radio" name="bck-ship" value="pick"><span class="bck__ot"><b>Ophalen in de branderij</b>Zijlstraat 41, morgen vanaf 10:00 klaar</span><span class="bck__op">gratis</span></label></div></fieldset><div class="bck__act"><a class="bck__back" href="#bck-sum">Terug naar winkelmand</a><button type="submit" class="bck__go">Verder naar betalen</button></div><p class="bck__ok" role="status" aria-live="polite"></p></form><div class="bck__side"><div class="bck__sum" id="bck-sum"><p class="bck__sh">Je bestelling</p><ul class="bck__items"></ul><div class="bck__free"><p class="bck__ft"></p><div class="bck__fb"><span></span></div></div><dl class="bck__tl"></dl></div></div></div></div>
</div>

    Meer uit paginasecties

    Iets gezien dat je mooi vindt?

    Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

    Neem contact op →