NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Afrekenen in twee kolommen New

Web shop checkout (coffee roaster): step bar, contact and delivery address on the left, a fixed order summary on the right (position:sticky) with editable quantities. Shipping as radio cards (standard, evening, pickup), free-shipping threshold with progress bar, VAT split 9% and 21%, live total. On continue: error summary linking to the fields plus inline errors (aria-invalid, aria-describedby). Mobile: collapsible summary on top. Container queries with media query fallback.

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

2Bezorgadres

3Verzending
Terug naar winkelmand

Je bestelling

    How to use it

    1. Paste the HTML where the page sections should appear.
    2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
    3. Add the JavaScript and call init() with the element that contains the HTML.
    <!-- 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>

    More page sections

    Seen something you like?

    Add it to your selection and send it over. We build your site around it, in your brand.

    Get in touch →