Developer

Create a simple shopping cart using ColdFusion

Online shopping has become commonplace in today's world. Follow these steps to easily implement an online shopping site with ColdFusion.


The ColdFusion server and development environment is used to host a wide variety of Web sites, including electronic commerce, and continues to grow in popularity. One approach to creating a shopping experience with ColdFusion takes advantage of a combination of arrays and structures to build a simple shopping cart. Using arrays and structures together facilitates a clean interface between different parts of your application, which becomes crucial when you start using ColdFusion custom tags and the new ColdFusion Components. Follow these steps to easily create a shopping cart.

Combining arrays and structures
At first glance, one might wonder why you’d want to use arrays and structures together at all. Superficially, they appear to do the same thing: store multiple pieces of information together in a single variable. However, arrays and structures each have their own benefits and drawbacks, and they actually work very nicely together. For example, to create a structure where one of the keys is an array, you could use this code:
<cfset productInfo = structNew()>
<cfset productInfo.availableColors = arrayNew(1)>


You would then have a structure called productInfo with a key called availableColors. The key availableColors is an array, in which you can store multiple colors, like this:
<cfset productInfo.availableColors[1] = "White">
<cfset productInfo.availableColors[2] = "Blue">
<cfset productInfo.availableColors[3] = "Green">


You could set up other keys in the productInfo structure, perhaps keys for productID, productPrice, or quantityInStock. You’ll end up with a single variable, productInfo, that contains all the information you need on a product. Looping over the array to output the colors is easy too, for example:
<cfloop index="thisColor" from="1" to="#arrayLen( productInfo.availableColors )#">
<cfoutput>
Color Number #thisColor#: #productInfo.availableColors[thisColor]#<br>
</cfoutput>
</cfloop>


The previous code outputs the following:
Color Number 1: White
Color Number 2: Blue
Color Number 3: Green


The methods for manipulating arrays and structures are easy to use. Using them together is straightforward; it takes a little practice to get used to it. Let’s put these techniques to use with an example of a simple shopping cart.

Create a shopping cart
To further visualize the idea of using arrays and structures together, I'll explain how to create a simple shopping cart. For the sake of space, I won’t show much on the user interface, because I’m sure most folks have visited an online store. Instead, I’ll focus on the processing side to show the usefulness of combining arrays and structures.

To begin, I’ll create a session-scope variable to hold the shopping cart. ColdFusion session variables are persistent variables that stay with the user until their browser session times out. In a production application, you should use cflock to lock reads and writes to any session variables because they are stored in the server’s memory. The cflock negates any memory contention issues. To begin setting up the cart, you would use this code:
<cfparam name="session.cart" default="arrayNew()">

This establishes an empty array called session.cart if one doesn’t exist. In my example, I used an array because each element in the array will represent an item in the user’s shopping cart. Remember arrays are useful when you don’t know how many elements you need to track. The user could have one or eight items in their cart; there is no way to know for sure. Arrays make keeping track of variable elements like this a snap.

The cart is then set up. Let’s assume your site has a form with a button that says Add To Cart. When the user submits this form, it will add that item to their cart. Each item in the cart will have certain properties associated with it: itemID, quantity, and itemName. These fields could be passed as hidden form fields or (perhaps for quantity), a text input field. Here’s how you can do this:
<!—- Append a new element to the array.  This element is a new structure. —->
<cfset session.cart = arrayAppend( session.cart, structNew() )>
<!—- Set up a variable to hold the array position that we're inserting into. —->
<cfset thisCartItem = arraylen( session.cart )>
<!—- Populate the new structure with the item information passed from the form. —->
<cfset session.cart[thisCartItem].itemID = form.itemID>
<cfset session.cart[thisCartItem].quantity = form.quantity>
<cfset session.cart[thisCartItem].itemName = form.itemName>


As each item is added to the cart, a new structure is created for that item to hold the itemID, quantity, and itemName. Let’s add a bit more functionality: the ability to delete an item from the cart. If a user submits a form to delete an item, you would pass the itemID of the item to delete as a hidden form field. Next, some code like the following would delete the appropriate item:
<!—- Delete the specified item from the cart. —->
<cfloop index="thisCartItem" from="1" to="#arrayLen( session.cart )#">
<cfif session.cart[thisCartItem].itemID eq form.itemID>
<cfset session.cart = arrayDeleteAt( session.cart, thisCartItem )>
</cfif>
</cfloop>


Similar code, shown below, would allow you to pass an itemID and a quantity from a form to update an item in the cart with a new quantity:
<!—- Delete the specified item from the cart. —->
<cfloop index="thisCartItem" from="1" to="#arrayLen( session.cart )#">
<cfif session.cart[thisCartItem].itemID eq form.itemID>
<cfset session.cart[thisCartItem].quantity = form.quantity>
</cfif>
</cfloop>


Of course, this is only example code. In a production application you want to have many more validation checks in place. For example, you might check for duplicate items in the cart, make sure the quantity is numeric, or make sure the user doesn’t submit a negative quantity value. And remember, if you are storing the price of an item, a malicious user could tamper with the price field when the form is submitted. You should always double check crucial data (such as prices) after the user decides to check out. In the early days of online shopping, nasty folks could enter 1.00 as the price and get a stereo for a dollar. You don't want to create one of those stores.

Try it out
These examples demonstrate the benefits and functionality of using arrays and structures together. If the need arises, you can nest them multiple times. As with most topics that involve coding, the best place to start is to play around with the ideas and try them out.

Download now available

A downloadable PDF version of this article is available from the TechRepublic Download Center. The downloadable version includes all of the code in both printable and text form perfect for copying and pasting.


Editor's Picks

Free Newsletters, In your Inbox