Manuela Arcuri lähmt das Bruttosozialprodukt. (...) Nach einer Untersuchung des Instituts für Transdisziplinäre Studien sinkt die Produktivität eines Beschäftigten, der das führende Pin-up-Girl des Landes (Anm.: gemeint ist Italien) in seinen Computer geladen hat, auf 58 Prozent des Durchschnitts. – aus SPIEGEL Online¹ 

Kapitel 32 Warenkorb

Geld verdienen im Internet? Vor einigen Jahren waren die Experten noch der Meinung, das sei so sicher wie das Amen in der Kirche. Nach einiger Zeit stellten dieselben Experten fest, dass es dank des Internets zu vielen Angeboten ebenso viele kostenlose Alternativen gibt. Eine Zeit lang waren die Venture-Capital-Geber (zweck-)optimistisch, im Sommer 2001 jedoch war es mit dem Optimismus vorbei: Der Begriff »Dotcom-Pleite« tauchte jeden zweiten Tag in einschlägigen Newsdiensten auf, und die amerikanische neue Mode der »Pink-Slip-Parties«²  schwappte auch nach Deutschland über, wenngleich auch ohne nennenswerten Erfolg.

Eines der wenigen Dinge, die von der Konjunkturflaute unbeeindruckt blieben, war JavaScript. Und damit wäre auch die (arg konstruierte) Überleitung zum Thema dieses Kapitels geschafft. Ein Online-Shop sollte prinzipiell mit serverseitigen Mitteln erstellt werden. Sie haben dann die folgenden Vorteile:

Die Artikel können in einer Datenbank gehalten und damit bequem(er) gewartet werden.

Für bestimmte Aktionen wie etwa das endgültige Versenden der Bestellung benötigen Sie ohnehin serverseitige Mittel.

Ein JavaScript-Shop funktioniert bei deaktiviertem JavaScript natürlich nicht.

Bei einer serverseitigen Lösung haben Sie weniger Probleme mit JavaScript-Bugs oder -Unterschieden der Browser. Der zugrunde liegende Code Ihres Shops muss nur auf genau einem System laufen, Ihrem Webserver nämlich, und nicht auf allen Browsern.

Wir wollen in diesem Kapitel ein Konzept für die Erstellung eines einfachen Online-Shops vorstellen und auch implementieren. Dabei wollen wir auch unterschiedliche Ansätze vorstellen, die Informationen während des Einkaufs abzuspeichern.

Das Problem liegt auf der Hand: HTTP ist – wie bereits an einer anderen Stelle erwähnt – ein statusloses Protokoll; Daten, die auf einer Seite bekannt sind, können auf der nächsten Seite schon wieder unbekannt sein. Es gibt drei Hauptmöglichkeiten, wie sich Ihre Shop-Anwendung die Daten doch merken kann:

mit einem unsichtbaren Frame

mit Cookies

durch die Weitergabe der Daten in der URL

Wir werden für alle drei Möglichkeiten eine Lösung vorstellen. Der prinzipielle Ansatz in Sachen Variablen ist aber jedes Mal derselbe.

Es ist klar, dass an dieser Stelle weder die perfekte Lösung noch ein annähernd vollständiges System angeboten werden kann. Der hier vorgestellte Ansatz ist für Erweiterungen offen und kann in vielerlei Hinsicht ausgebaut werden. Aber: Der Ansatz funktioniert und ist damit eine geeignete Basis für Ihre eigenen Unternehmungen.

32.1 Datenstruktur 

Die einzelnen Artikel werden alle in JavaScript-Variablen abgespeichert. Dadurch lassen sich zwei Fliegen mit einer Klappe schlagen:

Die Artikelübersicht kann komplett mit JavaScript generiert werden.

Für die endgültige Bestellung samt Anzeige des Warenkorbs können dieselben Variablen verwendet werden.

Für die Speicherung der einzelnen Artikel in Variablen wird ein kleines Objekt erstellt:

function warenkorb_artikel(nr, name, kurz, lang,
                            grafik, preis) {
   this.nr = nr;
   this.name = name;
   this.kurz = kurz;
   this.lang = lang;
   this.grafik = grafik;
   this.preis = preis;
   this.anzahl = 0;
   return this;
}

Wie Sie sehen, wird ein neues Objekt erstellt, in dem die an den Konstruktor übergebenen Daten abgespeichert werden. Als Parameter erwartet die Funktion die folgenden Angaben:

nr: die Bestellnummer des Artikels

name: den Namen des Artikels

kurz: die Kurzbeschreibung des Artikels

lang: eine lange Beschreibung des Artikels für die ausführliche Produktdarstellung

grafik: die URL der zum Artikel gehörenden Grafik

preis: den Preis des Artikels (in €)

