Knowledgebase: Form Code & Javascript
Product Options - Custom
Posted by Kyle on 11 December 2008 10:34 AM
Everyone has unique products and with that comes unique product options. Colors, sizes, scents, flavors; these are just a few of the product options that people need to make available to their customers.

Cart32 is able to specify virtually any product option with great flexibility. Use the quick links for more information about specific features.

Quick Links
Understanding The P# And T# Fields
Analyzing The Parts Of A P# And T# Field
Available Option Types
Changing Product Details Based On An Option



Understanding The P# And T# Fields
All options need two things: a selectable option field for the customer to choose from, and a list of option choices for Cart32 to display in the itemlist (in case the customer changes their mind and wants to update the item from within the cart). This is where the P# and T# fields come in. These fields will be set up as inputs on your product form. They will dictate which options are available to the customer for a given item.

What Do P and T Mean?
Remembering which field does what with the P# and T# fields can be difficult, so let's look at what each one does.
  • The P# Fields: The P in a P# field stands for Parameter. It specifies the parameter (option choice) passed to Cart32 during an Add To Cart. Without this, Cart32 has no idea of knowing which option choice (from the matching T# field) the user has selected.

  • The T# Fields: The T in a T# field stands for Type. It specifies the type (dropdown list, textbox, etc) of option that Cart32 should show in the itemlist along with the available option choices (which are in the value section of the T# field). The T# field is always hidden and always necessary.

To help keep P# and T# fields straight I often tell our customers to remember it like this:
P is the option choice Passed to the cart by the customer
T is what Tells Cart32 the available options for a product

How are P# and T# Fields Used Together?
When we say P# or T# we mean for the # sign to be replaced with an actual number. For example, if your product has only one option the two inputs you would create would be called P1 and T1. If you have 3 options on your product you would have P1, P2, P3 and T1, T2, T3 inputs respectively. This can go on for as long as you like. You can have as many options on a single product as you want!

What Order Should The P# and T# Fields Be In On A Product Form
Short answer: doesn't matter. You can put them any way you like. However, we recommend you keep the options grouped together as much as possible for readability and debugging. For example, keep your P1 and T1 fields close.

Can I Reuse The P# and T# Fields On Different Products?
Yes. Each product form is its own little world. Even if you have 100 products, each with 15 options, on a single page you can still reuse the P# fields between each product form. For example, you can't have P1/T1 twice in the same product form, but each product form on your page can have a P1/T1 option.
(Important Note: Your options can be in any order, but (for example) if you have three options the fields MUST be named P1/P2/P3 and T1/T2/T3. If you skip a number in your naming Cart32 will simply stop reading options at that point.)



Analyzing The Parts Of A P# And T# Field
Understanding how a P# and T# field work is pretty straightforward, especially if you have a grasp on HTML forms and how they submit. But even if you don't, we have some explanations here which should help clear things up and get you on your way to customizing your products.

Analyzing The P# Field
The first part of a P# field to analyze is the input type. This is what allows you to control the type of option that shows up to the customer. In the following example we use type text which means a textbox will show up for the customer to enter some text. Later in this article we will give more specific examples for the other option types (dropdown, radio box, checkbox, etc).
<input type="text" name="p1" value="" />

The second part of a P# field is the name. In this example we will assume the product only has one option, so this field is named P1:
<input type="text" name="p1" value="" />

The final part of the P# field is the value. This is the default value you want to show up. In our example we'll assume our T-Shirt is a Christmas shirt and we want to have "Merry Christmas" be the default personalization on it. We do so by changing the value like this:
<input type="text" name="p1" value="Merry Christmas" />

Analyzing The T# Field
The first part of a T# field is the type. This is always hidden. You never want your customers to see this input or mess with it. Here is an example with the type highlighted:
<input type="hidden" name="t1" value="t-Personalized Message" />

The second part of the T# field is the name. In this example we will assume the product has one option, so this field is named T1:
<input type="hidden" name="t1" value="t-Personalized Message" />

