Creating Storefronts

Before creating code for the shopping cart and checkout process, you should create a simple framework for displaying the products and services your company will be offering for purchase. Then you can organize the items into an online storefront.

Displaying Individual Items

Listing 28.1 creates a CFML Custom Tag called <cf_MerchDisplay>. The tag displays a single piece of merchandise for sale, including a picture of the item and the appropriate Add To Cart link. You can use this to display a series of items in Orange Whip Studios' storefront page, as well as to feature individual items as callouts on the home page and throughout the site.

After you have this tag is in place, you can use it like this (where someMerchID is the name of a variable that identifies the desired item from the Merchandise table):

 <!--- Show item for sale, via custom tag ---> <cf_MerchDisplay  merch  showAddLink="Yes"> 

This Custom Tag is similar conceptually to the <cf_ShowMovieCallout> Custom Tag covered in Chapter 23, "Building Reusable Components." The two <cfparam> tags at the top force the tag to accept two attributes: the desired merchID (which is required) and showAddLink (which is optional). If showAddLink is Yes or is not provided, the Custom Tag displays the merchandise item with a link for the user to add the item to the shopping cart. If showAddLink is No, the same content is displayed, but without the Add To Cart link.

To make this Custom Tag available to ColdFusion, you should save Listing 28.1 as a file called MerchDisplay.cfm, either within the special CustomTags folder or in the same folder as the templates that will call it. See Chapter 23 for more information about where to save Custom Tag templates and about CFML Custom Tags in general.

Listing 28.1. MerchDisplay.cfmCreating a Custom Tag to Display Individual Items for Sale

 <!---  Filename: MerchDisplay.cfm  Created by: Nate Weiss (NMW)  Purpose: Provides simple online shopping interface  Please Note Used by Store.cfm page ---> <!--- Tag Attributes ---> <!--- MerchID to display (from Merchandise table) ---> <cfparam name="ATTRIBUTES.merchID" type="numeric"> <!--- Controls whether to show "Add To Cart" link ---> <cfparam name="ATTRIBUTES.showAddLink" type="boolean" default="Yes"> <!--- Get information about this part from database ---> <!--- Query-Caching cuts down on database accesses. ---> <cfquery name="getMerch" datasource="#APPLICATION.dataSource#"  cachedWithin="#createTimeSpan(0,1,0,0)#">  SELECT  m.MerchName, m.MerchDescription, m.MerchPrice,  m.ImageNameSmall, m.ImageNameLarge,  f.FilmID, f.MovieTitle  FROM  Merchandise m INNER JOIN Films f  ON m.FilmID = f.FilmID  WHERE  m.MerchID = #ATTRIBUTES.merchID# </cfquery> <!--- Exit tag silently (no error) if item not found ---> <cfif getMerch.recordCount neq 1>  <cfexit> </cfif> <!--- URL for "Add To Cart" link/button ---> <cfset addLinkURL = "StoreCart.cfm?addMerchID=#ATTRIBUTES.merchID#"> <!--- Now display information about the merchandise ---> <cfoutput>  <table width="300" cellspacing="0" border="0">  <tr>  <!--- Pictures go on left --->  <td align="center">  <!--- If there is an image available for item --->  <!--- (allow user to click for bigger picture) --->  <cfif getMerch.imageNameLarge neq "">  <a href="../images/#getMerch.ImageNameLarge#">  <img src="/books/2/448/1/html/2/../images/#getMerch.ImageNameSmall#" border="0"  alt="#getMerch.MerchName# (click for larger picture)"></a>  </cfif>  </td>  <!--- Item description, price, etc., go on right --->  <td style="font-family:arial;font-size:12px">  <!--- Name of item, associated movie title, etc --->  <strong>#getMerch.MerchName#</strong><br>  <font size="1">From the film: #getMerch.MovieTitle#</font><br>  #GetMerch.MerchDescription#<br>  <!--- Display Price --->  <b>Price: #lsCurrencyFormat(getMerch.MerchPrice)#</b><br>  <!--- If we are supposed to show an "AddToCart" link --->  <cfif ATTRIBUTES.showAddLink>    <img src="/books/2/448/1/html/2/../images/Arrow.gif" width="10" height="9" alt="" border="0">    <a href="#addLinkURL#">Add To Cart</a><br>  </cfif>  </td>  </tr>  </table> </cfoutput> 

After the two <cfparam> tags, a simple query named getMerch gets the relevant information about the piece of merchandise, based on the merchID passed to the tag. If for some reason the merchID no longer exists, the tag simply stops its processing via the <cfexit> tag. No error message is displayed and processing in the calling template continues normally. Next, a variable called addLinkURL is constructed, which is the URL to which the user will be sent if he or she decides to add the item to the shopping cart.

The cachedWithin attribute to cache the GetMerch query in the servers RAM keeps database interaction to a minimum, which improves performance. See the section "Improving Query Performance with Caching" in Chapter 25, "Improving Performance," for details.

