Korb HTML-Vorlagen

Nutzen Sie vorgefertigte Warenkorb-HTML-Templates für Online-Shop-Warenkörbe

Ein Warenkorb-HTML-Template übernimmt die Arbeit im Warenkorb, die oft unterschätzt wird: festzulegen, welche Elemente existieren und wie sie ineinander verschachtelt sind. Produktzeilen, Mengenfelder und Entfernen-Links sind im Markup bereits vorhanden. Auch die Bestellübersicht und der Checkout-Button haben ihren festen Platz, sodass Shopbetreiber direkt mit dem Hinzufügen echter Produkte beginnen können.

Wie sich Produktzeilen wiederholen

Der größte Teil eines Warenkorbs besteht aus einer kleinen Einheit, die sich immer wieder wiederholt. Ein Kunde mit einem einzelnen Artikel und ein Kunde mit zehn Artikeln sehen dieselbe Zeilenstruktur. Daher ist diese eine Zeile wichtiger, als es eine Demo mit zwei Beispielprodukten vermuten lässt. Preis und Menge befinden sich darin, während die Gesamtsumme zur gesamten Bestellung gehört und außerhalb der sich wiederholenden Liste steht.

Eine gut aufgebaute Zeile hält üblicherweise diese Bestandteile zusammen:

1. einen Produkt-Container, der das Bild, den Titel und die gewählte Variante enthält;
2. ein Mengenfeld, dessen Aktualisierungs- und Entfernen-Steuerelemente genau zu diesem Artikel gehören;
3. separate Bereiche für den Einzelpreis und die Zeilenzwischensumme mit Platz für einen Streichpreis.

Blöcke außerhalb der Artikelliste

Unterhalb oder neben den Zeilen befinden sich die Bereiche, die die Bestellung als Ganzes beschreiben. In einem soliden Template ist jeder davon ein eigener Markup-Abschnitt, der sich später bei der Bearbeitung der Datei leicht auffinden lässt.

Achten Sie außerhalb der sich wiederholenden Liste auf folgende Blöcke:

1. eine Bestellübersicht, die die Zwischensumme, eventuelle Rabatt- oder Versandzeilen und den Endbetrag zusammenfasst;
2. einen Checkout-Bereich, der als eigenes Formular oder eigener Aktionsblock eingerichtet ist und der Bestellung einen definierten Übergang zur Zahlung bietet;
3. einen Bereich für den leeren Warenkorb, der die Zeilen durch eine kurze Nachricht und einen Link zurück zum Katalog ersetzt.

Ein kleiner Hinweisbereich für Meldungen über vergriffene Artikel ist ebenfalls sinnvoll, da das spätere Hinzufügen bedeutet, neues Markup zwischen bestehende Blöcke quetschen zu müssen.

Welche Teile bereits programmiert sind

Nicepage unterstützt E-Commerce-Websites bei der HTML-Ausgabe, und der Warenkorb ist Teil dieser Shop-Funktionalität. Die offizielle Dokumentation Warenkorb für E-Commerce erklärt, wie die Warenkorb-Funktion von Nicepage funktioniert und wo sie sich in ein E-Commerce-Projekt einfügt.

Erstellen Sie vor dem Vergleichen von Demos eine Liste dessen, was Ihr Shop im Warenkorb anzeigt. Wenn Kunden Varianten auswählen und Rabatte anwenden, benötigt jede dieser Optionen einen vorhandenen Bereich im Markup. Fehlen diese in einem Template, muss meist jede Position neu strukturiert werden, nachdem der Katalog angebunden wurde. Eine Demo sieht Ihrer Marke vielleicht überhaupt nicht ähnlich, kann aber dennoch die richtige Basis sein, solange ihre Struktur zu Ihren Bestelldaten passt. Der Checkout ist ein separater Schritt, daher muss der Warenkorb lediglich mit einem Block abschließen, der die Bestellung sauber übergibt.