Storing Information with Arrays

I l @ ve RuBoard

One of the mainstays of an e-commerce site is a shopping cart. With this next task, you will begin to understand some of the elements of setting one up. While you won't learn every necessary function, you will get a firm grasp of the basic elements involved. You are going to store the items in the shopping cart in an array. An array is similar to a structure but with one big difference: the array references values by position, rather than by a key name . So the first element in an array has the position 1. You are going to use a one-dimensional array to store an item's ID, and then access that ID later on to display the item in the shopping cart.

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

   This is the page that displays the product information that you used in Lesson 7.

   

2. After the final <cfif> statement add: <cfif ProductQty GT 0>

   Before you add the button, you want to make sure that you have the items in stock to be put in the cart in the first place. By checking to see if the ProductQty variable is greater than 0, you will know if you have the item in stock.

   

3. After the <cfif> statement add:

    <form name="cart" method="post" action="addtocart.cfm">  <input type="hidden" value="#productid#" name="productid"> <input type="submit" value="Add to Cart" style="border:1 solid"> </form> 

   This adds a form that will call the template that will actually add the items to the cart. In that form, you are creating a hidden field that contains the ID of the item you are adding to the cart, and also a Submit button that creates the "Add to Cart" button.

   

4. Add the closing </cfif> tag after the form.

   Your product list is now complete, with the "Add to Cart" button appearing for items that are in stock and available. It's time to take a lookafter saving the file, of course.

   

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

   Remember to move all the support files as well.

   

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

   The "Add to Cart" buttons appear below the products. You are now ready to build the page to be called when the user clicks that magical button.

   

7. Choose File > New and select Blank Document.

   Here's where you'll build the addtocart template.

   

8. At the top of the page, add the following:

    <cfif NOT isdefined("url.cart")> 

   By using the NOT operator, you are checking to see whether the cart variablethe one that will hold our shopping carthas not been created.

   

9. After the <cfif> statement add:

    <cfset cart = ArrayNew(1)> 

   ColdFusion's ArrayNew function creates a new array with one dimension, meaning that each position in the array can hold one value. If you had created a two-dimensional array, each position in the array could hold multiple values. ColdFusion supports up to three-dimensional arrays.

   You now have your value and need to set up the code to add the item to the cart.

   

10. Under the <cfset> statement add:

     <cfset cart[1] = #form.productid#> 

    This places the item's product ID in the first position of the array. Essentially, you have now added that item to the user's shopping cart.

    Once you have added an item, it's nice to give the user some feedback (in this case, a page that shows all the items in their shopping cart). In order to do that, you have to pass the cart variable to the next page. You'll do this using WDDX (similarly to how you passed a structure earlier).

    

    NOTE

    In a production environment, you would store this variable in either a session variable or client variable. However, since we are not covering client-state management in this book, you're just getting familiarized with the concepts of the shopping cart. For the most part, these concepts and code will stay the same when you do start using client-state management.

11. Serialize your cart array with the following code:

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

    You now have your shopping cart in a serialized variable that you can pass to the shopping cart output template.

    

12. After you serialize your cart variable, add the following:

     <cflocation url="cartoutput.cfm?cart="#urlencodeformat(cart)#"> 

    Because WDDX packet strings can contain characters that are not allowed to be passed through the URL, we must first URLencode it.

    Once the items have been added to the cart, the user will be forwarded to the cartoutput template to see what items they have in their cart. But what if the user already had items in his cart and wanted to add another one?

    

13. Add a <cfelse> statement.

    This will account for when a user already has an item in their cart. In this case, the cart will have been passed in through the URL and will need to be de-serialized.

    

14. Add the following code to de-serialize your cart variable:

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

    You now have your cart variable back in an array and can add additional products to it. But before you add any additional products to the cart, you need to add code to determine in which element of the array this product will be placed.

    

15. After your new <cfwddx> tag add:

     <cfset newitem = ArrayLen(Cart) + 1> 

    The ArrayLen function determines the length, or number of items, in the array. By adding 1 to this number, your variable (newitem) will hold the position number of the element in the array where the new product ID needs to be put.

    

16. On a new line add:

     <cfset cart[newitem] = "#form.productid#"> 

    This will add another element to the cart array and insert the product ID of the item the user selected. Now you have your cart with the additional item added. Once again, you will want to send the user to the cartoutput template. But first, you still have to serialize the array so you can pass it in the URL.

    

17. After your <cfset> statement add:

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

    Your cart is now (re)serialized in a variable and ready to pass on to the cartoutput template.

    

18. Add the code to send the user back to the cartoutput template:

     <cflocation url="cartoutput.cfm?cart=#cart#"> 

    As before, when the item has been added, this will send the user on to the cartoutput template and pass the cart variable to the shopping cart array.

    

19. Add the closing </cfif> statement.

    This wraps up your page to add items to the shopping cart. In the next task, you'll work on the output side of the shopping cart experience.

    

20. Save this new file as addtocart.cfm in the Lesson8\Start\ folder in the Inetpub/wwwroot directory.

    

I l @ ve RuBoard