Mand HTML-sjablonen

Gebruik direct beschikbare winkelwagen-HTML-templates voor webshops

Een winkelwagen-HTML-template neemt het werk uit handen dat vaak wordt onderschat: bepalen welke elementen bestaan en hoe ze genest zijn. Productrijen, aantalvelden en verwijderlinks zijn al aanwezig in de markup. Het besteloverzicht en de checkout-knop hebben ook een eigen plek, zodat een webwinkeleigenaar direct kan beginnen met het toevoegen van echte producten.

Hoe productrijen zich herhalen

Het grootste deel van een winkelwagen is één kleine eenheid die steeds opnieuw wordt gedupliceerd. Een koper met één artikel en een koper met tien artikelen zien dezelfde rijstructuur, waardoor die ene rij belangrijker is dan een demo met twee voorbeeldproducten doet vermoeden. Prijs en aantal bevinden zich erin, terwijl het totaal bij de hele bestelling hoort en buiten de herhalende lijst staat.

Een goed opgebouwde rij houdt doorgaans deze onderdelen bij elkaar:

1. een productcontainer met de afbeelding, de titel en de gekozen variant;
2. een aantalveld waarvan de knoppen voor bijwerken en verwijderen bij precies dat artikel horen;
3. aparte plekken voor de stuksprijs en het regeltotaal, met ruimte voor een oude prijs.

Blokken buiten de artikellijst

Onder of naast de rijen bevinden zich de zones die de bestelling als geheel beschrijven. In een degelijk template is elk daarvan een eigen markup-sectie, makkelijk terug te vinden wanneer u het bestand later bewerkt.

Let buiten de herhalende lijst op deze blokken:

1. een besteloverzicht dat het subtotaal, eventuele kortings- of verzendregels en het eindtotaal verzamelt;
2. een checkout-zone die is ingericht als eigen formulier of actieblok, wat de bestelling een duidelijke doorgang naar betaling geeft;
3. een sectie voor een lege winkelwagen die de rijen vervangt door een kort bericht en een link terug naar de catalogus.

Een klein meldingsgebied voor berichten over uitverkochte artikelen is ook de moeite waard, aangezien het achteraf toevoegen betekent dat u nieuwe markup tussen bestaande blokken moet wringen.

Welke onderdelen al zijn gecodeerd

Nicepage ondersteunt e-commerce-websites voor HTML-uitvoer, en de winkelwagen maakt deel uit van die winkelfunctionaliteit. De officiële documentatie Winkelwagen voor E-Commerce legt uit hoe de winkelwagenfunctie van Nicepage werkt en waar deze in een e-commerce-project past.

Maak voordat u demo's vergelijkt een overzicht van wat uw winkel in een winkelwagen toont. Als klanten varianten kiezen en kortingen toepassen, heeft elk daarvan een bestaand gebied in de markup nodig. Een template waarin deze ontbreken, vereist meestal een herstructurering van elk regelitem nadat u de catalogus koppelt. Een demo lijkt misschien in het geheel niet op uw merk, maar kan toch de juiste basis zijn zolang de structuur aansluit op uw bestelgegevens. De checkout is een aparte stap, dus de winkelwagen hoeft alleen te eindigen met een blok dat de bestelling netjes overdraagt.