Artikel - Detailansicht

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 Code der Eventhandler besteht im Prinzip fast nur aus Aufrufen der Shoppingcard-Funktionen und der Anzeige der Ergebnisse:

Artikel listen


<cfmodule name="Shop.shoppingCard.getRecordcount" r_sReturn="iRecordcount">


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

<cfoutput query="qShop">
   <tr>
    <td>#HTMLEditFormat(qShop.sCategory)#</td>
    <td>#HTMLEditFormat(qShop.sTitle)#</td>
    <td>#LSCurrencyFormat(qShop.iPrice,"none")# DM</td>
    <td nowrap>
     
     <input type="Text" onfocus="this.select()" size="1" value="1" name="AID#qShop.AID#">

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


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


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


<cfmodule name="Shop.shoppingCard.clear">


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


<cfmodule name="Shop.shoppingCard.remove" AID="#URL.AID#">


<cflocation url="showCard.cfm?#getTickCount()#" addtoken="No">

Warenkorb anzeigen
Die Ansicht des Warenkorbs wird durch Aufruf des Eventhandlers/Datei showCard.cfm gestartet.


<cfmodule name="Shop.shoppingCard.getQuery" r_sQuery="qCard">

<body>

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


<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

Das deutsche ColdFusion-Forum cfml.de ist das Portal für Einsteiger und Experten zum Thema ColdFusion und der ColdFusion Markup Language (CFML).

© 2021 Webdesign & Hosting: CHC ONLINE Kassel | SOLVA Content-Management-System CMS
Urlaub-Angebote.de - Urlaub mit Bestpreis-Garantie buchen