Die Xtensible Shopping Bag Komponente in Aktion

Geschrieben von: Christian Holm
Kategorie: Komponenten

This printed page brought to you by AlphaSierraPapa

Sie wollen Ihre Produkte über das Internet vertreiben, wissen aber nicht wie und vor allem welche Shop-Lösung Sie verwenden wollen? Warum keinen eigenen bauen? Vor allem, wenn fast alles an Funktionalität in der leicht konfigurierbaren Xtensible Shopping Bag Komponente von AlphaSierraPapa vorhanden ist - einer ASP Komponente, die kostenlos zum Download zur Verfügung steht.

Die Xtensible Shopping Bag Komponente in der aktuellen Version 1.0 bietet das Grundgerüst für einen virtuellen Einkaufswagen. Sie benötigen lediglich die Komponente und je nach Anzahl Ihrer Produkte MS Access oder einen "richtigen" Datenbankserver. Die Komponente können Sie hier bei AlphaSierraPapa kostenlos downloaden. Die Webseite der Komponente bietet auch einige Beispiele, mit denen Sie die Komponente sofort testen können - auch der heute vorgestellte Code ist zu großen Teilen von dort "abgeschaut".

Nach dem Download der Komponente und Extrahierung der Dateien aus dem Zip-Archiv muß nur noch die für die Komponente notwendige SoftwingXSB.dll Datei am Server mit regsrv32 registriert werden. Achtung: wer keine Visual Basic Runtime am Server installiert hat, muß sich das gesamte Setup downloaden!

Heute möchte ich Ihnen einen "under the hood" Einblick in die Benützung der Komponente geben, also wie der Client eine Produktauswahl treffen kann und wenn nötig die Bestellmenge ändern kann. Als Produktdatenbank dient die Northwind Datenbank, welche standardmäßig den Beispielen von MS Access oder dem MS SQL Server beiliegt.

Die Produkte werden mittels SQL Statement aus der Datenbank (hier Northwind) geholt. Nun müssen die rückgelieferten Daten in einer übersichtlichen Art dem Client präsentiert werden. Optisch nicht aufwendig, aber einfach und funktionell - und für diese Präsentation ausreichend - werden diese in einem HTML-Table verfrachtet:

Response.Write "<table cellpadding=""2"" cellspacing=""2"" border=""1"">"
For FieldIndex = 1 To objRS.Fields.Count - 1
   Response.Write "  <th>" & objRS.Fields(FieldIndex).Name &"</th> "
Next

