The Standard AmeriCart

Our "classic" implementation is heavily commented with information about each example. It is useful for understanding concepts or just finding a method that matches your product organization.

Image
Watch

Here is a single item in a one row table using a variable size/price option. The hidden variable "item" contains the keyword "op1" in the price field instead of a legal price. This tells the cart to parse the select variable named "op1" to obtain the price. Notice that the select drop down has a size and price separated by a space dash space. Use this format to insure correct parsing by the cart. Any of the option variables op1 - op44 can be used to price an item.


<form action="http://www.cartserver.com/sc/cart.cgi" method="post">
   <table border="0" cellspacing="0" cellpadding="4">
     <tr bgcolor="#F0F0F0">
      <td>
         <input type="hidden" name="item" value=
         "s-8882^widgeta^Wacky Widget A^op1^1^^^^1.2^http://www.americart.com/sc/widgeta.gif" />
         <!--When changing the item var, don't disrupt the field count:
         "cart-id^partnumber^description^cost^quantity^per_item_shipping^insurance_fee^unit_of_measure^ship_weight^photo_FULL_url"
         Don't remove the ^ field separator when leaving a field blank. -->
          Wacky Widget A
      </td>
      <td>
        <select name="op1">
         <option selected="selected" value="=error= You must select a metal type for this product.">Select Metal</option>
         <option value="tin - $9.99">tin - $9.99</option>
         <option value="123|steel - $11.25">steel - $11.25</option>
         <option value="gold - $18.54">gold - $18.54</option>
        </select>
      </td>
      <td>
        <input type="image" border="0" name="add" src="/images/addtocart.gif"   />
      </td>
     </tr>
   </table>
</form>

Image
Scarf
Hardened
(add $3.00)
Deburred
(add $2.20)

Here is another single item in a one row table with variable options. The hidden variable "item" contains the keywords "op1op12op4" instead of a legal price in the price field. This tells the cart to parse the selections named "op1", "op12", and "op4" (in that order), and sum up all associated costs to obtain the item price. To not add cost to an item for an option, make the value "hardened - $0.00".


<form action="http://www.cartserver.com/sc/cart.cgi" method="post">
   <table border="0" cellspacing="0" cellpadding="4">
     <tr bgcolor="#F0F0F0">
      <td>
         <input type="hidden" name="item" value=
         "s-8882^widgeta^Wacky Widget A^op1op12op4^1^^^^1.2^http://www.americart.com/sc/widgeta.gif" />
         Wacky Widget A
      </td>
      <td>
        <select name="op1">
         <option selected="selected" value="=error= You must select a metal type for this product.">Select Metal</option>
         <option value="tin - $9.99">tin - $9.99</option>
         <option value="steel - $11.25">steel - $11.25</option>
         <option value="gold - $18.54">gold - $18.54</option>
        </select>
      </td>
      <td>
        <input type="checkbox" name="op12" value="hardened - $3.00" />Hardened<br />
        (add $3.00)
      </td>
      <td>
        <input type="checkbox" name="op4" value="deburred - $2.20" />Deburred<br />
        (add $2.20)
      </td>
      <td>
        <input type="image" border="0" name="add" src="/images/addtocart.gif"   />
      </td>
     </tr>
   </table>
</form>

Part number Item Description select desired material click to add to cart
widgeta Wacky Widget A

<form action="http://www.cartserver.com/sc/cart.cgi" method="post">
    <table border="1" cellspacing="0" cellpadding="3">
      <tr bgcolor="#F0F0F0">
        <td>
          Part number
        </td>
        <td>
          Item Description
        </td>
        <td>
          select desired material
        </td>
        <td>
          click to add to cart
        </td>
      </tr>
      <tr>
        <td>
            <input type="hidden" name="item" value="s-8882^widgeta^Wacky Widget A^op1^1" /> widgeta
        </td>
        <td>
          Wacky Widget A
        </td>
        <td>
          <select name="op1">
            <option selected="selected" value="tin - $9.99">tin - $9.99</option>
            <option>steel - $11.25</option>
            <option>gold - $18.54</option>
          </select>
        </td>
        <td>
          <input type="image" border="0" name="add" src="/images/addtocart.gif"   />
        </td>
      </tr>
     </table>
</form>
Part number Item Description select desired material click to add to cart
widgetb Wonderful Widget B

