Displaying Information with Arrays

I l @ ve RuBoard

Now that you have a functional shopping cart model, you'll need to have the cartoutput template to go along with it.

1. Open X:\Lesson8\Start\cartoutput.cfm.

   This is the template you are going to use to display or confirm whatever is in the user 's cart.

   

2. At the top of the page, add:

    <cfwddx action="wddx2cfml" input="#url.cart#" output="cart"> 

   Just like before, the first thing you have to do is de-serialize the shopping cart array that was passed to the template. Once you have done this, you are ready to output the information.

   

3. After you de-serialize the cart, add:

    <cfset items = ArraytoList(cart)> 

   This converts the array of product items to a list. We can use this in the SQL statement to retrieve the items from the database.

   

4. Add the following SQL to the page:

    <cfquery datasource="products" name="products">  SELECT * FROM tblProducts WHERE ProductID IN (#items#) </cfquery> 

   This query uses the SQL keyword IN, which causes the query to return all the records in the database where the ProductID is in the list of product IDs from your shopping cart array.

   

5. Beginning on line 114, add the output code for the items:

    <font size="2">  The following items are in your cart: <br> <cfoutput query="products"> #ProductName# -- #ProductPrice#<br> </cfoutput> </font> 

   This will output the items that were returned from the query, which should be all the items in the user's cart. The final steps for this page are to reserialize the cart array and add a link back to the Products page so the user can add more items.

   

6. Add the reserialize sequence again:

    <cfwddx action="cfml2wddx" input="#cart#" output="cart"> 

   You have to reserialize your cart array in order to pass it back to the productinfo template, so you are now ready to effect that pass.

   

7. Add the following link:

    <cfoutput>  <a href="productinfo.cfm?cart=#cart#">Back to products</a> </cfoutput> 

   This link sends the user back to the productinfo template so they are able to add additional items to their cart.

   

8. Save the productinfo template to the Lesson8\Start folder in your Inetpub\ wwwroot folder.

   

   There is one more small change that needs to be made to the productinfo template. When we initially set it up, we didn't add code to pass the cart array to the addtocart template.

9. In the productinfo template, change the action attribute of the form tag to read as follows :

    action="addtocart.cfm<cfif isdefined("url.cart")>?cart=#url.cart#</cfif>" 

   This way, if the user is returning from the cartoutput template, the cart array will be appended to each action URL and passed to the addtocart template when a new item is added. You are now ready to try it out!

   

10. Open a Web browser and type http://127.0.0.1/Lesson8/Start/productinfo.cfm into the address window.

    You should not be disappointed to see that this looks the same as before, when you first made the "Add to Cart" buttons .

    

11. Click one of the "Add to Cart" buttons.

    Notice that the item you added is now listed as being in your cart.

    

12. Click the "Back to products" link and add the other item to your cart.

    Now, when you click the "Add to Cart" button, you will see that you have two items in your cart.

    

I l @ ve RuBoard