Innerhalb der Funktion wird noch eine weitere Eigenschaft festgelegt, nämlich die anzahl. Dort wird während des Einkaufs erfasst, wie viele Stück des Artikels vom Benutzer in den Warenkorb gelegt worden sind.

Ein Artikel wird dann wie folgt erstellt (nachfolgend einige historische Bücher von Rheinwerk Verlag, die alle nicht mehr erhältlich sind):

var buch_c1 = new warenkorb_artikel(
   "3–89842–149-X",
   "Wenz: JavaScript-Rezepte",
   "Christian Wenz: JavaScript-Rezepte. 2001 Rheinwerk Verlag, Bonn",
   "Christian Wenz: JavaScript-Rezepte. Rheinwerk Verlag, Bonn. 
      1. Auflage 2001. Lektorat: Judith Stevens-Lemoine. 
      Korrektorat: Friederike Daenecke. Einbandgestaltung: Barbara 
      Thoben.",
   "rezepte.png",
   35.74);
var buch_c2 = new warenkorb_artikel(
   "3–89842–132–5",
   "Wenz: JavaScript",
   "Christian Wenz: JavaScript – Browserübergreifende Lösungen. 
      2001 Rheinwerk Verlag, Bonn",
   "Christian Wenz: JavaScript – Browserübergreifende Lösungen.
      Rheinwerk Verlag, Bonn. 3. Auflage 2001. Lektorat: Judith
      Stevens-Lemoine. Korrektorat: Friederike Daenecke. 
      Einbandgestaltung: Barbara Thoben.",
   "javascript.png",
   40.85);
var buch_c3 = new warenkorb_artikel(
   "3–934358–29–2",
   "Williamson: Dynamic HTML browserübergreifend",
   "Heather Williamson: Dynamic HTML browserübergreifend. 
      2001 Rheinwerk Verlag, Bonn",
   "Heather Williamson: Dynamic HTML browserübergreifend. 
      Rheinwerk Verlag, Bonn. 1. Auflage 2001. Übersetzung: 
      Roman Impertro. Lektorat: Judith Stevens-Lemoine. Korrektorat: 
      Claudia Falk/Holger Schmidt. Einbandgestaltung: 
      Barbara Thoben.",
   "dhtml.png",
   35.74);
var buch_d1 = new warenkorb_artikel(
   "3–934358–05–5",
   "Wolter: Flash 4",
   "Sascha Wolter: Flash 4. 1999 Rheinwerk Verlag, Bonn",
   "Sascha Wolter: Flash 4, mit CD. Rheinwerk Verlag, Bonn. 1. Auflage 
      1999. Lektorat: Ruth Wasserscheid. Korrektorat: Marcus
      Pfitzenreuter. Einbandgestaltung: Helmut Kraus.",
   "flash.png",
   40.85);
var buch_d2 = new warenkorb_artikel(
   "3–89842-XXX-X",
   "Leske/Biedorf/Müller: Director 8 für Profis",
   "Christophe Leske/Thomas Biedorf/Regina Müller: Director 8
      für Profis. 2000 Rheinwerk Verlag, Bonn",
   "Christophe Leske/Thomas Biedorf/Regina Müller: Director 8
      für Profis. Rheinwerk Verlag, Bonn. 1. Auflage 2000. Lektorat: 
      Ruth Wasserscheid. Korrektorat: Sandra Gottmann/Marcus 
      Pfitzenreuter. Einbandgestaltung: Helmut Kraus.",
   "director.png",
   51.08);

Die Artikel können in verschiedene Kategorien unterteilt werden. Dazu wird zunächst ein weiterer Konstruktor in der Bibliothek warenkorb.js definiert:

function warenkorb_kategorie(name, artikel) {
   this.name = name;
   this.artikel = artikel;
   return this;
}

Die Eigenschaft name enthält die textuelle Beschreibung der Kategorie. In der Eigenschaft artikel werden die einzelnen Artikel als Array gespeichert.

var computing = new warenkorb_kategorie(
   "Galileo Computing",
   new Array(buch_c1, buch_c2, buch_c3));
var design = new warenkorb_kategorie(
   "Galileo Design",
   new Array(buch_d1, buch_d2));

Um einen schnellen und bequemen Zugriff zu gewährleisten, werden die einzelnen Kategorien in einem Array zusammengefasst:

var kategorie = new Array(computing, design);

Die Artikel sind nun in Variablen gespeichert, und wir können uns an die Umsetzung machen. Die einzelnen Dateien haben folgende Inhalte:

In der Datei warenkorb.js stehen alle nötigen Hilfsfunktionen.

Die Datei artikel.js muss von Ihnen angepasst werden; dort gehören alle Artikel hinein.

Die restliche JavaScript-Logik – die Anzeige von Artikel und Warenkorb – wird in den HTML-Dateien untergebracht, die wir im Folgenden entwickeln werden.