<form action="http://www.cartserver.com/sc/cart.cgi" method="post">
   <table border="1" cellspacing="0" cellpadding="3">
      <tr bgcolor="#F0F0F0">
        <td>
          Part number
        </td>
        <td>
          Item Description
        </td>
        <td>
          select desired material
        </td>
        <td>
          click to add to cart
        </td>
      </tr>
      <tr>
        <td>
            <input type="hidden" name="item" value="s-8882^widgetb^Wonderful Widget B^op1^1" />
            widgetb
        </td>
        <td>
          Wonderful Widget B
        </td>
        <td>
          <select name="op1">
            <option selected="selected">bronze - $8.99</option>
            <option>pewter - $10.99</option>
            <option>iron - $12.99</option>
            <option>silver - $15.99</option>
            <option>brass - $19.99</option>
            <option>gold - $23.99</option>
          </select>
        </td>
        <td>
          <input type="image" border="0" name="add" src="/images/addtocart.gif"   />
        </td>
      </tr>
    </table>
</form>

This example has the same basic cart functionality as the one above, but illustrates a table of similar products usefulto present many items in a small space. Notice that each row in the table containing product is actually a small form totally independent from adjacent rows.


This example illustrates a way to use the product picture as an add to cart button.


This Purse is just $6.32.

(Click the image to place in cart.)


<form action="http://www.cartserver.com/sc/cart.cgi" method="post">
  <input type="hidden" name="item" value="s-8882^widgeta^Wacky Widget a^6.32^1" />
  <input align="left" border="0" type="image" name="add" src="widgeta.gif"  height=
  "87" />
</form>

Image
Quantity: Engrave Initials:

This example illustrates a way to allow the customer to place more than one thing in their cart using a select drop down. In the quantity field of the hidden "item" variable, enter the name of the select. (op2 in this example). There is also a simple usage of a text box to allow the shopper to add text to the item description.


<form action="http://www.cartserver.com/sc/cart.cgi" method="post">
   <input type="hidden" name="item" value="s-8882^widgetb^Wonderful Widget B^6.32^op2" />
   Quantity: 
   <select name="op2">
      <option selected="selected">1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
   </select>
   <hr />
   Engrave Initials: <input type="text" size="3" maxlength="3" name="op24" />
   <hr />
   <input border="0" type="image" name="add" src="/images/addtocart.gif"   />
</form>

Image
qty:

This example illustrates a way to allow the customer to place an arbitrary number of an item in the cart using a text box. In the quantity field of the hidden "item" variable, we put the name of the variable for the text box. (op2 in this example). Just to spice it up, we threw in two extra options (op4 & op1). They're not marked for parsing in the hidden variable, and so are just appended to the description. Notice that even though op4 comes before op1 in the source, op1 is appended to the description first in the cart.


<form action="http://www.cartserver.com/sc/cart.cgi" method="post">
   <table align="right">
     <tr>
      <td>
         <input type="hidden" name="nodash" value=" " /> 
         <!-- little trick to not use dash separators in item description.
       We don't need them for this item since we are using br tags
       in the select pull downs to make the descriptions pretty. -->
          <input type="hidden" name="item" value="s-8882^widgeta^Wacky Widget A^6.32^op2" />
         qty:<input name="op2" size="2" value="1" /> <select name="op4">
           <option selected="selected" value="<br>Size: small">small</option>
           <option value="<br>Size: medium">medium
           </option>
           <option value="<br>Size: large">large</option>
         </select> <select name="op1">
           <option selected="selected" value="<br>Metal: tin">tin</option>
           <option value="<br>Metal: steel">steel</option>
           <option value="<br>Metal: gold">gold</option>
         </select>
      </td>
     </tr>
     <tr>
      <td>
        <input align="right" type="image" name="add" src="/images/addtocart.gif" />
      </td>
     </tr>
   </table>
</form>

Here are the standard implementations for viewing cart contents and going to checkout. These can appear anywhere on your site you wish, but be sure not to put them inside another <form></form> construct. (Nesting forms is a bad thing!)


<form action="http://www.cartserver.com/sc/cart.cgi" method="post">
   <table>
     <tr>
      <td>
         <input type="hidden" name="item" value="s-8882" /> <input type="image" border="0" name=
         "checkout" src="/images/checkout.gif"   />
      </td>
      <td>
        <input type="image" border="0" name="view" src="/images/viewcart.gif" />
      </td>
     </tr>
   </table>
</form>

Copyright. All rights reserved. Americart - 2011