Klantproject · E-commerce

Bs Wash

Voor Bs Wash, dat in Giresun autowas- en verzorgingsmiddelen maakt, bouwden we een webwinkel voor detail- en groothandel met een beheerpaneel. De eigen producten staan overal voorop, professionele merken worden ernaast verkocht. De verzendkosten worden berekend op het totale aantal liters in de winkelmand, en elke 3.000 TL aan aankopen levert een draai aan het cadeaurad op. De pagina's worden als gewone HTML gegenereerd; prijswijzigingen staan meteen online, zonder nieuwe publicatie.

  • JavaScript (ES-modules)
  • Met Node.js vooraf gegenereerde HTML-pagina's
  • Netlify Functions en Netlify Blobs
  • iyzico
  • Sürat Kargo
  • MySoft e-factuur / e-archief
  • Resend / Brevo
  • Google Analytics 4, Search Console, Google Ads
  • WebAudio (geluiden van het rad)
  • End-to-endtests met Playwright
Startpagina van de winkel
Startpagina van de winkel
Producten
Bs Wash-producten en professionele merken
Betaling
Kaart (iyzico), bankoverschrijving
Verzending
Sürat Kargo, prijs op basis van liters
Cadeau
Eén draai aan het rad per 3.000 TL

De schermafbeeldingen zijn gemaakt van een lokale kopie van de site. Klantnamen, bestellingen, groothandelaren en cijfers in het paneel zijn voorbeeldgegevens; producten en prijzen komen uit de catalogus van de winkel.

01

Een winkel die de eigen producten voorop zet

Bs Wash-producten staan bovenaan elke lijst, andere professionele merken worden ernaast verkocht. Elke maat is in het paneel een apart product en verschijnt op de site op één kaart met maatknoppen.

  • Elke maat heeft eigen foto's en een eigen prijs; kies een maat en de kaart wordt dat product, op de productpagina linken de maten naar elkaar
  • Bs Wash-producten zonder foto krijgen automatisch een verpakkingstekening in de kleuren van het merk
  • Filters op categorie en merk, zoeken en sorteren
  • "Bel voor de prijs" bij producten zonder prijs
  • "Nu kopen": snel bestellen in één stap zonder account
  • Aftelklok voor verzending op dezelfde dag: wat op werkdagen vóór 14.00 uur en op zaterdag vóór 12.00 uur besteld is, gaat dezelfde dag weg
  • Een supportknop rechtsonder; op productpagina's zet hij de productnaam in het standaardbericht
  • Een interactieve Over ons-pagina: tellers, een tijdlijn en omdraaiende ISO-kaarten
Producten en filters
Producten en filters
Productpagina en maatkeuze
Productpagina en maatkeuze
Winkel op de telefoon
Winkel op de telefoon
02

Verzending per liter, betalen met kaart of overschrijving

De verzendkosten zitten niet in de prijzen: ze worden berekend op het totale aantal liters in de winkelmand en bij de bestelling opgeteld. De server rekent het bedrag altijd opnieuw uit.

  • De verzendregel wordt in het paneel ingesteld: een klein pakket tot 5 liter, een groot pakket per volle 20 liter, en voor de rest een klein of groot pakket volgens de regel
  • De winkelmand toont de verzendkosten en de berekening, plus een tip "nog X TL voor het cadeaurad" met een voortgangsbalk
  • Kaartbetaling via de betaalpagina van iyzico; bedrag, bestelnummer en resultaat worden bij iyzico gecontroleerd
  • Bankoverschrijving: bank, rekeninghouder en een kopieerbare IBAN, met het bestelnummer als omschrijving
  • Elke bestelling heeft een eigen pagina met geheime link: bewegende stappen met emoji, trackingnummer en koeriersgebeurtenissen
  • Mislukt de betaling, dan kan de klant op de bestelpagina opnieuw met de kaart betalen of overstappen op overschrijving
  • E-mails bij bestelling, betalingsbevestiging, verzending en levering
Winkelmand: verzending per liter en de tip voor het rad
Winkelmand: verzending per liter en de tip voor het rad
Bestelpagina en bestelstappen
Bestelpagina en bestelstappen
03

Cadeaurad

Bij bestellingen van particulieren levert elke 3.000 TL aan producten één draai op. De winkel kiest de cadeaus; de klant draait het rad op de eigen bestelpagina.

  • De draai komt vrij als de betaling bevestigd is: bij een kaart meteen via iyzico, bij een overschrijving zodra de winkel het geld heeft gezien
  • De server kiest het cadeau; dezelfde draai kan niet twee keer worden gebruikt
  • Het rad draait door te slepen of met de knop in het midden, met lichtjes, geluid en confetti bij de uitslag
  • Wordt er gedraaid voordat het pakket vertrekt, dan gaat het cadeau mee in dezelfde doos, anders met de volgende bestelling
  • Klanten met een ongebruikte draai krijgen een herinnering in de hoek van de site; het paneel toont de cadeaus met een markering "cadeau verstuurd"
Cadeaurad op de bestelpagina
Cadeaurad op de bestelpagina
04

Accounts voor klanten en groothandelaren

De site kent twee soorten inloggen: particuliere klanten en groothandelaren. Is een groothandelsaanvraag in het paneel goedgekeurd, dan ziet de groothandelaar zijn eigen kortingsprijzen op de site.

  • Inloggen en registreren op hetzelfde scherm; een 6-cijferige code per e-mail bij een vergeten wachtwoord
  • Mijn account: bestellingen, verzendstappen, trackingnummer, draaien aan het rad en opgeslagen afleveradres
  • Groothandelsaanvraag: bedrijf, belastinggegevens en maandelijkse behoefte
  • Een algemene korting voor de groothandelaar, een aparte korting op Bs Wash-producten en een minimaal bestelbedrag
  • Ingelogde groothandelaren zien alle prijzen met korting; de server berekent het bestelbedrag nog steeds zelf
Mijn account: bestellingen en verzendstappen
Mijn account: bestellingen en verzendstappen
Inloggen voor klanten en groothandelaren
Inloggen voor klanten en groothandelaren
Groothandelsaccount en kortingen
Groothandelsaccount en kortingen
05

Beheerpaneel

De winkel regelt alles vanuit één paneel. In het bestelscherm staan betalingsbevestiging, verzendmelding en e-factuur bij elkaar.

  • Overzicht: bestellingen die actie vragen, bestellingen van vandaag, omzet van de laatste 30 dagen, openstaande dealeraanvragen, producten zonder foto of prijs
  • Bestellingen: statusfilters en zoeken; in het detail "Betaling ontvangen, bevestigen", knoppen voor WhatsApp en bellen, en de bestellink versturen
  • Producten: elke maat op een eigen regel met familielabel, een fototeller, de hoofdfoto kiezen en foto's zoeken op de site van het merk
  • Banners, groothandelaren, klanten en rapporten op aparte tabbladen; rapporten uit Google Analytics, Search Console en Google Ads
  • Prijswijzigingen in het paneel staan meteen op de site; "Publiceren" genereert de pagina's opnieuw
Overzicht van het paneel
Overzicht van het paneel
Bestellingen
Bestellingen
Bestelling: betaling, verzending en e-factuur
Bestelling: betaling, verzending en e-factuur
Producten
Producten
06

Verzending, e-facturatie en andere koppelingen

De koppelingen draaien op de server; geheime sleutels worden één keer in het paneel ingevuld en nooit naar de browser teruggestuurd.

  • Sürat Kargo: zending aanmelden met "Naar Sürat sturen", status opvragen, en de bestelling gaat vanzelf naar "Verzonden" zodra het trackingnummer binnen is
  • MySoft e-factuur / e-archief: e-factuur als de koper daarvoor geregistreerd is, anders e-archief; factuur-pdf vanuit het paneel
  • Kaartbetaling via iyzico, bestelmails via Resend of Brevo
  • Verzendregel, cadeaurad, bankgegevens en de aankondigingsbalk worden in het paneel aangepast
  • Groothandelsaanvragen goedkeuren en hun kortingen instellen
Verzendinstelling: kosten per liter
Verzendinstelling: kosten per liter
Instelling van het cadeaurad
Instelling van het cadeaurad
Groothandelsaanvraag en kortingen
Groothandelsaanvraag en kortingen

Denkt u aan een vergelijkbaar project?

Vertel ons wat u nodig hebt; samen bepalen we scope, planning en kosten. Het eerste gesprek is gratis.

Vertel ons over uw project