Artikel - Detailansicht

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

Zurück


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

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