Knowledgebase: Form Code & Javascript
Adding Multiple Items With One Button
Posted by Kyle on 17 December 2008 04:27 PM
Cart32 is able to accept multiple items being added to the cart with a single product form. This is accomplished by putting symmetrical product data within the same form. This article will include examples of how to put multiple products within a single form. Use the quick links below to find specific information about multiple item forms.

Note: Some of the options I use in the examples below may not be familiar to you. Please consult the articles on product options for more information about them.

Quick Links:
Creating A Simple Multi-item Form
Creating A Multi-item Form With Options
How To Test A Multi-item Form (When Getting Error 9 On Add To Cart)
Using The HTML Form Wizard To Create Multi-item Forms
Limitations To The Number Of Items In A Multi-item Form



Creating A Simple Multi-item Form
This article assumes you already know how to create regular product forms with standard options. If you do not, please read the KB article on Product Options - Standard. Before we create a multi-item form, let's start with an example of a single product form:

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem">
A Nice T-Shirt for $19.95
<input type="hidden" name="item" value="T-Shirt" />
<input type="hidden" name="price" value="19.95" />
<input type="submit" value="Buy Now" />
</form>


Adding The Qty Field
Since we'll be adding multiple items with a single button we don't want Cart32 to assume a quantity of 1 for each item. We instead need to offer a textbox or dropdown for the customer to be able to select how many of each item on the multi-item form they'd like. Let's modify our example above to include a quantity field:

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem">
A Nice T-Shirt for $19.95
<input type="hidden" name="item" value="T-Shirt" />
<input type="hidden" name="price" value="19.95" />

<input type="text" name="qty" value="0" />

<input type="submit" value="Buy Now" />
</form>

(Note: We used a value of 0 so the customer doesn't have to change all of the items he/she doesn't want on the form manually to zero.)

Adding A second Item To The Form
Now that we have a regular product form, we can add the fields to add our second product. We are going to make two modifications to the example for clarity and functionality.

First, we're going to add an HTML comment between the products to help keep them separate. This will take a few seconds, but could save you an hour of debugging the form later if there is a typo. Here is how we add HTML comments to separate the products:

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem">

<!--Product #1: T-Shirt -->

A Nice T-Shirt for $19.95
<input type="hidden" name="item" value="T-Shirt" />
<input type="hidden" name="price" value="19.95" />
<input type="text" name="qty" value="0" />

<!--Product #2: Hat -->
(hat info will go here, read on to next example)

<input type="submit" value="Buy Now" />
</form>


Now that we have comments to separate our two products we can fill out the information for the second item (our hat). To make things easy Cart32 simply uses the same field names as the first item in our multi-item form. This often confuses people because they don't know how Cart32 can tell what's what in the form. The answer is relatively simple: When you pass multiple fields with the same name they simply get posted as a comma-separated list. So Cart32 just splits them up and adds each item individually from the comma-separated list. Here is how we add the fields with the same names for our second product (a hat for $8.49):

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem">
<!--Product #1: T-Shirt -->
A Nice T-Shirt for $19.95
<input type="hidden" name="item" value="T-Shirt" />
<input type="hidden" name="price" value="19.95" />
<input type="text" name="qty" value="0" />
<!--Product #2: Hat -->

<br />
A Stylish Hat for $8.49
<input type="hidden" name="item" value="Hat" />
<input type="hidden" name="price" value="8.49" />
<input type="text" name="qty" value="0" />

<input type="submit" value="Buy Now" />
</form>

(Note: We still only have 1 input of type submit. You can have more submit (buy now) buttons if you want, but only one is required)

Congratulations! You just created a multi-item form. If you have more products you just follow the same steps as we did for adding a second product for each.

Special Note: The inputs are sent to Cart32 in a comma-separated list, as mentioned above. They are put in order as they appear in the form! For this reason you MUST keep your inputs for each product grouped together. If the input for price for your 2nd product comes before the price input for your 1st product in your form, then the price for the 2nd product will be used instead of the price for the 1st product and vice-versa.



Creating A Multi-item Form With Options
In the section above we took a simple, single-product form and turned it into a multi-item form. Let's take that final form and use it as our baseline to make changes to (to add options to). Here is the basic multi-item form we created for a T-Shirt and Hat:

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem">
<!--Product #1: T-Shirt -->
A Nice T-Shirt for $19.95
<input type="hidden" name="item" value="T-Shirt" />
<input type="hidden" name="price" value="19.95" />
<input type="text" name="qty" value="0" />
<!--Product #2: Hat -->
<br />
A Stylish Hat for $8.49
<input type="hidden" name="item" value="Hat" />
<input type="hidden" name="price" value="8.49" />
<input type="text" name="qty" value="0" />
<input type="submit" value="Buy Now" />
</form>


