Áltered^Pixels

This tutorial uses arrays and structures to develop a shopping cart system. This tutorial also contains web-front order processing (e-commerce) information that most of you will probably find very helpful alongside the shopping cart.

This tutorial comes from an eclectic group of sources. I utilized Macromedia's LiveDoc's, CJ's tutorials, as well as many other tutorial information when I first built a full shopping cart system. With that in mind, some of my coding may seem familiar from elsewhere, and I want to acknowledge that I took parts of my coding from other sources when I initially wrote all of this coding. At this point I cannot cite exactly which parts are from elsewhere, but just know that some parts are.

Additionally, this tutorial utilizes a processing system in which people who shop must sign up as members. The coding is written so it is not a nuisance for customers to sign up as they check out. The code should be easily understood and editable so customers do not have to sign up before purchasing. I did this because I have found it more convenient for customers to store their information, and its more secure as it only uses one address for both billing and shipping.

This part of the tutorial deals with setting up your database and signing up members.

For the sake of making this tutorial pretty comprehensive, I am going to give a fairly large database example. There are some extraneous columns in the product table that aren't necessary for the shopping cart system to work, but it will make your site be organized in many ways.
The database I'm describing here is a Microsoft Access 2000 database with 3 tables: LCustomers, LProducts, and LOrders.

Below is the LCustomers table, which holds all the customer information so they can log-in and place orders.

Please note: you should not use "username" and "password" as database fields, but for a matter of simplicity I used them here.

Below is the LProducts table, which holds all of the products that will be for sale on your site.

Below is the LOrders table, which holds all of the order information when it is processed by your site.

Ok, now that you're database is all set up (the easy part), we can move onto the actual coding of the site, starting with the Member sign up page. If you don't plan on using the member system, you can skip through here.

These are the scripts to sign up the members to your site. This will be expanded on in the Checkout section of the tutorial, but for now you just need the scripting.

I'm rushing through this part. This is nowhere near the crux of the tutorial, and, if you're reading this tutorial and can comprehend it, this should all be pretty self-explanatory to you. It is just the form coding with some javascript to prevent unwanted entries (numbers and letters).

Below is the coding to add the customer into the database.

This too is pretty self explanatory for an intermediate programmer. It error checks at the beginning to make sure the required fields are entered. If the fields that aren't required are blank it sets them to "". It then adds the user information into the database. Notice that it sets the username to be the e-mail address. Finally, the new user has their information e-mailed to them.

This is the MAIN part of the tutorial. This is where we set up our shopping cart and learn how to add products into it.

Coding a shopping cart really is not very hard at all. All you need is knowledge of arrays and structures and you're ready to go. I will first show all the scripting for this part and then describe each part of the coding in more detail.

See, it's not so bad at all. Very little coding. Now to the explanations:

<cfif IsDefined('session.shoppingcart') is "NO">
Your shopping cart is currently empty.
<cfelse>

This part simply sees if a shopping cart is defined. If it isn't, then you tell the user that their shopping cart is empty.

<cfelse>
<cfset totalItems = 0>
<cfloop from="1" to="#arrayLen(session.shoppingcart)#" index="i">
<cfset totalItems = variables.totalItems + session.shoppingcart[i].quantity>
</cfloop>
<cfif totalItems EQ 0>
Your shopping cart is currently empty.
<cfelse>

Now, we do a loop. Since we have already discovered that a shopping cart exists, we loop through to see what products we have in there. This part is from CJ's tutorial and he explains it well there. If it turns out our shopping cart exists, but the user deleted all the items, it again tells the user the shopping cart is empty.

Now, if the user has products in their cart, we show everything to them.

<cfoutput>
<cfloop from="1" to="#arrayLen(session.shoppingcart)#" index="i">
<cfset total[i] = session.shoppingcart[i].price * session.shoppingcart[i].quantity>
<tr style="background-color:##<cfif i MOD 2>EFEFEF<cfelse>FFFFFF</cfif>;">
<td>#i#</td>
<td>#session.shoppingcart[i].name#</td>
<td>#session.shoppingcart[i].size#</td>
<td>#DollarFormat(session.shoppingcart[i].price)#</td>
<td>#session.shoppingcart[i].quantity#</td>
<td>#DollarFormat(total[i])#</td>
<td><a href="delete_item.cfm?id=#i#">Remove Item</a></td>
</tr>
</cfloop>
</cfoutput>