While Not objRS.EOF 
   Response.Write "<tr><td><a href=""bag.asp?id=" & objRS(0) & """>"
   Response.Write Server.HtmlEncode(objRS(1)) & "</a></td>"

   For FieldIndex = 2 To objRS.Fields.Count - 1
       Response.Write "<td>" & objRS(FieldIndex) & "</td>"
   Next
   
   Response.Write "</tr>" & vbCrLf
   objRS.MoveNext
Wend

Response.Write "</table>"

Dieser Sourcecode generiert je nach Anzahl der vorhandenen Datenspalten einen passenden HTML Table. Der Primärschlüssel (hier im nullten Element des Recordsetobjektes objRS abgelegt) dient als Identifikation eines Produkts im Shopping Bag. Diese wird mittels eines Anchor-Tags der Datei bag.asp übergeben, die unseren Shopping Bag repräsentiert. Warum nur die ID übermittelt wird, dazu komme ich noch.

In einem Webbrowser könnte unser simpler Produktkatalog folgendermaßen aussehen:

Als nächstes folgt der wichtigste Teil - der Shopping Bag selbst. Hier werden die vom Client ausgewählten Produkte aufgelistet und gegebenenfalls in ihrer Menge verändert. Hier kommt dann auch die XSB Komponente zum Einsatz.

Das hier gezeigte Beispiel eines (einfachen) Shopping Bags enthält die wichtigsten Funktionen: Laden oder Erstellen des Bags, eine Möglichkeit weitere Waren dem Bag hinzuzufügen, und das Ändern der Menge. Da der Check-out, also der "Weg zur Kassa" nicht direkter Bestanteil des Bags ist, fehlt er hier.

Zuerst müssen wir überprüfen ob entweder bereits ein Sopping Bag existiert oder wir einen neuen anlegen müssen. Dies geschieht in einer separaten Funktion LoadXSB. Nach dem Erstellen des Shopping Bag Objektes mit Server.CreateObject sehen wir nach ob der Bag überhaupt Produkte enthält (Sessionvariable BagItems). Wenn bereits ein Bag existiert, dann wird dieser mit den enthaltenden Produkten mittels der LoadBag Methode der Komponente geladen.

Function LoadXSB()
    Set myBag = Server.CreateObject("SoftwingXSB.ShoppingBag")
    If Not IsEmpty(Session("BagItems")) Then
        myBag.LoadBag CStr(Session("BagItems"))
    Else
        myBag.InitBag
    End If
    Set LoadXSB = myBag
End Function

Falls noch kein Bag exisitiert wird ein neuer Bag mit der InitBag Methode erstellt. Wer sich jetzt frägt, wie die Komponente den Shopping Bag speichert, hier die Antwort: als XML. Damit erreicht man ein gute Skalierbarkeit des Webservers, weil kein Objekt im Session State gespeichert werden muß. Und man kann natürlich den Bag auch in eine Datenbank verfrachten (falls der Session-State dort abgelegt wird).

Als nächstes implementieren wir eine Funktion, um Produkte dem Bag hinzufügen zu können. Wir bekommen eine Produkt-Id übergeben - mit Hilfe einer Datenbankabfage sehen wir nach, ob das Produkt in der Datenbank auch tatsächlich vorhanden ist:

If "" = nProductId Or Not IsNumeric(nProductId) Then
        bValid = False
    Else
        Set objConn = Server.CreateObject("ADODB.Connection")
        objConn.Open "provider=sqloledb.1;user id=sa;password=;initial _
            catalog=Northwind;data source=BLUESCREEN"
        Set objRS = Server.CreateObject("ADODB.Recordset")
        Set objRS.ActiveConnection = objConn
        objRS.Open "SELECT ProductID, ProductName, QuantityPerUnit, UnitPrice FROM _
            Products WHERE ProductId=" & nProductId
        If objRS.EOF And objRS.BOF Then
            bValid = False
        Else
            avarProduct = objRS.GetRows()
        End If
        objConn.Close
        Set objRS = Nothing
        Set objConn = Nothing
    End If

Um die Resourcen, die von der Datenbankabfrage benötigt werden, schnell wieder freigeben zu können, holen wir uns die Produktdaten mit der GetRows Methode des Recordsetobjektes und weisen sie einem Array avarProduct zu. Danach können wir die Verbindung zur Datenbank wieder trennen und die benötigten Objektresourcen wieder freigeben. Falls dieser Schritt erfolgreich war, sehen wir nach ob das Produkt nicht schon im Bag vorhanden ist:

If Not myBag.IsProductInBag(nProductId) Then
    myBag.LineItems.AddLineItem avarProduct(0,0), Server.HtmlEncode(avarProduct(1,0)), _
    Server.HtmlEncode(avarProduct(2,0)), avarProduct(3,0), 1
End If

Mit der AddLineItem Methode der LineItems Collection fügen wir das neue Produkt, dessen Daten in dem Array namens avarProduct abgelegt sind, dem Bag hinzu. Damit es keine Probleme mit etwaigen Sonderzeichen (z.B. Umlaute) gibt, verwenden wir unter anderem für die Produktbezeichnung die HtmlEncode Methode.

Der nächste Schritt ist den Inhalt des Shopping Bags zum Client-Browser zu schicken. Hierfür übergeben wir der PrintBag Prozedur das Shopping Bag Objekt welches natürlich die vom Client ausgewählten Produkte enthält:

Sub PrintBag(myBag)
    Out "<FORM METHOD=""POST"" ACTION="""
    Out Request.ServerVariables("SCRIPT_NAME") & """>"
    Out "<TABLE><TR><TH>Units</TH><TH COLSPAN=2>"
    Out "Product</TH><TH>Unit Price</TH><TH>Price</TH>"
    Out "</TR>" & vbCrLf
    For Each item In myBag.LineItems
        Out "<TR><TD><input type=""TEXT"" name=""Qty"
        Out item.ProductId
        Out """ VALUE=""" & item.QuantityInBag & """ SIZE=""3"">" 
        Out "<TD>" & item.ProductName
        Out "</TD><TD>" & item.QuantityPerUnit & "</TD>"
        Out "<TD>" & FormatCurrency(item.PricePerUnit) & "</TD>"
        Out "<TD><B>" & FormatCurrency(item.Total) & "</B></TD>"
        Out "</TR>" & vbCRLF
    Next
    Out "<TR><TD COLSPAN=5><HR></TD></TR>"
    Out "<TR><TD COLSPAN=3></TD><TD><B>Total:</B></TD>"
    Out "<TD><B>" & FormatCurrency(myBag.Total) & "</B></TD></TR>" & vbCrLf
    Out "<TR><TD COLSPAN=5 ALIGN=""RIGHT"">"
    Out "<INPUT TYPE=SUBMIT NAME=""DO"" VALUE=""Continue Shopping"">&nbsp;"
    Out "<INPUT TYPE=SUBMIT NAME=""DO"" VALUE=""Recalculate"">&nbsp;"
    Out "<INPUT TYPE=SUBMIT NAME=""DO"" VALUE=""Check out"">"
    Out "</TD></TR></TABLE></FORM>"
