Hack 55 Add Dynamic Storefront Details

Extend a dynamic storefront by creating a product details page for each product you sell .

The product details page allows you to provide detailed information on a specific product, such as a description, weight, availability, or other tidbits to educate customers and increase sales.

Start with the code from [Hack #54] , which loops through all the products you have in your database table and displays them on your web page. For each product, the code displays the product name , price, and a corresponding purchase button.

First, add a line to display a link to another web page on which detailed product information for the item is displayed. In the link, pass the unique identifying field for that product to the details page in the id query string parameter, like this:

 <a href="detail.asp?id=<%=rsProducts("Id")%>>Product details, click here</a> 

The finished code looks like this:

 'While recordset still has products, loop code While NOT rsProducts.EOF Product: <%=rsProduct("item_name"%><br> Price: <%=rsProduct("item_price"%><br> <a href="detail.asp?id=<%=rsProducts("Id")%>>Product details, click here</a><br> Click the button below to Buy<br> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"                 method="post"> <input type="hidden" name="business" value="[e-mail]"> <input type="hidden" name="item_name" value="<%=rsProducts("item_name")%>"> <input type="hidden" name="item_number"                  value="<%=rsProducts("item_number")%>"> <input type="hidden" name="amount" value="<%=rsProducts("item_price")%>"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif"                 border="0" name="submit"> <input type="hidden" name="add" value="1"> </form> <br><br> 'Move to next record rsProducts.MoveNext( ) Wend 

5.12.1 Adding More Product Information to Your Table

In order to provide more information on your product, you have to add at least one more field to your database table. You can have as many fields as you like, including a weight field for shipping purposes, or even an item color field. Open the tblProducts database table and add a new column named description . Set the data type of this field to long text, ntext, or memo, depending on your database platform. Save the change to the database, and then open the table and begin entering product descriptions for each of your products. Descriptions should educate the customer on specific information related to this particular product and contain any information they should know before making a purchase.

5.12.2 Product Details Page

The product details page makes a call to your tblProducts database table for one specific record, determined by the id QueryString parameter passed from the storefront page:

 'Create and populate id variable for product Dim Id Id = Request.QueryString("id") 

Next, ask the database for the specific record for that item, based on the product's Id field, with an SQL query like this:

 "SELECT item_name, item_number, item_price, Id, description FROM tblProducts WHERE Id =  " & Id 

See the "Database Coding and Platform Choices" section of the Preface for the additional information needed to put this SQL statement to work with this and the other hacks in this book.

That query returns one record from your database table. Pull the returned record into a recordset named rsProducts . Keep the same recordset name you used on the storefront page, even though you are pulling in only one record. This provides consistency across your pages, so you can copy and paste code back and forth between pages. This means that since the recordsets share the same name, you can reuse the same code on both pages that reference recordset variables .

Giving your recordsets different names can be confusing and does not allow the two pages to share their code with one another. For instance, if you take the product name reference tag found in the storefront page ( <%=rsProduct("item_name")%> ) and paste it directly into the product detail page, it works properly without any editing.

You can now begin populating your page with the dynamic data used with the storefront page, as shown in Figure 5-9.

Figure 5-9. Adding details to a dynamic product page to present a more complete storefront

Take the code from your storefront and remove the While loop, because you have only one item to display. Then add the description field value for that item just below the button:

 Product: <%=rsProduct("item_name")%><br> Price: <%=rsProduct("item_price")%><br> <a href="detail.asp?id=<%=rsProducts("Id")%>>Product details, click here</a><br> Click the button below to Buy<br> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"                 method="post"> <input type="hidden" name="business" value="[e-mail]"> <input type="hidden" name="item_name" value="<%=rsProducts("item_name")%>"> <input type="hidden" name="item_number"                  value="<%=rsProducts("item_number")%>"> <input type="hidden" name="amount" value="<%=rsProducts("item_price")%>"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif"                  order="0" name="submit"> <input type="hidden" name="add" value="1"> </form> <br> <%=rsProducts("description")%> 

5.12.3 Hacking the Hack

This hack shows how to add a product description. However, the concept can be applied to any product-specific functionality you add to the page. For instance, you can add a function that allows the site visitor to send a link directly to the product details page to an email address. This is commonly referred to as a Send to Friend feature.

To implement this feature, you need to do two things. The first is to add a simple form that contains a text box in which to enter an email address of where to send the link to in the product details page. The second is to add a piece of code that actually performs the sending of the email and is located in a separate file named sendtofriend.asp . This example uses VBScript written for ASP pages. Here is the code to insert into the product details page:

 <form action="sendtofriend.asp" method="post"> Send this page to a friend. Enter the recipient's email address below: Recipient: <input type="text" name="email" value=""> <input type="hidden" name="Id" value = "<%=Request.QueryString("Id")%>"> <input name="" type="submit"> </form> 

And here's the sendtofriend.asp page code:

 <% Set objCDO = Server.CreateObject("CDONTS.NewMail") objCDO.From = "[e-mail]" objCDO.To = Request.Form("email") objCDO.Subject = "Link from web site" objCDO.Body ="Click the link to visit the web page                  http://yoursite.com/details.asp?Id=" & Request.Form("Id") objCDO.Send( ) %> <html> The link has been sent. </html> 

The first block of code allows the site visitor to enter the email address she wants to send the link to. It also places the product's unique identifier value into a hidden variable. The form posts itself to the second block of code found on another web page. This page simply sends a link to the specified recipient and includes a link to the product details page based on the product Id passed. The recipient can then click on the link in her email message to go directly to this product's details page.

Using this type of procedure, you add product-specific functionality to your product details page that can help you increase sales and provide customized information.