This code comes after we format our table. We loop through our shopping cart and display all of the information. We set the price for the total for each item determined by its price and quantity (total[i]), and then display all the information. We use the "DollarFormat" function to put a dollar sign before the price and limit the decimal places to two.

<cfset totalprice = 0>
<cfloop from="1" to="#arrayLen(session.shoppingcart)#" index="i">
<cfset totalprice = variables.totalprice + total[i]>
</cfloop>
<tr style="background-color:#DDDDDD;">
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><b><cfoutput>#DollarFormat(variables.totalprice)#</cfoutput></b></td><td><a href="checkout.cfm"><b>Checkout</b></a></td>

Now we determine the total price of all of the items in the shopping cart to display to the user. We loop through the cart and keep adding the total[i] prices we determined in earlier coding until we reach the end of our cart. Then you see we display it again using the DollarFormat function.
The end of the coding just displays the total products that we calculated earlier.

Now, as you might have noticed, there is a link that says "Remove Item" when our products are displayed in the shopping cart. When the user clicks this, it deletes the item from the shopping cart array. Below is the coding.

Very simple. It uses the ArrayDeleteAt function to remove the item from the cart. It uses the variable passed from the product display page to know which item to remove. Then, we use a quick script to forward the user back to the cart.

You probably also notice the "Clear Cart" link. This is similar to the "Remove Item" link, but clears out the entire cart.

As you can see, we don't delete the items, actually. We clear out the entire array that is session.shoppingcart. This is the easiest and most efficient way. We don't want to clear the entire session structure, because the user may be logged in and that would log them out. Keep that in mind with your "logout" script for your site. Just because a user logs out doesn't mean he wants to clear out his shopping cart. They may want to log in under another account.

Phew, ok, that was the hard part. And it wasn't too bad at all. If you look closely at the coding you will definitely be able to understand all of it, no matter what your level of ColdFusion knowledge. As you can see, its apparent that we set all of those structure values earlier inside our shopping cart (which is our main array). Now, you may be thinking, when is our cart defined? and, when is that information added for each product? Well, that all happens in our very next section!

Before we add the product to the shopping cart, we have to show our products to our user. This is just a basic display script that gets all of the products from the database. Of course, you can use the different columns in your products table to only show certain items.

This is very simple coding. We first query the database for all of our products and then sort them by name. Then, we set up a form for each product by giving each form a name that is "Add" and then the product ID number - making each form unique. We then simply output all of the information about our product we want the customer to see. You'll notice there are a few hidden values. These are used to pass variables that we need when the product is added to the shopping cart. The product name, price, and quantity are all added. Quantity is input by the user and they can change the default value of 1.

This page goes hand-in-hand with the cart.cfm page. This is where we get all of our products to display! After the user clicks the "Add to Cart" button, this script actually puts the product and all of its contents as a new structure into our shopping cart aray.

The first thing it does is check to see if a shopping cart array exists. If not, it creates that new array.

Then, it loops over our cart and checks to see if that product is already in the shopping cart, using its ID number as a reference. If the product is in fact in the cart, it adds the quantity number as entered on the product display page to the current quantity inside the cart.


Using a variable called "newitem" it checks to see if we already updated the quantity of an existing product. If not, we have to add this product to the cart. We set up our new structure and insert all of the new values into their positions. You'll see that the new product number is designated by using the arrayAppend function, creating a free position for our new product to be entered. This adds a new spot at the end of the array for our product to be entered.

Finally, we send the user to cart.cfm so they can see they're cart with its new quantity or new products.

Now that we have our products in the cart, there's only one thing left to do... make those people pay! You'll notice the cart.cfm page has links to checkout.cfm.

This part of the tutorial deals with having the customer check out and process their order. Additionally, it contains special code snippets that you will find helpful and will want to revert back to as you build your shopping cart.

Now our customers have products in their cart and they're ready to submit their order. So, there are a number of things we have to do. Firstly, we have to check to see if our customer is logged in. If they're not, we have to give them the option to log in. If they don't have an account, we give them the option to sign up. Here is our checkout.cfm page:

So what we do in this file is first check to see if the user is logged in (session.allowin). If they are not, we show them our page. Our page gives them the option to log in or sign up a new account. Notice how it is not inconvenient to sign up a new account. The user can simply sign up just as if it were a normal checkout (without membership). The only difference is they have to choose a password.
At the bottom of the page, we see the <cfelse> tag that is finishing off the initial cfif tag checking if our customer is logged in. If they ARE logged in, we forward them to our next page, confirmorder.cfm.

This page is slightly complex, but not too bad once we look into it. We start off doing some error checking. First, we check to see if the user is logged in. We don't want someone who hasn't logged in stumbling upon this page. You can use this snippet on all of the order processing pages. Then, we check to make sure we have all the credit card information we need after making a database query to get the session user information. If we don't, the user cannot move forward and process their order. If the user passes all the tests, they can then move on to the next part of the coding.

We then do a virutally identical loop to the one in our cart.cfm page. We find and display all of the products in the user's shopping cart. Next, several variables are displayed regarding the order: the subtotal, tax, shipping, and the combined total. Now, you may be wondering, where do all these variables come from? Well, if you notice the <cfinclude> tag, that is your answer. In the page ordettotals.cfm we create several variables that we need on this page and the processing page subsequent to this one. Below is the ordertotals page:

We set a few variables on this page: total price per item, total price, shipping price, tax (if applicable), and the fulltotal.

Like in our cart, we loop through to find the price of each item. Then, like before, we add up the prices to get our subtotal. Next, we figure out the shipping. Here, it is configured as 10%. This page is helpful because if you ever want to change the shipping right, the only place you have to change it is here.

A commonly disregarded item is the tax. On the Internet, the only time you ahev to charge tax is when it is an intrastate purchase (within the selling state). In this case, the homestate is Florida (make sure you use a select box in the sign up page to guarantee the state is input as "FL" to maintain consistency. In Florida, sales tax is 6%. Depending on whether or not the customer is in our home state, it sets the next 2 varibales: totalprice, and fulltotal. Full total is the total item price + the shipping price + the tax price (if necessary). You see the cfif tag is used to determine whether or not tax is to be added.

Lastly, we figure out the total items in the cart. You should recognize this code from the cart.cfm page.

Now, the last, and possibly most important part - processing the order.

Ok, that was a long one, but pretty simple, and by now, it should mostly be familiar to you. We start off by checking if the user's logged in. Then, we do our query to get all our user information and include the ordertotals.cfm page to get our variables for use again.

Now we add our order into our database table. This should all be familiar to you, with perhaps the exception of the loop. We look over our shopping cart one more time. This time, we output our item names as a comma delimited list. Look closely to understand precisely how the list is created.

At this point, we just have 3 things left to do: send the e-mail to ourselves to process it, send the e-mail to our customer as confirmation, and show the order confirmation page to the customer on our site after they process their order. There is nothing new in the code with the exception of the Right() function. This simply gets the 4 last digits of the customer's credit card number and displays it to them with Xs for the first 11 digits.

Our order information table is formatted just like on the cart.cfm page and the confirmorder.cfm page. By this point, you should have that loop over our shopping cart array virtually memorized. You see we again show all of our variables back to the user and input them in our e-mails. In your e-mail to your customer, use the Right() function for the credit card, just for security.

Sending an e-mail is of course just one way to process your order. This is assuming each order is processed by hand. You can of course use all differenet kinds of processing (online merchant processing, PayPal, sending the order via FTP to another computer). No matter what you do, it's all the same concept and you can use the same output coding.

Well, that is all there is to an e-commerce system with a fully functional shopping cart.

0 responses to “E-Commerce in Cold Fusion”

Make a comment on E-Commerce in Cold Fusion

Name:

Email:

URL:

Your Comments:

Subscribe to this comment thread

Remember my information

Please enter the text you see in the picture:

Please enter the text you see in the picture:

Remember my information