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:

Version: 1.0
Datum: 9.2.2001
Letzte Änderung: 9.2.2001

Beschreibung.

Warenkorb - KatalogDer 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.

Warenkorb - BestellseiteNicht 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.

Einbindung.

Bei der Einbindung sind einige Punkte zu beachten, die jedoch nicht zu schwierig sind. Aber nach und nach...

Katalog.

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

Parameter.

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!"

Bestellzettel.

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&ouml;schen" onClick="warenkorb_loeschen()">
<INPUT TYPE="HIDDEN" NAME="Warenkorb.Warenkorb">
<INPUT TYPE="HIDDEN" NAME="Warenkorb.Gesamtpreis">

Als globale Felder sind folgende Angaben möglich:

BezeichnungBedeutung
GesamtartikelAnzahl aller Artikel im Warenkorb.
GesamtMwStSumme der Mehrwertsteuerbeträge.
GesamtpreisSumme aller Preise der gewählten Artikel.
WarenkorbDer 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.

Katalogseite.

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:

BezeichnungBedeutung
MengeAnzahl des jeweiligen Artikels.
ArtikelNrArtikelnummer.
BezeichnungBezeichnung des Artikels.
PreisEinzelpreis des Artikels.
MwStMehrwertsteuersatz (in Prozent).
GesamtpreisProdukt aus Preis und Menge.

Prüfseite.

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.

1. Seite/JavaScript-Aktivierung und Cookie setzen.

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.

Dokumentkopf.

<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>

Dokumentkörper.

<NOSCRIPT>
<P><STRONG>Bitte erst JavaScript aktivieren!</STRONG></P>
</NOSCRIPT>

2. Seite/Cookie und JavaScript-Version prüfen.

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.

Dokumentkopf.

<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>

Dokumentkörper.

<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>

Und sonst?