The final part of the T# field is the value. The value contains three parts which specify the option type, option name, and option choices.
<input type="hidden" name="t1" value="t-Personalized Message" />
t-: This tells Cart32 the option type is Textbox
Personalized Message: This tells Cart32 the options name
(Since our option was a textbox we don't have option choices. Otherwise there would be a semi-colon separated list of them after Personalized Message. More information and examples in the Available Option Types section of this article.)



Available Option Types
Cart32 is able to provide all option types to a customer. You can use text boxes, dropdowns, even hidden fields. Different options require different forms of customer input. The available option types are: dropdown list, textbox, multi-line textbox, checkbox, radio button, and hidden. I will now go over each option type, giving examples, in individual sections.

Dropdown List
By far and away the most common option type is the dropdown list. It allows the customer to choose from a prescribed set of option choices and they cannot deviate from that. This also makes updating prices, weights, and part numbers based on an option choice easy. We won't cover that in this section, it is covered in later sections of this article. We will, however, show how to create a dropdown box option.

The biggest difference with a dropdown list versus the other option types is we will use an HTML Select instead of an HTML input. In the following example we will assume this is a Color option for our T-Shirt product.

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

<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 T1 field now has d- in the value section instead of t-. This will inform Cart32 that the option type is a dropdown.

(Special Note: You don't have to match the text between the HTML Option tags to what is sent. The value portion of the option tag is what Cart32 will receive, so you can put anything between the tags you like. Just make sure your option values and your T# value choices match.)

Textbox
The second most popular option is the textbox. A textbox allows your customers to type in something. This is great for sites who use personalization on their items. The textbox option type is also the easiest to set up. In the following example we will be offering a textbox for a personalized message.

<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="p1" value="Enter Personal Message" />
<input type="hidden" name="t1" value="t-Personalized Message" />

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


Multi-Line Textbox
The multi-line textbox is popular in the same ways a textbox is because it allows customers to enter a custom option choice. However, a multi-line textbox allows the customer to put more than a single line in. In the following example we will be offering a multi-line textbox (technically called an HTML textarea) for a personalized message. We can even control how wide and tall the textbox is with the rows and cols attributes on the textarea.

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

<textarea name="p1" rows="4" cols="30" value="Enter Personal Message" />
<input type="hidden" name="t1" value="m-Personalized Message;30;4" />

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


Note that we use m- instead of t- in our t1 value to tell Cart32 the option is a multi-line textbox (textarea). Also, notice how the T1 value has ;30;4 after the option name? This tells Cart32 what size to make the textarea in the itemlist after the customer adds an item to the cart. The first number represents cols (columns) and the second number represents rows. These do not have to match what you put on your page. The textarea in the itemlist can be smaller or bigger according to your needs.

Radio Button
Radio buttons are a great way to display all available options at once and allow the user to only select one of them. Radio buttons work their magic by being assigned the same name. Earlier (above) we created a dropdown box with three option choices for our T-Shirt for its color. We will now do the same thing except we will use radio buttons. To display a radio button we simply change our HTML input type to radio. Here is an example:

<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="radio" name="p1" value="Blue" />Blue
<input type="radio" name="p1" value="Green" checked />Green
<input type="radio" name="p1" value="Red" />Red
<input type="hidden" name="t1" value="r-Color;Blue;Green;Red" />

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


Note how we used r- instead of t- in our T1 value to tell Cart32 the option is a radio button. Also notice how we gave all the options the same name of P1? By doing this the product page will only allow one option choice to be selected at a time. This helps prevent double-selection issues you might get using checkboxes. Finally, we used the keyword checked on the radio option choice Green; making it the default selected option choice.

Checkbox
Checkboxes are a great way to allow customer to select opt-in options. These are simple yes/no type options. In the following example we'll add a checkbox option to our shirt to include an extra button sown to the tag. Note that checkboxes always have a value of Yes.

<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="checkbox" name="p1" value="Yes" /> Include Free Button (Sown To Tag)?
<input type="hidden" name="t1" value="c-Include Free Button;Yes;No" />

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


Note how we used c- instead of t- in our T1 value to tell Cart32 the option is a checkbox. We also gave the checkbox only two options in our T1 field: Yes and No. By setting the P1 value to Yes that means Yes will be passed if the checkbox is marked; otherwise nothing is passed.

Hidden
Hiding an option may seem bizarre at first, but there are several good reasons. Hiding an option allows you to fill in the option with javascript or any other scripting you want to do and then pass that option along to the Cart without the customer ever seeing it. It will, however, show up to you when you go to view the order later.

For example: you might have 10 different sales reps all selling the same product for commission. Do you really want to have the customer enter the reps name when they order? You could just tell your reps to direct them to their own product page with a hidden option called representative (or whatever). This allows you to keep your product data consistent and still track commissions through the product options. In the following example we will create a hidden option that has a representatives name as a hidden option on our T-Shirt.


<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="hidden" name="p1" value="Kyle Harper" />
<input type="hidden" name="t1" value="h-Representative;Kyle Harper" />

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


Note how we use h- instead of t- in the T1 value to tell Cart32 the option is hidden. Also, we put a semicolon and the representatives name of Kyle Harper after the option name. This allows us to mandate that the option choice always be Kyle Harper when submitted from that product form.



Changing Product Details Based On An Option
Cart32 is able to modify some of the basic attributes of a product depending on the options selected by the customer. The attributes you can change are price, partno, and weight. In all of our examples we will use the basic T-Shirt example with a dropdown option for Size. Here is how the basic code (without any price/partno/weight changes) would look:

<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" />
<select name="p1">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
<input type="hidden" name="t1" value="d-Color;Small;Medium;Large" />
<input type="submit" value="Buy Now" />
</form>



Price
The most commonly changed product attribute is price. Often times options represent additional items or special features which cost more to provide. In our example the size of the shirt dictates the amount of material and time required to create the shirt. Larger sizes will require a higher price. We need to modify the product form code to increase the price of the various shirt sizes.

There are two ways to do this: direct price entry and price adjustment. Using direct price entry we simply state the price is $XX.xx. Using price adjustment we say the price is -$X.xx (off the original price field). The way to indicate either is by putting a colon after the option choice in our T# field value followed by the price (or price adjustment). The following is an example of the same form above, except we enter direct prices for the sizes above small (small is just $19.95). Medium will be $21.95 and large will be $23.95.

<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" />
<select name="p1">
<option value="Small">Small</option>
<option value="Medium">Medium
($21.95)</option>
<option value="Large">Large
($23.95)</option>
</select>
<input type="hidden" name="t1"
value="d-Color;Small;Medium:price=21.95;Large:price=23.95" />
<input type="submit" value="Buy Now" />
</form>


This next example will increase the prices so that they give the same $21.95 and $23.95 prices for medium/large, but we will do it using +X.xx to indicate the amount to increase the price by. (Note, you can use the minus sign if your option decreases the price too)

<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" />
<select name="p1">
<option value="Small">Small</option>
<option value="Medium">Medium
(Add $2.00)</option>
<option value="Large">Large
(Add $4.00)</option>
</select>
<input type="hidden" name="t1"
value="d-Color;Small;Medium:price=+2.00;Large:price=+4.00" />
<input type="submit" value="Buy Now" />
</form>


PartNo
Changing a product option can often times change the part number of the item. For this reason, Cart32 allows you to modify the PartNo that is sent to the cart if certain option choices are selected. Let's take our T-Shirt example again and modify it. First, we'll give it a default PartNo of Shirt-SM (for small T-Shirt).

<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="hidden" name="partno" value="Shirt-SM" />

<select name="p1">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
<input type="hidden" name="t1" value="d-Color;Small;Medium;Large" />
<input type="submit" value="Buy Now" />
</form>


Now, let's add unique part numbers to our T# value field after each option choice. We'll use Shirt-Sm, Shirt-Med, and Shirt-Lg for small, medium, and large, respectively.

<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="hidden" name="partno" value="Shirt-SM" />
<select name="p1">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
<input type="hidden" name="t1"
value="d-Color;Small:partno=Shirt-Sm;Medium:partno=Shirt-Med;Large:partno=Shirt-Lg" />
<input type="submit" value="Buy Now" />
</form>


(Note: We didn't change the options in our dropdown because there's no need to tell the customer we're changing the partno. They don't care)

Weight
Changing a product option can often times change the weight of the product. This is important to track because most E-commerce sites have to ship their products and more weight means more shipping charges. Cart32 allows you to change the weight of your product based on the option choice the customer selects. First, let's take our original example and add a weight to the product which will be equal to the small shirt weight (default selected option).

<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="hidden" name="weight" value="2" />

<select name="p1">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
<input type="hidden" name="t1" value="d-Color;Small;Medium;Large" />
<input type="submit" value="Buy Now" />
</form>


Now that we have a default weight of 2 pounds (the weight of the default selected shirt, small) we can add special weights based on other option choices. Let's change our product form to make small, medium, and large weigh 2, 3, and 4 pounds, respectively.

<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="hidden" name="weight" value="2" />
<select name="p1">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
<input type="hidden" name="t1"
value="d-Color;Small:weight=2;Medium:weight=3;Large:weight=4" />
<input type="submit" value="Buy Now" />
</form>


(Note: We didn't change the options in our dropdown because there's no need to tell the customer we're changing the weight. They'll see this reflected in their itemlist in the aggregate weight section of the subTotals table).

Changing Multiple Attributes And/Or Excluding Some Choices
Not all option choices have to update some part of the product. In our example we could easily have said that Small and Medium were the same price, and only large cost more. In that case we would have simply modified the T# value field for the large option. Here's an example of how it would look:

<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" />
<select name="p1">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large
(Add $4.00)</option>
</select>
<input type="hidden" name="t1"
value="d-Color;Small;Medium;Large:price=+4.00" />
<input type="submit" value="Buy Now" />
</form>


Also, You can combine attributes however you need. Let's say we need to change the price, partno, and weight of the product based on the size of the shirt selected. This is done by simply creating a comma-separated list of the attributes and their values in the T# value field. Let's combine all of the example changes we did above and create a product form that will update all three attributes when an option choice is made:

<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" />
<select name="p1">
<option value="Small">Small</option>
<option value="Medium">Medium
(Add $2.00)</option>
<option value="Large">Large
(Add $4.00)</option>
</select>
<input type="hidden" name="t1" value="d-Color;Small:price=+0.00,partno=Shirt-Sm,weight=2;
Medium:price=+2.00,partno=Shirt-Med,weight=3;Large:price=+4.00,partno=Shirt-Lg,weight=4"
/>
<input type="submit" value="Buy Now" />
</form>

(220 vote(s))
Helpful
Not helpful

Comments (10)
Sharon Ebner
15 June 2011 07:29 PM
I want to be able to change the "item" and :price" using a radio button, because our packages come in different quantities and we need the number of items in the item name. Would that be possible?
Chris Stewart
27 June 2011 08:57 AM
@Sharon,

From what you're saying, I'm assuming you want to have radio buttons that will change the item and then subsequently the price of the option. If so, this is very doable. Your code for the radio buttons should look similar to this:

<input type=radio name="p1" value="Item 1">Item 1<br>
<input type=radio name="p1" value="Item 2">Item 2<br>
<input type=radio name="p1" value="Item 3">Item 3<br>
<input type=hidden name="t1" value="r-Item;Item 1:partno=Item1,price=10;Item 2:partno=Item2,price=15;Item 3:partno=Item3,price=20">

In this example, the radio buttons would read Item 1, Item 2, and Item 3, and then each choice would set the price to $10, $15, and $20, respectively.

If this isn't what you were wanting to do, please send us an email at support@cart32.com so we can better help you!

Thanks!
Mary Kirtland
21 July 2011 07:52 PM
Let's say I have two option values to include in t1 as a dropdown list:
Mary's Example
12" Example

what is the correct way to encode the ' and " in t1 value so they will both display properly in the item list *and* in order emails, etc.? &apos; seems to work for ', but neither &quot; nor &#34; seem to work for " - in this example the dropdown would include a 12" option and a Example option.
Chris Stewart
22 July 2011 08:01 AM
@Mary

Since you already have one working for the apostrophe, try using either &#8220; or &#8221; for the quotation. Though, I've never personally had issues with using &quot;

If you're still having issues with this, email us at support@cart32.com!

Thanks!
Anne
12 January 2012 08:58 PM
I would like to have the product image appear in the shopping cart when the product is added to the cart. Where do I do this?

Thanks!
Chris Stewart
13 January 2012 09:00 AM
@Anne

You would probably benefit better from this knowledgebase article:
https://support.cart32.com/index.php?/Knowledgebase/Article/View/38/0/a-guide-to-basic-form-code

There, you should see information on an Image hidden input value. That is what you will use to add product images within the cart in Form Code.
Dee Dee Mares
15 January 2012 06:15 AM
My site uses a drop down box to allow an option choice like scent. Unfortunately many customers do not make a selection and I receive a base part number code which does not indicate the scent. How can I best handle that - is there an error message that would bring it to their attention - a must choose message or would radio buttons be easier for them to grasp.
Chris Stewart
30 January 2012 12:51 PM
@Dee Dee, unfortunately, this cannot be done with form code alone as it is basic HTML and not a scripting language. However, we have done this for many clients through JavaScript from our development team. You can get in touch with them by filling out the following form:
http://www.cart32.com/inquiry.asp

They will be able to you help you get this input validation set up!
Robert Vernice
07 March 2012 10:19 AM
I have a select option with two values.
<select name="p1">
<option value="Regular">Regular</option>
<option value="Polarized">Polarized</option>
</select>
I have set up the t1 hidden input field
as such value="d-lense; Regular;Polarized"

However when the user selects the lenses type from the select dropdown on the page, and proceeds to the cart, the selected option is not displayed.
Another dropdown is displayed with the default options specified in the T1 field, forcing the user to again select their desired choice.

Any reason why the initial selection is not displayed in the cart?

Thank you
Chris Stewart
14 March 2012 09:37 AM
@Robert

Without seeing the whole form code to see what you have set up, it's hard to figure out what is wrong. However, using the following p1/t1 values in a test form code resulted in a successful add to cart with the appropriate option selected:
<select name="p1">
<option value="Regular">Regular</option>
<option value="Polarized">Polarized</option>
</select>
<input type="hidden" name="t1" value="d-lense;Regular;Polarized">

If you continue to have issues with this form code you can email us at support@cart32.com with the full form that you are using.
Post a new comment
 
 
Full Name:
Email:
Comments: