E-Commerce
| When we think about e-commerce, we might think about the dot-com boom back in the late 1990s, when everyone was rushing to set up their own online stores, complete with shopping cart applications and online credit card processing. E-commerce, however, is not limited to startups that only conduct business online; it is simply the capability for any company to transact business online. If you sell automotive decals from an online store, you need a few basic components to complete a business transaction online:
Building a CatalogFirst, you need an online catalog. Catalogs are a fairly simple type of application. They consist of some search or drill-down mechanism that enables the user to see items in the catalog based on a keyword search or category selection. The template that you create to display the resulting items probably displays several items. It might even display items in different categories. You might also want to build a default catalog page that lists your product categories as well. Check out Figure 17.7. Figure 17.7. Catalog page . When a user chooses a category or submits a search request, your catalog should return a resulting page that shows the items in the requested category or those items that meet the user's search criteria. Listing 17.10 presents an adjective system and Figure 17.8 shows what it looks like in a browser. Figure 17.8. Category results page. Listing 17.10 Catalog Items By Category <cfquery name="getProducts" datasource="#request.dsn#"> SELECT p.ProductID, p.CatID, p.ProdName, p.ProdDesc, p.ProdPrice, p.ProdSpec, c.CategoryName FROM products p, categories c WHERE c.CategoryID = p.CatID <cfif IsDefined("url.CatID")>AND c.CategoryID = #url.CatID#</cfif> </cfquery> <table align="left" border="0" width="100%" cellpadding="2" cellspacing="0"> <tr> <td colspan="2">Welcome to the catalog. Take a look at the item available right now.</ In most cases, the catalog includes a way to show more information about each item within the catalog. This type of template is simply referred to as the details template. DetailsAny good shopping cart includes a page where the user can see the details of the item that he or she is considering purchasing. Usually, that details page includes an extended explanation of the item and its specifications. The details page often includes a link to view a larger version of the picture of the item. Listing 17.11 and Figure 17.9 provide an example of such a page. Figure 17.9. Item Details page. Listing 17.11 Showing the Item Details<cfquery name="getProduct" datasource="#request.dsn#"> SELECT p.ProductID, p.CatID, p.ProdName, p.ProdDesc, p.ProdPrice, p.ProdSpec, p.ProdThumbnail, c.CategoryName FROM products p, categories c WHERE c.CategoryID = p.CatID AND p.ProductID = #url.PID# </cfquery> <table align="left" border="0" width="100%" cellpadding="2" cellspacing="0"> <tr> <td colspan="2">This page would show the detailed information about the product.</td> </tr> <cfoutput> <tr> <td colspan="2"><br>#getProduct.CategoryName#</td> </tr> <form action="index.cfm?ShowContent=Cart_Action" method="post"> <input type="hidden" name="item" value="#getProduct.ProductID#"> <input type="hidden" name="itemname" value="#getProduct.ProdName#"> <input type="hidden" name="price" value="#getProduct.ProdPrice#"> <input type="hidden" name="quantity" value="1"> <tr> <td colspan="2" align="left"><font >#getProduct. Building a Shopping CartThe shopping cart is the core functionality that lies at the heart of the e-commerce application. The shopping cart is a storage place for items that the customer is thinking about purchasing. A good shopping cart enables users to change both items and quantities. Shopping carts store selected items for a single user. Shopping carts can store these selections for the life of the user session, or the carts can store them until they are manually removed by the user. During the planning of your shopping cart, special consideration should be given to the duration of storage for the user's selected items. This determines whether your shopping cart stores selections in session variables or stores them elsewhere. Of course, the users must be allowed to add items to their carts. As mentioned, the users should also be allowed to update their carts by specifying new item quantities or by removing items from the cart completely. Add to Cart/Update CartEvery shopping cart requires an operation that enables the user to add an item or multiple items to his or her cart. The code in Listing 17.12 enables these tasks. The code first checks whether the cart exists. The code then checks whether the shopping cart exists within the current user's session. If it does not exist, it creates the session.MyCart array. The code then checks for the length of the array and creates a new array item. The new array variable is actually an embedded ColdFusion structure that holds the selected item's ID, name, quantity, price, and subtotal (item pricexquantity). The code uses a CFLOCATION tag to show the updated cart contents. Listing 17.12 Add Item to the Cart <cflock scope="session" type="exclusive" timeout="10"> <cfif NOT IsDefined("session.MyCart") OR ArrayIsEmpty(session.MyCart)> <cfset session.MyCart = ArrayNew(1)> </cfif> <cfset i = ArrayLen(SESSION.MyCart) + 1> <cfset session.MyCart[i] = STRUCTNEW()> <cfset session.MyCart[i].item = form.item> <cfset session.MyCart[i].itemname = form.itemname> <cfset session.MyCart[i].quantity = form.quantity> <cfset session.MyCart[i].price = form.price> <cfset session.MyCart[i].sub_total = form.price * form.quantity> </cflock> <cflocation url="index.cfm?ShowContent=Cart"> After the item has been added to the cart, you must enable the user to view his or her cart. At this point, the user can adjust quantities, delete items from the cart, and decide whether to check out or to continue shopping. See Listing 17.13 and Figure 17.10. Figure 17.10. Summary of shopping cart items . Listing 17.13 View the User's Cart <script language="JavaScript"> function JumpToCat(){window.location="index.cfm?ShowContent=Catalog";} function JumpToCheckout(){window.location="index.cfm?ShowContent=Checkout";} </script> <cfinclude template="../common/cartfunctions.cfm"> <table align="left" border="0" cellspacing="0" cellpadding="2" width="600"> <tr> <td rowspan="3" width="250" valign="top">This is where I explain that After the user has finished gathering items into the cart and adjusting the quantity of any of those items, the shopping cart application should enable the user to check out. The checkout process is the final process with which the user interacts. Checkout and Payment ProcessingThe checkout process usually involves the user entering his or her name, billing and shipping information, and payment preferences. There are several ways to complete this process. You can gather all the information for a customer each time that he or she makes a purchase. However, if you expect your customers to purchase from your site again (and probably even if you don't), you should consider allowing the user to provide a password for future purchases. Even if you don't, your application could generate a password and send it to the customer for future logins. SummaryIn the preceding section, we discovered how to use ColdFusion MX to create e-commerce applications that enable our users to purchase products from our sites, to update/change shopping cart items, and to connect to a payment-processing vendor. Although this is certainly in no way everything you need to know about developing an e-commerce site, you should now have a solid foundation on which to build as you begin to explore for yourself the ways in which you can make your site more robust and appealing to your users and potential customers. |
td> </tr> <cfoutput query="getProducts" group="CategoryName"> <tr> <td ><br>#getProducts.CategoryName#</td><td align="right"><input 
EAN: 2147483647
Pages: 579