Hack 56 Insert Dynamic Images

Include product images with your dynamic storefront and use it to activate the PayPal payment process .

Once you've added dynamic storefront details [Hack #55] to your site, you can include a product image that can be used as a PayPal button, as shown in Figure 5-10. The idea is that customers typically look for the most obvious object to click when they're interested in a product, and turning the product image into a PayPal button is an effective way to get more customers to complete purchases.

Figure 5-10. Displaying an image with your product information

5.13.1 Inserting the Image

Start by adding another database table column, image_file , to the tblProducts table created in [Hack #54] and populating it with the location (filename) of the image file to be displayed. So, for your widget, you might enter widget.jpg .

Next, take the code from [Hack #55] and add the image_file column to your SQL query:

 "SELECT item_name, item_number, item_price, Id, description, image_file                  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.

Then add your image file reference code to display the image on your product details page using the following line:

 <img src="images/products/<%=rsProducts("image_field")%>"> 

In this example, the product images are stored in /images/products . Insert this code in your page to include the dynamic image, just above the item name :

 <img src="images/products/<%=rsProducts("image_field")%>"> 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> <%=rsProducts("description")%> 

5.13.2 Link the Image to PayPal

To use the product image as a PayPal payment button, duplicate the purchase button code and replace the Buy Now image with the location of your product image [Hack #29] . The resulting 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="images/products/<%=rsProducts("image_field")%>""                 border="0" name="submit"> <input type="hidden" name="add" value="1"> </form> 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> <%=rsProducts("description")%> 

Of course, you might want to link the product image to a larger version of the image, a list of other products by the same manufacturer, or a page containing further details of the product. However, be careful not to discount the power of a big fat payment button on every product page: the easier it is for your customers to pay, the more likely they'll give you their business.