Creating a Multi-Product [Add to Cart] Button

You can use specially-designed page and product templates that let customers check boxes for items that they want to buy and then click one [Add to Cart] button to add them all to the shopping cart. The basic idea is that you are creating an HTML form. The opening and closing FORM tags must be in the page template, while the product template contains the HTML and custom tags to display each product with a checkbox. Both templates must be designed to work together and must be used together.

Here are simple page and product templates with comments to illustrate the structure required. You can copy and paste each one into a file and upload them to your store to see how they work. (After uploading the templates, you must assign pages and products to use these templates.) Note that the tag that makes this all work is the opening FORM tag that calls the shopping cart CGI with the post method.

Page Template

[--DEFINE LINK_TO_PAGE--]
<a href="[--OUTPUT_DIRECTORY_URL--]/[--Page.FileName--]">[--PAGE.LinkGraphic--]
<b>
[-- IF PAGE.LinkName--]
  [--PAGE.LinkName--]
[--ELSE--]
  [--PAGE.Name--]
[--END_IF--]
</b></a>
[--END_DEFINE LINK_TO_PAGE--]

[--DEFINE PAGE--]
#In order for this to work you must use custom templates for 
#both the page and products. The two templates are designed to 
#work together.
<HTML>
<BODY>
[-- PAGE.Name --]
<H2>This page demos the add to cart FORM</H2>
<p>Check the boxes of the product(s) you wish to order. 
Press the "Add to Cart" button and all checked products will 
be added to your shopping cart. You can also change the quantity 
of any checked product to order more than one if so desired.</p>
<HR>

# Start the Form. This custom template tag is very important!
<FORM action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method=post>

#Display Add to Cart and View Cart Buttons
<input type=image src="[-- OUTPUT_DIRECTORY_URL --]/media/add_to_cart.gif" 
width=83 height=20 alt="add_to_cart.gif" hspace=3 vspace=3 
border=0 align="bottom" name="Add to Cart" alt="Add to Cart">
<input type=image src="[-- OUTPUT_DIRECTORY_URL --]/media/view_cart.gif" 
width=71 height=20 alt="view_cart.gif" hspace=3 vspace=3 
border=0 align="bottom" name="View Cart" alt="View Cart">
<BR>

#Display the Products - The Products must us a special Template also
[--LOOP PRODUCTS --]
  [--PRODUCT--] 
[--END_LOOP PRODUCTS--]

# Set up hidden fields to pass values to the shopping cart
<input type=hidden name=storeid value=[-- STORE_ID --]>
<input type=hidden name=dbname value=products>
<input type=hidden name=function value=add>

# Display the Add to Cart and View Cart Buttons again
<input type=image src="[-- OUTPUT_DIRECTORY_URL --]/media/add_to_cart.gif" 
width=83 height=20 alt="add_to_cart.gif" hspace=3 vspace=3 
border=0 align="bottom" name="Add to Cart" alt="Add to Cart">
<input type=image src="[-- OUTPUT_DIRECTORY_URL --]/media/view_cart.gif" 
width=71 height=20 alt="view_cart.gif" hspace=3 vspace=3 
border=0 align="bottom" name="View Cart" alt="View Cart">

# End the FORM
</FORM>
</body>
</html>
[--END_DEFINE PAGE--]

Product Template

[-- DEFINE PRODUCT --]
#NOTE: No opening or closing FORM tags appear here-
#those must be placed in the PAGE Template

#Generate the checkbox - notice the name is itemnum 
#and its value is the database record number
<P><input type=checkbox name=itemnum value=[-- PRODUCT.RECORDNUMBER --]>

[--PRODUCT.Name--]
[--PRODUCT.Price--]

#if a Quantity is required generate the quantity box
[-- IF product.DisplayOrderQuantity? --]
  &nbsp;Quantity <input type=text size=2 name="[-- PRODUCT.RECORDNUMBER --]:qnty" 
value="1">
[-- END_IF --]

<BR>[-- Product.ProductDescription --]


# Generate the Ordering Option Menus
[-- IF PRODUCT.DisplayOrderingOptions --]
  <BR>
  [-- PRODUCT.OptionText --]
  [-- ORDER_OPTION_MENU LINE --]
[-- END_IF --]

</P>
[-- END_DEFINE PRODUCT --]