A Basic Item HTML Form

•Basic HTML Product Form
•Optional Form Fields

TOPICS COVERED
Changing Where The CONTINUE SHOPPING button takes a visitor
Setting Up Taxable and Non-Taxable Items

•Setting Up Per Item Quantity Discounts
•Product Attributes

A Basic Item HTML Form.

TechCart uses hidden form fields in your HTML file to realize the product information in your store. We have provided a tool to generate these forms for you. (Form Code Generator). This tool will ask you several questions and then generate the html to add into your HTML. We recommend using this but in case you want to know the workings of the code it is explained further here. It is assumed that you have a general knowledge of HTML and forms.

The following are the minimum fields required to generate a basic item. The following code would add the correct form fields to a page for a College Dictionary costing 14.95 with a product id code of 123-45.

(you would replace the urls to match your installation needs)

The web page of this code would look like this:

You would obviously add in additional HTML to display the product information to the web page visitor.

A breakdown of the code is as follows:

<form method="POST" action="http://www.tech-host.com/cgi-bin/bin1/cart.cgi">

This is the location of the shopping cart software.

<input type="hidden" name="com" value="add">

This instructs the software to "add" the item to the cart. com stands for command. You may change the value of "com" to "AddSecret" to add the item to the cart without the confirmation screen or 'AddView' to display the VIEW CART screen when the item is added.

<input type="hidden" name="un" value="demo">

This line lets the TechCart software know what username is accessing the software. In the example we use the user name demo. You would change the value="demo" to value="username".

<input type="hidden" name="pid" value="123-45">

This tells the TechCart software the product number or SKU# of the item being added to the cart. This field is recommended however it is optional. In this example the product ID is "123-45".

<input type="hidden" name="price" value="14.95">

This tells the TechCart software the price of the item being added to the cart. This field is required. In this example the price of the item is $14.95. Do not use a dollar sign ($) in this field. if you do your totals will not be calculated correctly.

<input type="hidden" name="desc" value="College Dictionary">

This field tells the TechCart software the one line description of the item being added to the cart. This should be brief and to the point. This will be what appears on the invoice. In the example the item description is "College Dictionary"

<input type="text" name="qty" size="4">

This field displays the Quantity box. The "type" field can be changed from "text" to "hidden" and a value= field can be added if you wanted to default the quantity to 1 or some other number.

<input type="submit" value="Add To Cart">

This displays the add to cart button.

Optional Fields.

Now that we understand the minimum required fields to generate a form for an item, here are some additional fields:

BACK:
The BACK field should be used if you do not want the shopper to return to the catalog last page they were on when they press 'CONTINUE SHOPPING'. This should be a full url to the page you wish to display.

EXAMPLE HTML:
<input type="hidden" name="back" value="http://www.techcommerce.com/docs/pagecode.html">

This tells the TechCart software where it should go if a user selects "continue shopping" from the "Item Added To Cart" confirmation screen. This is also used to tell the TechCart software what page to load if you have specified "AddSecret" in the "com" field to turn off confirmations.

TAX:
TechCart allows you to specify if an item is taxable or not. If the tax field is not specified TechCart will assume that the item is taxable based on the tax rates you have already setup. If the TAX field is specified as 'N' then TechCart will not add tax for that particular item. This allows the store owner to sell a mix of taxable and non-taxable items. The allowed values for TAX are 'Y' and 'N'.

EXAMPLE HTML:
<input type="hidden" name="tax" value="Y">

Setting Up Per Item Quantity Discounts.

You can now specify quantity discounts on a per item basis. You can specify as many discount levels as needed. For example, you can say the base price of an item is $5.00
10 or more is $4.00
20 or more is $3.00
and so on...

TechCart will remember these discount levels and if a user changes the quantity in the shopping cart the correct discount will be applied.

To accomplish this you would setup the form on your page as you normally would (see above). Then you would add the following hidden fields.

And so on..

The discqty_X field defines the quantity level and the discprice_X defines the price for that level. For a single level the hidden fields are named discqty_1 and discprice_1. The next discount level would be labeled discqty_2 and discprice_2.

So a completed product form with multiple discount levels may look like:

The above would appear on the page like:

The above works... give it a try
The form is setup for the following discount levels:
1-9=$99.00
10-19=$89.95
20-29=$79.95
30+ = $69.95

The working example above demonstrates how to use multiple attributes inlcuding the comment field attribute. The comment field attribute allow the shopper to type in the specs of the product they desire. In our example above it is what they want to be printed on the nameplate. The comment field attribute particularly useful for custom items.

Below we explain how this is done. The first section of the HTML code is explained in the section "BASIC ITEM HTML"..

<p>Nameplate : 55.00<br>

Here is the first attribute. You will note selecting a different size will change the price.

Size <select name="attr_1" size="1">
      <option selected value="Medium:*:0.00:*">Medium</option>
      <option value="Small:-:1.00:*">Small Subtract $1.00</option>
      <option value="Large:+:2.50:*">Large Add 2.50</option>
</select><br>

In the above attribute example a selecting a small will subtract $1.00 from the base price, selecting a large will add $2.50 to the base price. The value of a product attribute is broken down into three parts separated by a colin:

1) the text description of the attribute (in the above example it is Small, Medium or Large.
2) How to Handle The Attribute Your Options are +: to add to the base price, -: to subtract from the base price, *: do nothing with the price, c: this is a comment field (explained below).

Below is the second attribute, COLOR, this option does not change the price of the item.

Color <select name="attr_2" size="1">
       <option selected value="Red:*:0:*">Red</option>
       <option value="Yellow:*:0:*">Yellow</option>
     </select><br>

Now is the comment field attribute. As you notice you want a hidden field attr_X that tells the shopping cart that this attribute is a comment field, hence the value=":c:0.00*"

<input type="hidden" name="attr_3" value=":c:0.00:*">

Next you will want to display the textbox that the user types in. This can be any size you want but must named comment_# (replace # with the attribute number).

Name: <input type="text" name="comment_3" size="20"></p>

<BR>

And finaly display the quantity box and add to cart button.

<input type="text" name="qty" size="5">
<input type="submit" value="Add To Cart"></p>

</form>

TechCart allows for as many attributes as needed for your product. The attributes can be used in any combination so long as you start at attr_1 and increment each attribute accordingly (attr_2, attr_3, attr_4 and so on.).

Warning: include(/home/tnl/www/tcntotalsolutions/foot.inc) [function.include]: failed to open stream: No such file or directory in /home/tnl/www/docs/tc/2x/html.php3 on line 390

Warning: include() [function.include]: Failed opening '/home/tnl/www/tcntotalsolutions/foot.inc' for inclusion (include_path='.:/usr/share/php:/usr/share/pear') in /home/tnl/www/docs/tc/2x/html.php3 on line 390