End Sub

Die Ausgabe der einzelnen Posten erfolgt mit der LineItem Property der LineItems Collection. Mit einem For ... Each Statement wird durch die einzelnen Posten iteriert. Damit auch die Preise währungsmäßig richtig dargestellt werden, verwenden wir die FormatCurrency Function.

Pro Produkt wird ein Eingabefeld erzeugt, und dessen Name aus der Produkt-Id hergeleitet. Warum habe ich nur das Produkt-Id Feld in diesem Formular? Nun, einige unvorsichtige Shops tragen alle Felder (inklusive Preis) ein - was dazu führt, daß Hacker mit Hilfe von Frontpage ihnen genehme Preise eintragen können, was nicht im Sinne des Shopbetreibers ist. Deswegen machen wir es extra-sicher.

Da der Shopping Bag natürlich auch Control Elemente (hier Schaltflächen) enthalten soll, damit der Client weitere Produkte hinzufügen oder Änderungen vornehmen kann, sind die drei Buttons Continue Shopping, Recalculate und Check out (vorgesehen für die Implementierung der Zahlungsabwicklung) hier inkludiert.

Als letzter Punkt sei noch die RecalcBag Prozedur angeführt, die es dem Client ermöglicht die Menge eines zu bestellenden Produktes zu ändern. Auch dies ist nicht weiter schwierig:

For Each item in myBag.LineItems
    nQty = Trim(Request.Form("Qty" & item.ProductId))
    If "" <> nQty And IsNumeric(nQty) Then
        If nQty < 1 Then
            myBag.LineItems.Remove item.ProductId
        Else
            item.QuantityInBag = nQty
        End If
	End If
Next

Diese Prozedur aktualisiert den gesamten Shopping Bag. Für den Fall, daß Änderungen in der Menge gemacht wurden und diese sinnvollerweise auch numerisch eingetragen wurden, wird der neue Wert mit Hilfe der QuantityInBag Property des LineItem Objektes zugewiesen.

Tritt der Fall ein, daß der Client bei einer Mengenangabe 0 eingibt, so wird das jeweilige Produkt mit der Remove Methode der LineItems Collection aus dem Bag entfernt.

Schlußbemerkung

Dieser Artikel gab Ihnen einen Einblick in die Programmierung eines Shopping Bags mit der Xtensible Shopping Bag Komponente. Die offene Schnittstelle der Komponente und die einfache Programmierung ermöglichen einen schnellen Einsatz auf Ihrer Website.

This printed page brought to you by AlphaSierraPapa

Download des Codes

Klicken Sie hier, um den Download zu starten.
http://www.aspheute.com/code/20010406.zip

Links zu anderen Sites

AlphaSierraPapa
http://www.alphasierrapapa.com/
Download Xtensible Shopping Bag Komponente
http://www.alphasierrapapa.com/IisDev/Components/XSB/