
Aufbau eines Warenkorbs II: der Test-Shop
Nachdem die Funktionsweise des Warenkorbs klar ist, soll dieser jetzt mal in einem
kleinen Test-Shop integriert werden. Der Shop ist dabei zum besseren Verständnis
auf die wichtigsten Funktionen reduziert. Diese sind im einzelnen:
- Artikel listen
- Artikel in den Warenkorb legen
- Warenkorb löschen
- Artikel aus dem Warenkorb entfernen
- Warenkorb anzeigen
Diese Prozesse/Events werden jeweils durch einen eigenen Eventhandler (CF-Datei) abgebildet die
dann die Logik der jeweiligen Funktion umsetzen und die nötigen Tagaufrufe beinhalten:
- Artikel listen = listArticle.cfm
- Artikel in den Warenkorb legen = addItem.cfm
- Warenkorb löschen = clearCard.cfm
- Artikel aus dem Warenkorb entfernen = removeItem.cfm
- Warenkorb anzeigen = showCard.cfm
Application.cfm
Der Shop benötigt eine Application.cfm in der das Client-Managment eingestellt ist
(der Warenkorb arbeitet mit Client-Variablen!). Zusätzlich muss der DSN mit einer Request-Variable definiert werden:
<cfapplication name="Shop" SETCLIENTCOOKIES="yes" CLIENTMANAGEMENT="yes" clientstorage="CV">
<cfset REQUEST.sDSN="ShoppingCard"><!--- der DSN zur Artikel-DB --->
Der Code der Eventhandler besteht im Prinzip fast nur aus Aufrufen der Shoppingcard-Funktionen
und der Anzeige der Ergebnisse:
Artikel listen
<!--- Anzahl der Artikel im Warenkorb ermitteln --->
<cfmodule name="Shop.shoppingCard.getRecordcount" r_sReturn="iRecordcount">
<!--- alle Artikel fuer den Shop auslesen (sollte normalerweise in ne Shopklasse ausgelagert werden)--->
<cfquery name="qShop" datasource="#REQUEST.sDSN#" cachedwithin="#CreateTimeSpan(0,1,0,0)#">
select pkAID as AID, sTitle, sCategory, iPrice from TArticle
</cfquery>
<!----------------------------------------------------------------------->
<body>
<cfoutput>
#iRecordcount# Artikel im <a href="showCard.cfm?#getTickCount()#">Warenkorb!</a>
</cfoutput>
<form name="f">
<table border="1"´>
<tr>
<td>Kategorie</td>
<td>Artikel</td>
<td>Preis</td>
<td> </td>
</tr>
<!--- Artikel ausgeben --->
<cfoutput query="qShop">
<tr>
<td>#HTMLEditFormat(qShop.sCategory)#</td>
<td>#HTMLEditFormat(qShop.sTitle)#</td>
<td>#LSCurrencyFormat(qShop.iPrice,"none")# DM</td>
<td nowrap>
<!--- Eingabe der gewuenschten Anzahl --->
<input type="Text" onfocus="this.select()" size="1" value="1" name="AID#qShop.AID#">
<!--- Button zum ablegen --->
<input type="Button" value="einpacken"
onClick='self.location.replace("addItem.cfm?AID=#qShop.AID#&iCount="+document.f.AID#qShop.AID#.value)'>
</td>
</tr>
</cfoutput>
</table>
</form>
</body>
Hier werden alle Artikel des Shops als Liste ausgegeben und zusätzlich zu jedem Artikel ein Inputelement für die Anzahl
und ein Button zum Anstossen des Einlegens in den Warenkorb erzeugt. Der Name des Inputelements wird dyn. aus der Artikel-ID gebildet, so dass
wir im onClick-Event des Buttons mit:
document.f.AID#qShop.AID#.value
auf den Wert im Inputelements zugreifen können und dann den Eventhandler zum Füllen des Warenkorbs aufrufen können:
onClick='self.location.replace("addItem.cfm?AID=#qShop.AID#&iCount="+document.f.AID#qShop.AID#.value)'
Dabei muss nur die Artikel-ID und die Anzahl übergeben werden und addItem.cfm wird die Auswahl dann im Warenkorb ablegen.
Artikel in den Warenkorb legen
Wird die Datei addItem.cfm mit einer Artikel-ID und einer Anzahl aufgerufen werden dieser Werte einfach an die Klasse ShoppingCard
weitergereicht, die die Daten dann in den Warenkorb ablegt:
<!--- Aufrufinterface definieren --->
<CFIF CGI.REQUEST_METHOD eq "GET">
<cfparam name="URL.AID" type="numeric">
<cfparam name="URL.iCount" type="numeric">
<cfelse>
<cfabort>
</cfif>
<cfmodule name="Shop.shoppingCard.add" iCount="#URL.iCount#" AID="#URL.AID#">
<!--- zurueck zum Shop --->
<cflocation url="listArticle.cfm?#getTickCount()#" addtoken="No">
Warenkorb löschen
Um den Warenkorb zu löschen muss im Shop die Datei clearCard.cfm aufgerufen werden:
<!--- Warenkorb löschen --->
<cfmodule name="Shop.shoppingCard.clear">
<!--- zurueck zum Shop --->
<cflocation url="listArticle.cfm?#getTickCount()#" addtoken="No">
Diese löscht beim Aufruf dann den Warenkorb und leitet zum Shop zurück.
Artikel aus dem Warenkorb entfernen
Ein Löschen eines einzelnen Artikels wird über die Datei removeItem.cfm erledigt. Dieser muss die Artikel-ID des zu
löschenden Artikels übergeben werden:
lt;!--- Aufrufinterface definieren--->
<CFIF CGI.REQUEST_METHOD eq "GET">
<cfparam name="URL.AID" type="numeric">
<cfelse>
<cfabort>
</cfif>
<!--- Artikel loeschen --->
<cfmodule name="Shop.shoppingCard.remove" AID="#URL.AID#">
<!--- zurueck zur Warenkorbansicht --->
<cflocation url="showCard.cfm?#getTickCount()#" addtoken="No">
Warenkorb anzeigen
Die Ansicht des Warenkorbs wird durch Aufruf des Eventhandlers/Datei showCard.cfm gestartet.
<!--- Warenkorbdaten holen --->
<cfmodule name="Shop.shoppingCard.getQuery" r_sQuery="qCard">
<body>
<!--- Warenkorb anzeigen --->
<b>Inhalt Warenkorb:</b>
<table border="1">
<tr>
<td>Kategorie</td>
<td>Artikel</td>
<td>Preis</td>
<td>Anzahl</td>
<td>Gesamtpreis</td>
<td> </td>
</tr>
<cfoutput query="qCard">
<tr>
<td>#HTMLEditFormat(qCard.sCategory)#</td>
<td>#HTMLEditFormat(qCard.sTitle)#</td>
<td>#LSCurrencyFormat(qCard.iPrice,"none")# DM</td>
<td>#qCard.iCount#</td>
<td>#LSCurrencyFormat(qCard.iSum,"none")# DM</td>
<td><a href="removeItem.cfm?AID=#qCard.AID#getTickCount()# ">entfernen</a></td>
</tr>
</cfoutput>
</table>
<!--- noch Links zum loeschen und Shopeinsprung anbieten --->
<cfoutput>
<a href="clearCard.cfm?#getTickCount()#">Warenkorb löschen</a>|
<a href="listArticle.cfm?#getTickCount()#">zurück zum Shop</a>
</cfoutput>
</body>
Download DB+Dateien
steffen goldfuss steffen@goldfuss.de - 10.07.2001