The rest of the template is straightforward. An HTML table displays a picture of the part (if available), based on the value of the ImageNameSmall column in the Merchandise table. The user can see a larger version of the image by clicking it.

This makes it easy to display various items for sale throughout a site, based on whatever logic your application calls for. For instance, assuming you've already run a query called getMerch that includes a MerchID column, you could select a random MerchID from one of the query's rows, like so:

 <!--- Pick an item at random to display as a "Feature" ---> <cfset randNum = randRange(1, getMerch.recordCount)> <cfset randMerchID = getMerch.MerchID[randNum]> 

The following could then display the randomly selected merchandise:

 <!--- Display featured item ---> <cf_MerchDisplay  merch> 

Collecting Items into a Store

Depending on the nature of the company, the actual store part of a Web site can be a sprawling, category-driven affair, or something quite simple. Because Orange Whip Studios has relatively few products for sale (less than 20 rows exist in the Merchandise table), the best thing might be to create a one-page store that displays all the items.

Listing 28.2 outputs all the items currently available for sale in a two-column display, using ordinary HTML table tags. Because the job of actually displaying the product's name, image, and associated links is encapsulated within the <cf_MerchDisplay> Custom Tag, this simple storefront template turns out to be quite short.

Figure 28.1 shows what this storefront looks like in a user's browser.

Listing 28.2. Store.cfmDisplaying All Items for Sale

 <!---  Filename: Store.cfm  Created by: Nate Weiss (NMW)  Purpose: Provides simple online shopping interface  Please Note Relies upon CF_MerchDisplay custom tag ---> <!--- Get list of merchandise from database ---> <cfquery name="getMerch" datasource="#APPLICATION.dataSource#"  cachedwithin="#createTimeSpan(0,1,0,0)#">  SELECT MerchID, MerchPrice  FROM Merchandise  ORDER BY MerchName </cfquery> <!--- Show header images, etc., for Online Store ---> <cfinclude template="StoreHeader.cfm"> <!--- Show merchandise in a HTML table ---> <p> <table>  <tr>  <!--- For each piece of merchandise --->  <cfloop query="getMerch">  <td>  <!--- Show this piece of merchandise --->  <cf_MerchDisplay  merch>  </td>  <!--- Alternate left and right columns --->  <cfif currentRow mod 2 eq 0></tr><tr></cfif>  </cfloop>  </tr> </table> </body> </html> 

Figure 28.1. Orange Whip Studios' online store lets users peruse the merchandise available for sale.

TIP

By altering the ORDER BY part of the query, you could display the items in terms of popularity, price, or other measure.

The Store.cfm template in Listing 28.2 displays a common storefront page header at the top of the page by including a file called StoreHeader.cfm via a <cfinclude> tag. Listing 28.3 creates that header template, which displays Orange Whip Studios' logo, plus links marked Store Home, Shopping Cart, and Checkout. It also establishes a few default font settings via a <style> block.

Listing 28.3. StoreHeader.cfmCommon Header for All of Orange Whip's Shopping Pages

 <!---  Filename: StoreHeader.cfm  Created by: Nate Weiss (NMW)  Purpose: Provides consistent navigation within store ---> <!--- "Online Store" page title and header ---> <cfoutput>  <html>  <head><title>#APPLICATION.companyName# Online Store</title></head>  <body>  <style type="text/css">  BODY {font-family:arial,helvetica,sans-serif;font-size:12px}  TD {font-size:12px}  TH {font-size:12px}  </style>  <table border="0" width="100%">  <tr>  <td width="101">  <!--- Company logo, with link to company home page --->  <a href="http://www.orangewhipstudios.com">  <img src="/books/2/448/1/html/2/../images/logo_c.gif"  width="101" height="101" alt="" border="0" align="left"></a>  </td>  <td>  <hr>  <strong>#APPLICATION.companyName#</strong><br>  Online Store<br clear="all">  <hr>  </td>  <td width="100" align="left">  <!--- Link to "Shopping Cart" page --->  <img src="/books/2/448/1/html/2/../images/Arrow.gif" width="10" height="9" alt="" border="0">  <a href="Store.cfm">Store Home</a><br>  <!--- Link to "Shopping Cart" page --->  <img src="/books/2/448/1/html/2/../images/Arrow.gif" width="10" height="9" alt="" border="0">  <a href="StoreCart.cfm">Shopping Cart</a><br>  <!--- Link to "Checkout" page --->  <img src="/books/2/448/1/html/2/../images/Arrow.gif" width="10" height="9" alt="" border="0">  <a href="StoreCheckout.cfm">Checkout</a><br>  </td>  </tr>  </table>  &nbsp;<br> </cfoutput> 

This listing displays all the items for sale on the same page. If you will be selling many items, you might want to create an next-n interface for browsing through the merchandise in groups of 10 or 20 items per page. See Chapter 24, "Improving the User Experience," for information about how to build next-n interfaces.