Custom Product Options

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
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=”Chris Stewart” />
<input type=”hidden” name=”t1″ value=”h-Representative;Chris Stewart” />
<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 Chris Stewart 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>

Log in