Kurzbeschreibung: Ein kleiner Warenkorb mit allen Funktionen, die für den Betrieb benötigt werden. Der Warenkorb benötigt - als JavaScript-Anwendung - mindestens JavaScript 1.2 und basiert auf der Cookie-Technologie. Versionsinformation:
|
Der Warenkorb ist eine Anwendung, die sich Artikel und deren gewünschte Anzahl merkt und somit den Aufbau eines Shops ermöglicht. Die Artikel werden quasi in einem virtuellen Warenkorb gesammelt. Mit dieser Artikelsammlung kann man zu einer virtuellen Kasse gehen. Diese Informationen für diese Kasse werden ebenso zur Verfügung gestellt, jedoch nicht dazugehörige Abrechnungsfunktionen.
Die Felder für den Katalog können nahezu beliebig gewählt werden, nur die Felder für die Mengenangabe sind als Eingabefelder wichtig. Die Seite wird automatisch nach relevanten Feldern untersucht und mit Inhalten gefüllt. Die relevanten Felder werden hierbei an einem einheitlichen Präfix im Namen erkannt.
Eine Übergabe von Parametern von einer Seite zu nächsten muss nicht erfolgen, da die Werte in Cookies gespeichert werden. So kann flexibel zwischen den Seiten hin und her gesprungen werden. Dies öffnet auch der Gestaltung ausreichend Möglichkeiten. Sogar zu einer anderen URL kann gewechselt werden, allerdings nur innerhalb einer Stunde. Solange bleiben die Daten erhalten.
Nicht verschweigen sollte man allerdings, dass eine Maximalzahl von gut 50 Artikel die Obergrenze für diesen Warenkorb darstellt. Artikelnamen und Preise sind in einer zentralen Datei hinterlegt. Diese sollte nicht zu groß werden, um die Ladezeiten nicht unnötig in die Länge zu ziehen.
Ebenso sollte nicht unerwähnt bleiben, dass die eigentliche Zahlungsseite (oder Kasse) und sogar die Eingabe der persönlichen Daten auf einem Server liegen sollte, die die Daten verschlüsselt.
Als Alternative zu diesem Warenkorb besteht ein einseitiger Bestellzettel. Vielleicht lohnt sich ja auch da mal ein Blick.
Bei der Einbindung sind einige Punkte zu beachten, die jedoch nicht zu schwierig sind. Aber nach und nach...
Der Katalog in der Datei produkte.js ist der zentrale Datenbestand. Für jedes Produkt ist ein Datensatz erforderlich. Er besteht aus der Artikelnummer, dem Namen, dem Preis und dem Mehrwertsteuersatz.
// Warenkorb // ========= // Produktliste: Produkt("4711", "Blaue Blument\xF6pfe", 3.80, 16) Produkt("4712", "Rote Blument\xF6pfe", 3.50, 16) Produkt("4713", "Gelbe Blument\xF6pfe", 4.05, 16) Produkt("4714", "Gr\xFCne Blument\xF6pfe", 3.95, 16) Produkt("4715", "Wei\xDFe Blument\xF6pfe", 0.95, 16) Produkt("4716", "Schwarze Blument\xF6pfe", 4.00, 16) Produkt("4717X", "Gro\xDFe Blument\xF6pfe", 9.95, 16) Produkt("4717S", "Kleine Blument\xF6pfe", 0.05, 7) Produkt("Sonderangebot", "Violette Blument\xF6pfe", 1.98, 16) // EOF
Die Parameter sind Bestandteil der Datei warenkorb.js und bedürfen normalerweise keiner Änderung. Am wahrscheinlichsten ist eine Änderung der Darstellung der Tabelle für die Kasse. Alle notwendigen Parameter sind in einem Block zusammengefasst.
// --- Parameter --- var cookie_warenkorb = "Warenkorb" // Name des Cookies fuer die Artikel var separator_ware = ";" // Trenner zwischen zwei Artikel beim Cookie var separator_daten = "/" // Trenner zwischen Artikelnummer und Anzahl beim Cookie var separator_feld = "." // Trenner fuer die Feldname var field_prefix = "Warenkorb" // Gemeinsamer Praefix fuer alle Feldnamen var titel_artikel_nr = "Artikelnr." // Titel der Artikelnummer bei Warenkorbliste var titel_bezeichnung = "Bezeichnung" // Titel der Bezeichnung bei Warenkorbliste var titel_preis = "Preis" // Titel des Preises bei Warenkorbliste var titel_gesamtpreis = "Gesamtpreis" // Titel des Gesamtpreises bei Warenkorbliste var titel_mwst = "MwSt." // Titel des Mehrwertsteuerprozentsatzes bei Warenkorbliste var titel_menge = "Menge" // Titel der Menge bei Warenkorbliste // Attribute fuer die Kassen-Tabelle var kasse_attribute_tabelle = "BORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"2\"" // Attribute fuer die Titelzeile der Kassen-Tabelle var kasse_attribute_titel = "ALIGN=\"CENTER\" VALIGN=\"MIDDLE\" BGCOLOR=\"#DDDDDD\"" var kasse_attribute_titel_menge = "" var kasse_attribute_titel_artikel_nr = "" var kasse_attribute_titel_bezeichnung = "" var kasse_attribute_titel_preis = "" var kasse_attribute_titel_mwst = "" var kasse_attribute_titel_gesamtpreis = "" // Attribute fuer die Artikelzeile der Kassen-Tabelle var kasse_attribute_zeile = "ALIGN=\"LEFT\" VALIGN=\"MIDDLE\"" var kasse_attribute_zeile_menge = "" var kasse_attribute_eingabe_menge = "SIZE=\"8\" MAXLENGTH=\"12\"" var kasse_attribute_zeile_artikel_nr = "" var kasse_attribute_zeile_bezeichnung = "" var kasse_attribute_zeile_preis = "ALIGN=\"RIGHT\"" var kasse_attribute_zeile_mwst = "ALIGN=\"RIGHT\"" var kasse_attribute_zeile_gesamtpreis = "ALIGN=\"RIGHT\"" var kasse_attribute_eingabe_gesamtpreis = "SIZE=\"8\" READONLY onChange=\"warenkorb_readonly(this)\"" // Attribute fuer die Meldungszeile der Kassen-Tabelle (bei keinem Artikel) var kasse_attribute_meldung = "ALIGN=\"CENTER\" VALIGN=\"TOP\" BGCOLOR=\"#FF6666\"" // Meldungstext, falls keine Artikel vorhanden sind var kasse_keine_artikel = "Keine Artikel im Warenkorb!"
Jede Datei, die Funktionen des Warenkorbs nutzt, muss zwei JavaScript-Dateien importieren: Die Funktionen warenkorb.js und die Produkte produkte.js.
<SCRIPT LANGUAGE="JavaScript1.2" SRC="warenkorb.js"> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="produkte.js"> </SCRIPT>
Damit der Automatismus auch funktioniert, muss je eine Funktion beim Laden und eine beim Entladen des jeweiligen Dokuments aufgerufen werden.
<BODY ... onLoad="warenkorb_onload()" onUnload="warenkorb_onunload()">
Anzumerken ist, dass die gerade genannten Vorkehrungen bei jeder Seite zu treffen sind, die Funktionen des Warenkorbs nutzen.
Jetzt zur Seite selbst. Da es sich um die Kasse handeln soll, müssen alle im Warenkorb befindlichen Artikel dargestellt werden. Dies geschieht durch den folgenden Aufruf.
<SCRIPT LANGUAGE="JavaScript1.2"> <!-- warenkorb_kasse() //--> </SCRIPT>
Die für die Seite gewünschten Felder sind nach dem folgenden Muster einzufügen. Als zentral zur Verfügung stehende Funktion kann warenkorb_aktualisieren()
genutzt werden, um nicht nur den Warenkorb selbst, sondern auch alle Felder des Warenkorbs zu aktualisieren. Soll die Möglichkeit bestehen, den Warenkorb oder besser den Inhalt zu löschen, kann die Funktion warenkorb_loeschen()
genutzt werden.
<INPUT TYPE="TEXT" ... READONLY NAME="Warenkorb.Gesamtartikel" onChange="warenkorb_aktualisieren()"> <INPUT TYPE="TEXT" ... READONLY NAME="Warenkorb.GesamtMwSt" onChange="warenkorb_aktualisieren()"> <INPUT TYPE="TEXT" ... READONLY NAME="Warenkorb.Gesamtpreis" onChange="warenkorb_aktualisieren()"> <INPUT TYPE="BUTTON" VALUE="Warenkorb löschen" onClick="warenkorb_loeschen()"> <INPUT TYPE="HIDDEN" NAME="Warenkorb.Warenkorb"> <INPUT TYPE="HIDDEN" NAME="Warenkorb.Gesamtpreis">
Als globale Felder sind folgende Angaben möglich:
Bezeichnung | Bedeutung |
---|---|
Gesamtartikel | Anzahl aller Artikel im Warenkorb. |
GesamtMwSt | Summe der Mehrwertsteuerbeträge. |
Gesamtpreis | Summe aller Preise der gewählten Artikel. |
Warenkorb | Der gesamte Warenkorb in textlicher Darstellung mit allen gewählten Artikeln. |
Es ist darauf zu achten, dass alle Felder des Warenkorbs den einheitlichen Präfix Warenkorb.
haben müssen.
Analog zur vorigen dargestellten Seite sind die beiden Skripte einzubinden und die beiden Funktionsaufrufe zu implementieren. Dazu kommen die Felder. Die Felder eines Artikels setzen sich aus dem einheitlichen Präfix, der Artikelnummer und der eigentlichen Feldbezeichnung zusammen, jeweils durch einen Punkt getrennt.
<INPUT TYPE="TEXT" ... NAME="Warenkorb.4711.Menge" onChange="checkInt(this); warenkorb_aktualisieren()"> <INPUT TYPE="TEXT" ... NAME="Warenkorb.4711.ArtikelNr" READONLY onChange="warenkorb_readonly(this)"> <INPUT TYPE="TEXT" ... NAME="Warenkorb.4711.Bezeichnung" READONLY onChange="warenkorb_readonly(this)"> <INPUT TYPE="TEXT" ... NAME="Warenkorb.4711.Preis" READONLY onChange="warenkorb_readonly(this)"> <INPUT TYPE="TEXT" ... NAME="Warenkorb.4711.MwSt" READONLY onChange="warenkorb_readonly(this)"> <INPUT TYPE="TEXT" ... NAME="Warenkorb.4711.Gesamtpreis" READONLY onChange="warenkorb_readonly(this)">
Gültige Feldbezeichner sind die folgenden:
Bezeichnung | Bedeutung |
---|---|
Menge | Anzahl des jeweiligen Artikels. |
ArtikelNr | Artikelnummer. |
Bezeichnung | Bezeichnung des Artikels. |
Preis | Einzelpreis des Artikels. |
MwSt | Mehrwertsteuersatz (in Prozent). |
Gesamtpreis | Produkt aus Preis und Menge. |
Die Funktionen des Warenkorbs sind somit vorgestellt. Letztendlich ist noch eine Prüfung erforderlich, ob JavaScript aktiviert ist und ob Cookies erlaubt sind. Insgesamt sind dafür 2 Vorschaltseiten erforderlich.
Die erste Seite prüft, ob JavaScript aktiviert ist. Außerdem wird ein Cookie gesetzt, um zu prüfen, ob dieser auf der Folgeseite gelesen werden kann.
<SCRIPT LANGUAGE="JavaScript"> <!-- var ablauf_datum = new Date() ablauf_datum.setTime(ablauf_datum.getTime() + 1000 * 60 * 5) document.cookie = "WarenkorbCookieCheck=" + escape("x") + "; expires=" + ablauf_datum.toGMTString() location.href = "index2.html" //--> </SCRIPT>
<NOSCRIPT> <P><STRONG>Bitte erst JavaScript aktivieren!</STRONG></P> </NOSCRIPT>
Auf der zweiten Seite wird der Cookie der ersten Seite gelesen und geprüft. Ist er vorhanden, sind Cookies nutzbar. Ferner wird eine Variable entsprechend der JavaScript-Version gesetzt. Enthält sie letztendlich den richtigen Wert, liegt ein Browser mit mindestens JavaScript 1.2 vor. Die Seite stellt die Katalogeingangsseite dar.
<SCRIPT LANGUAGE="JavaScript"> <!-- var korrekte_version = false function getCookie() { var cookie_array = document.cookie.split(";") var cookie_teile var i for(i = 0; i < cookie_array.length; i++) { cookie_teile = cookie_array[i].split("=") if(cookie_teile[0].substring(0, 1) == " ") cookie_teile[0] = cookie_teile[0].substring(1, cookie_teile[0].length) if(cookie_teile[0] == "WarenkorbCookieCheck") return unescape(cookie_teile[1]) } return "" } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2"> <!-- var korrekte_version = true //--> </SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2"> <!-- var check_cookie = getCookie() with(document) { open("text/html") writeln("<P>Die korrekte JavaScript-Version liegt " + (korrekte_version ? "" : "<STRONG>nicht</STRONG>") + " vor.</P>") writeln("<P>Cookies sind " + ((check_cookie == "x") ? "" : "<STRONG>nicht</STRONG>") + " aktiviert.</P>") if(korrekte_version && (check_cookie == "x")) writeln("<P><BIG>Zum <A HREF=\"katalog1.html\">Katalog</A>.</BIG></P>") close() } //--> </SCRIPT>