Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 32 Warenkorb
  gp 32.1 Datenstruktur
  gp 32.2 Mit unsichtbaren Frames arbeiten
    gp 32.2.1 Warenkorb füllen
    gp 32.2.2 Artikel anzeigen
    gp 32.2.3 Warenkorb ändern
  gp 32.3 Mit Cookies arbeiten
    gp 32.3.1 Warenkorb füllen
    gp 32.3.2 Artikel anzeigen
    gp 32.3.3 Warenkorb ändern
  gp 32.4 Über die URL
    gp 32.4.1 Den Warenkorb füllen
    gp 32.4.2 Artikel anzeigen
    gp 32.4.3 Den Warenkorb ändern
  gp 32.5 Fazit

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:

gp  Die Artikel können in einer Datenbank gehalten und damit bequem(er) gewartet werden.
gp  Für bestimmte Aktionen wie etwa das endgültige Versenden der Bestellung benötigen Sie ohnehin serverseitige Mittel.
gp  Ein JavaScript-Shop funktioniert bei deaktiviertem JavaScript natürlich nicht.
gp  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:

gp  mit einem unsichtbaren Frame
gp  mit Cookies
gp  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.


Rheinwerk Computing

32.1 Datenstruktur  toptop

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

gp  Die Artikelübersicht kann komplett mit JavaScript generiert werden.
gp  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:

gp  nr: die Bestellnummer des Artikels
gp  name: den Namen des Artikels
gp  kurz: die Kurzbeschreibung des Artikels
gp  lang: eine lange Beschreibung des Artikels für die ausführliche Produktdarstellung
gp  grafik: die URL der zum Artikel gehörenden Grafik
gp  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 Galileo Press, 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 Galileo Press, Bonn",
   "Christian Wenz: JavaScript-Rezepte. Galileo Press, 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 Galileo Press, Bonn",
   "Christian Wenz: JavaScript – Browserübergreifende Lösungen.
      Galileo Press, 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 Galileo Press, Bonn",
   "Heather Williamson: Dynamic HTML browserübergreifend. 
      Galileo Press, 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 Galileo Press, Bonn",
   "Sascha Wolter: Flash 4, mit CD. Galileo Press, 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 Galileo Press, Bonn",
   "Christophe Leske/Thomas Biedorf/Regina Müller: Director 8
      für Profis. Galileo Press, 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:

gp  In der Datei warenkorb.js stehen alle nötigen Hilfsfunktionen.
gp  Die Datei artikel.js muss von Ihnen angepasst werden; dort gehören alle Artikel hinein.
gp  Die restliche JavaScript-Logik – die Anzeige von Artikel und Warenkorb – wird in den HTML-Dateien untergebracht, die wir im Folgenden entwickeln werden.
 <<   zurück
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript






 JavaScript


Zum Katalog: jQuery






 jQuery


Zum Katalog: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Katalog: Responsive Webdesign






 Responsive Webdesign


Zum Katalog: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Rheinwerk Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de