Important Information About Multi-item Form Options
We will assume you know how to add product options to a single product. If you do not, please read the articles named Product Options - Custom and Product Options - Standard. In the following examples we will be adding a standard option and then a custom option. The most important thing to note about options on multi-item forms is this: The options for any item in a multi-item form MUST exist for all items in the form. For example: if you have 3 products in your form and one of them has an option for weight, then you must put a weight option on the other 2 products. If you don't, Cart32 has no idea which product the weight option belongs to (remember, all information is sent in comma-separated lists).

Adding A Standard Product Option
Let's modify our basic multi-item form above to have a weight for each product. The T-Shirt will weight 2 pounds and the Hat will weight 0.7 pounds:

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem">
<!--Product #1: T-Shirt -->
A Nice T-Shirt for $19.95
<input type="hidden" name="item" value="T-Shirt" />
<input type="hidden" name="price" value="19.95" />
<input type="text" name="qty" value="0" />

<input type="hidden" name="weight" value="2" />

<!--Product #2: Hat -->
<br />
A Stylish Hat for $8.49
<input type="hidden" name="item" value="Hat" />
<input type="hidden" name="price" value="8.49" />
<input type="text" name="qty" value="0" />

<input type="hidden" name="weight" value=".7" />

<input type="submit" value="Buy Now" />
</form>


Adding A Custom Product Option
Now we will modify our multi-item form with a custom product option instead of a standard option. Luckily for us, it is very nearly the same thing. In the following example we will give the T-Shirt and Hat the option of a color. We will allow the customer to choose red, green, or blue from the dropdown for each product:

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem">
<!--Product #1: T-Shirt -->
A Nice T-Shirt for $19.95
<input type="hidden" name="item" value="T-Shirt" />
<input type="hidden" name="price" value="19.95" />
<input type="text" name="qty" value="0" />

Choose Color:
<select name="p1">
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>
<input type="hidden" name="t1" value="d-Color;Blue;Green;Red" />

<!--Product #2: Hat -->
<br />
A Stylish Hat for $8.49
<input type="hidden" name="item" value="Hat" />
<input type="hidden" name="price" value="8.49" />
<input type="text" name="qty" value="0" />

Choose Color:
<select name="p1">
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>
<input type="hidden" name="t1" value="d-Color;Blue;Green;Red" />

<input type="submit" value="Buy Now" />
</form>

Note: The option choices (red, green blue) do not have to be the same between products. You simply need to make sure the P# and T# fields are there for all products.)

