Hack 54 Create a Dynamic Storefront

Produce a powerful storefront with a simple database and dynamic server scripting .

PayPal's Button Factory makes managing a small web store easy, provided that you have a small number of products. But if your store has hundreds or thousands of products, generating the necessary HTML code through the Button Factory (not to mention later changing that code) would be a daunting task. Therefore, you'll need a method to quickly generate generic shopping cart HTML button code for all your store's products.

This hack provides an ideal situation for a database-driven page that can use a single page as a template for an arbitrary number of products contained in a database. The example illustrates the techniques using Microsoft Active Server Pages written in VBScript with an Access database, though the principles described here can be applied to any server platform/database combination.

5.11.1 Creating the Storefront Database

The first step in building your dynamic site is to create a database table that holds your PayPal button values for all your products. You'll need one column for each unique aspect of the button for each product: item_name , item_number , item_price , and Id . Both item_name and item_number should be text fields, while item_price should be a money (or currency) field. Finally, include the Id field as the primary key and set it to increment automatically.

Save this new database table as tblProducts , as shown in Figure 5-7. Your table can have more rows, including shipping information, return URLs, or tax data, depending on the variables you are using for your buttons .

Figure 5-7. The database table containing your product information

See the "Database Coding and Platform Choices" section of the Preface for database considerations.

Once the table is built and saved, populate it with your product data. You can enter the information into the table like a spreadsheet or import the data from another source. After the data is entered, your database is ready for use in your dynamic page.

5.11.2 Building the Template

The second step in creating your storefront is to generate generic HTML Button Factory code [Hack #28] to serve as your template for your database-driven store. Your button code should look something like this:

 <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="Widget"> <input type="hidden" name="item_number" value="Wid-001"> <input type="hidden" name="amount" value="1.00"> <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> 

The storefront page displays all the items for sale by taking the information in your tblProducts database table and dynamically inserting it into the generic PayPal Button Factory code you just created. To get started, use a SQL query to retrieve the product information. Depending on the server platform, languages supported, and database technology used, the syntax to connect to the database and return the data will vary. The SQL query to create your recordset should look like this:

 SELECT item_name, item_number, item_price, Id FROM tblProducts 

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.

Your database then returns all of the products in the table, which you'll need to place into a recordset called rsProducts .

Next , take the generic button code from the previous step and replace the field values with references to fields in your database. For instance, change this line:

 <input type="hidden" name="item_name" value="Widget"> 

to this ( assuming you're using VBScript for ASP, as discussed in the Preface):

 <input type="hidden" name="item_name" value="<%=rsProducts("item_name")%>"> 

Your final code should look something like this:

 <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> 

When this page is loaded into a web browser, your server executes the SQL query before it is presented to the customer. The code then pulls the first item from the recordset and generates the button code for the corresponding product dynamically. The next step is to generate a whole page of buttons, one for each item in your database:

 'While recordset still has products, loop code While NOT rsProducts.EOF <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> 'Move to next record rsProducts.MoveNext( ) Wend 

Figure 5-8 shows the finished product listing, complete with multiple dynamically generated payment buttons.

Figure 5-8. The finished web page, loaded into a browser

5.11.3 Including Product Details

Not only can you use the values returned from the database to populate your button code, you can also display the item name and price (and perhaps a photo) of the product alongside each button. Add a little spacing to the buttons to keep the site organized:

 'While recordset still has products, loop code While NOT rsProducts.EOF Product: <%=rsProduct("item_name"%><br> Price: <%=rsProduct("item_price"%><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( ) Yound 

This simple technique can serve as the foundation for a powerful eCommerce web site. Simply by managing this one template page and a database table, you can build a site that supports an arbitrary number of products, without needing to manually create and edit individual product pages.