WORLDWIDE MULTIMEDIA

Examples
Adding Items to the Shopping Basket
from a FORM

Let's continue with the "Bob's Bar-B-Que" store and show different ways of offering product selection options to the user.

When using a FORM to reference the engine, the HTML is slightly different. Instead of embedding the function, Vendor ID and tokens on the URL command line, they are listed as hidden fields inside the form.

Take a look at this example:

ORDER:
 bottles of Bob's Bar-B-Que Sauce (plastic bottle)
bottles Bob's Bar-B-Que Sauce (glass bottle)

In the above example, we've specified two distinct products with different ID numbers for the glass and plastic versions of the Bar-B-Que sauce. Also note that we've made the "iqty" field user-selectable so that a specific quantity can be selected at the time of adding the item to the basket. Another change is that with a FORM, you can have the user add more than one item at a time with a single selection.

Here is what the HTML looks like:
<FORM METHOD="post" ACTION="http://order.icorp.net/mpr/mo2">
<INPUT TYPE="hidden" NAME="c_sample" VALUE="1">
<INPUT TYPE="hidden" NAME="function" VALUE="add">
ORDER:<BR>
<INPUT TYPE="hidden" NAME="item" VALUE="1000">
<INPUT SIZE=2 NAME="iqty" VALUE="0"> bottles of Bob's Bar-B-Que Sauce (plastic bottle)
<INPUT TYPE="hidden" NAME="iunit" VALUE="1.95">
<INPUT TYPE="hidden" NAME="iname" VALUE="Bob's Bar-B-Que Sauce (plastic bottle)">
<BR>
<INPUT TYPE="hidden" NAME="item" VALUE="1001">
<INPUT SIZE=2 NAME="iqty" VALUE="0"> bottles Bob's Bar-B-Que Sauce (glass bottle)
<INPUT TYPE="hidden" NAME="iunit" VALUE="1.95">
<INPUT TYPE="hidden" NAME="iname" VALUE="Bob's Bar-B-Que Sauce (glass bottle)">
<BR>
<INPUT TYPE="submit" VALUE="Add the above items to my shopping basket">
</FORM>

Be sure to note the order in which the fields are specified. This is important! First specify the Vendor ID (c_xxx with a value of "1"), then the function, followed by information on each product in the form in the following order:

  1. Item/product ID ("item")
  2. Quantity ("iqty")
  3. Unit cost ("iunit")
  4. Name ("iname")
  5. Styles ("istyle") *optional
  6. Freight charge per unit ("ifreight") *optional
  7. Vendor ID ("ivendor") *optional - only used for a multiple merchant-type store

Now, let's get fancy with some extra features. Instead of having two different products, let's create one line-item, with a pull-down menu where the user can specify the "style" (either glass or plastic):

ORDER:
 bottles of Bob's Bar-B-Que Sauce in a

The source HTML for the above form is Here.

Now let's get even fancier using TABLES and more products. Let's say that Bob is doing so well, he needs to introduce more products. So he comes up with three flavors (Original, Hickory, and Extra Hot) and three sizes (12oz, 24oz, and 44oz bottles). Let's see how we can make a simple tabular form to handle this:

Order any of Bob's famous Bar-B-Que Sauces below:

Qty:

Description:

Style:

Bottle
Type:

Unit
Price:

Bob's Bar-B-Que Sauce (12oz.)

$ 1.95

Bob's Bar-B-Que Sauce (24oz.)

$ 3.49

Bob's Bar-B-Que Sauce (44oz.)

$ 5.99

The source HTML for the above form is Here.

As you can see, there is a lot of flexibility afforded in using FORMs - just take your time and make sure all the data is properly specified.

NOTE that the hidden form fields can be placed anywhere inside of the table, but they should remain listed in the appropriate order. It is recommended that if you use tables, insert most of the hidden fields in the first table column - it won't have any affect on the formatting. If you put hidden fields outside of the table rows or columns, some browsers will not properly interpret these commands and leave blank space at the end of the table.

Next Section: Checkout/Other Functions

For more info or questions, contact: Webmaster@WWMM.net

<-    /    ->