Custom Product Options

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.

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.

Multi-Line Text Box

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.

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:

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.

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.

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.

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.

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)

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).

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.

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).

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.

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.