Building E-commerce Sites

For better or worse, more and more of today's World Wide Web is about selling goods and services, rather than providing freely available information for educational or other purposes. Once the realm of researchers, educators, and techies, the Net is now largely seen as a way to sell to a larger market with less overhead.

Whether this counts as progress is a debate I'll leave for the history books. What it means for you as a Web developer is that sooner or later, you will probably need to build some type of e-commerce Web application, hopefully with ColdFusion.

Common Commerce-Site Elements

No two commerce projects are exactly alike. Nearly every company will have its own idea about what its commerce application should look and feel like, complete with a wish list and feature requirements.

That said, a number of common elements appear in one shape or another on most online commerce sites. If your project is about selling goods or services to the general public, it makes sense to implement a format that's reasonably familiar to users. This section discusses some of the features nearly all shopping sites have in common.

Storefront Area

Most online shopping starts at some type of storefront page, which presents the user with a top-level view of the items or services for sale. Depending on the number of items, these are usually broken down into various categories. From the main storefront page, users generally navigate to the item they want to purchase and then add the item to a virtual shopping cart.

Depending on the company, the storefront area might be its home page and might occupy nearly all of its Web site. This is often the case with an online bookstore or software reseller, for instance. In other situations, the storefront is only a section of a larger site. For instance, Orange Whip Studios' online store is a place to buy merchandise, such as posters and movie memorabilia. It's an important part of the site, but information about upcoming releases, star news, and investor relations will probably be the primary focus.

NOTE

The Store.cfm template presented in this chapter is Orange Whip Studios' storefront page.

Promotions and Featured Items

Most shopping sites also ensure that certain items jump out at the user by displaying them prominently, labeled as sale items, featured products, or by some other promotional term. These items are often sprinkled in callouts throughout the company's site to make them easy to find.

NOTE

The <cf_MerchDisplay> Custom Tag provided in this chapter offers a simple way to display featured merchandise throughout Orange Whip Studios' Web site.

Shopping Cart

Of course, one of the most important aspects of most commerce sites is the shopping cart. Shopping carts are so ubiquitous on today's Web that users have come to expect them and navigate through them almost intuitively.

If you implement a shopping cart for your application, make sure it looks and feels like carts on other sites, especially those in similar industries. Typically, the user can see the contents of his or her cart on a designated page. From there, the user should be able to remove items from the cart, change quantities, review the total price of items in the cart, and move on to a checkout process.

NOTE

The StoreCart.cfm template discussed in this chapter provides a simple shopping cart for the Orange Whip Studios' online store.

Checkout Process

Most users coming to your site will have a preconceived idea of what the checkout process should be like, so you should make it as straightforward and predictable as possible. This means asking the user to fill out one or two pages of forms, on which they provide information such as shipping addresses and credit-card data. Then the user clicks some type of Purchase Now button, which generates an order number and usually charges the user's credit card in real time.

NOTE

The StoreCheckout.cfm and StoreCheckoutForm.cfm templates in this chapter provide the checkout experience for Orange Whip Studios' virtual visitors.

Order Status and Package Tracking

If you are selling physical goods that need to be shipped after a purchase, users will expect to be able to check the status of their orders online. At a minimum, you should provide an email address to which users can write. You should also consider building a page that lets them check the status of current and past orders in real time.

Many users will also expect to be able to track shipped packages online. You can usually accomplish this via a simple link to the shipping carrier's Web sitesuch as http://www.ups.com or http://www.fedex.comperhaps passing a tracking number in the URL. Visit the Web site of your shipping carrier for details (look for some type of developer's section).

There isnt space in this chapter to discuss how to build such an order-tracking page, but the OrderHistory.cfm template discussed in Chapter 21, "Securing Your Applications," is a solid start that gets you most of the way there.

Using a Secure Server

Before you deploy your commerce site on a production server, consider investing in a Secure Sockets Layer (SSL) server certificate from a company such as VeriSign (http://www.verisign.com). You can then use the certificate to set up a secure Web server that employs encryption when communicating with Web browsers. This secured server might or might not reside on the same machines as the company's regular Web servers.

NOTE

Many people are unwilling to place an order at a site that doesn't use SSL security, and rightly so. The decision is yours, of course, but you are strongly urged to use a secured server for collecting any kind of personal information such as credit card numbers.

The secured Web-server instance may have its own document root (perhaps c:\inetpub\secroot instead of c:\inetpub\wwwroot), or it may share the same document root that your normal Web pages are served from. This will depend on your preferences and the Web-server software you are using. According to your needs, you'll place some or all of your commerce application on the secure server. A typical scenario would put your checkout and order-history pages on the secure server and leave the storefront and cart pages on the regular Web server. If so, the URL for the checkout page would likely be something like https://secure.orangewhipstudios.com/ows/Checkout.cfm (instead of http://www.orangewhipstudios.com/ows/Checkout.cfm).

NOTE

You configure SSL encryption at the Web-server level; it doesn't relate directly to ColdFusion. Consult your Web server's documentation for details on how to enable SSL and HTTPS with the software you are using.