Adding A Custom Product Option With Different Values
Let's say (using our example) that we wanted the T-Shirt to have a size option and the Hat should have a color option. We will still use P# and T# fields in order. Let's use the example we just made above and modify the T-Shirt section to have a size dropdown instead of a color option (we'll leave the Hat's option alone because it's staying a color option). To help fill out the example, we'll also make it so that ordering a Large shirt adds $2.00 to the price of the shirt. Here's how it would look:

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem">
<!--Product #1: T-Shirt -->
A Nice T-Shirt for $19.95
<input type="hidden" name="item" value="T-Shirt" />
<input type="hidden" name="price" value="19.95" />
<input type="text" name="qty" value="0" />

Choose Size:
<select name="p1">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large (add $2.00)</option>
</select>
<input type="hidden" name="t1" value="d-Size;Small;Medium;Large:price=+2.00" />

<!--Product #2: Hat -->
<br />
A Stylish Hat for $8.49
<input type="hidden" name="item" value="Hat" />
<input type="hidden" name="price" value="8.49" />
<input type="text" name="qty" value="0" />
Choose Color:
<select name="p1">
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>
<input type="hidden" name="t1" value="d-Color;Blue;Green;Red" />
<input type="submit" value="Buy Now" />
</form>


Adding Custom Product Options When Products Have Different Numbers Of Options
Typically multi-item forms have products that are all very similar and the options are either non-existent or similar in nature. However, some multi-item forms need each product to have a unique set of options. An example might be a starter kit for a training outfit. We will now create an example form with our T-Shirt and Hat, but they will have different numbers of options.

This sounds confusing, but the logic is very simple: make sure any fields you add exist in all products inside the form. We are going to give the T-Shirt the option of Size and Color and again, large size will increase the price by $2.00. We will give the Hat an option of Color only. To accomplish this (using the form directly above that we just made) we will add the dropdown list for Color to the T-Shirt form and then add a blank set of P# and T# fields for the hat (again, this is done to make sure each product has the same inputs and attributes when added to Cart32). Here is how it would look:

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem">
<!--Product #1: T-Shirt -->
A Nice T-Shirt for $19.95
<input type="hidden" name="item" value="T-Shirt" />
<input type="hidden" name="price" value="19.95" />
<input type="text" name="qty" value="0" />
Choose Size:
<select name="p1">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large (add $2.00)</option>
</select>
<input type="hidden" name="t1" value="d-Size;Small;Medium;Large:price=+2.00" />

Choose Color:
<select name="p2">
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>
<input type="hidden" name="t2" value="d-Color;Blue;Green;Red" />

<!--Product #2: Hat -->
<br />
A Stylish Hat for $8.49
<input type="hidden" name="item" value="Hat" />
<input type="hidden" name="price" value="8.49" />
<input type="text" name="qty" value="0" />
Choose Color:
<select name="p1">
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>
<input type="hidden" name="t1" value="d-Color;Blue;Green;Red" />

<input type="hidden" name="p2" value="" />
<input type="hidden" name="t2" value="" />

<input type="submit" value="Buy Now" />
</form>




Testing A Multi-item Form (When Getting Error 9 On Add To Cart)
Debugging a multi-item form can be tedious at best. The biggest problem to face is making sure all the fields for one product exist on all other products in the form. What we've done is created a special page that your form can submit to, to determine if all the fields for all the products exist. The following form is correct, but I am going to purposely leave out the highlighted line for price on the second item (our Hat) in the next section:

<form method="post" action="http://Cart32.com/cgi-bin/cart32.exe/test-additem">
<!--Product #1: T-Shirt -->
A Nice T-Shirt for $19.95
<input type="hidden" name="item" value="T-Shirt" />
<input type="hidden" name="price" value="19.95" />
<input type="text" name="qty" value="0" />
<!--Product #2: Hat -->
<br />
A Stylish Hat for $8.49
<input type="hidden" name="item" value="Hat" />

<input type="hidden" name="price" value="8.49" />

<input type="text" name="qty" value="0" />
<input type="submit" value="Buy Now" />
</form>


Now to test the form we just made above we'll modify the form's action url. We will specify a URL of http://www.Cart32.com/SupportTools/MultipleProductTest.asp. Notice also in the following form that we removed the highlighted price field from the second item like we said we would in the paragraph above. Here is how the bad form would look with the new testing URL in place:

<form method="post"
action="http://www.Cart32.com/SupportTools/MultipleProductTest.asp">
<!--Product #1: T-Shirt -->
A Nice T-Shirt for $19.95
<input type="hidden" name="item" value="T-Shirt" />
<input type="hidden" name="price" value="19.95" />
<input type="text" name="qty" value="0" />
<!--Product #2: Hat -->
<br />
A Stylish Hat for $8.49
<input type="hidden" name="item" value="Hat" />

(price input missing on purpose for this example)

<input type="text" name="qty" value="0" />
<input type="submit" value="Buy Now" />
</form>


You can see an example of what the page returns here. You will notice the price field has only one occurrence and all others have 2. The multipleproducttest page will even highlight which item is missing. This also works if you have custom options. This test page will point out which standard or custom options are missing. Having this information will allow you to focus on specific parts of the multi-item form to find out what is missing or typed incorrectly.



Using The HTML Form Wizard To Create Multi-item Forms
The HTML Form Wizard is able to create multi-item forms. Here are the steps to change this setting:
  1. Open the Form Wizard

  2. Click on the Tools menu and select Options

  3. In the Preferences section change the dropdown labeled Multiple Item Format to Multiple Items per form

  4. Click OK




Limitations To The Number Of Items In A Multi-item Form
There are no real limits to the number of items you can have in a product form. The only limitation we've ever seen is with the web server software serving Cart32 (IIS). There is a limit on the size of an HTML form that IIS will accept. The only time we've seen this be an issue is when a client used a script to generate a product form with around 250 products in it. If you find yourself having this same problem please contact your Cart32 service provider and see if they can verify this (and possibly remedy it by editing this IIS limitation).

(Note: Most hosting companies will not change this setting as it is there for security reasons.)
(147 vote(s))
Helpful
Not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments: