Ok! Let's build a form and add a few products and product attributes using all of the commonly used form components. Each component will be in its own table cell. All values in RED will need to be changed to
reflect your site and product information. Since we will be adding more than one product to the cart, we will use the addmulti action tag.
Preliminary Information:
Each product, and attributes (if any) share one line in the shopping cart as seen at the bottom of this page.
Attribute: A term used to add to a description of the product, such as size, color, etc.
Make sure you're addressing the right server. i.e. ww3, ww4, ww8, etc. When using the form method addmulti, the qty has to be specified. It does not default to one such as the hyperlink does.
To open the cart in a new window add the target tag. If a new window is used, be sure to omit the return links and inform your customers that they have to close the window to continue shopping. A good place to tell them is in the
cart header and/ or footer.
Hidden form fields:
The two fields shown immediately below are "mandatory" fields and must
be included in each form or link.
The return line (link) may be omitted as stated above if the cart is opened in a new
window.
Drop down menu using productpr:
Each product within a form (if more than one product) must be numbered consecutively from 1 to a maximum of 30. You may have an unlimited number of forms, but you can only have one submit button per form. We will be using productpr in order to include the price with the product and also include a shipping charge for each individual product.
The convention is: product:price:units
The demo cart shipping setup is option 3 with the value .01 in the box, so the shipping
(for example) on the 2" candle will be $3.00 (300 X .01=3.00).
<select size="1" name="productpr1">
<option value="2 inch Candle:2.98:300">2 inch Candle $2.98
</option>
<option value="4 inch Candle:4.98:400">4 inch Candle $4.98
</option>
<option value="6 inch Candle:6.98:500">6 inch Candle $6.98
</option>
</select>
Buy
a Candle
Input text box:
Each product must have a quantity (qty) of at least one associated with it in order to be passed to the cart. It can take the form of a customer input to select a quantity of the product to buy, or take the form of a hidden field (<input type="hidden"
name="qty" value="1">). In
the example below, we let the customer select the quantity.
In each case, the customer can change the quantity of the item in the cart. If no quantity
is entered into the box, the product will not be passed to or show up in the cart because
nothing was ordered. You can have an input text box for each product in a form using
qty1, qty2, etc. to correspond to the product number. Again, any product without at least
"1" entered into the box will not send the associated product to the cart. This
means that you can have 30 products, each with a qty check box in a form and only those
with a quantity of at least "1" entered will be sent to the cart.
Drop down menu for product attributes:
Any number of drop down menus may be included for each individual product within a
form and as many options as desired may be added to each menu. To add additional menus for
size, color, etc., just copy the html and change the attributes to match your needs.
To add more options to a menu just add additional <option
value>.......................</option> lines before the </select> tag. We
use the append [ ] (without the space) brackets to append the attributes associated with
each product, to the same product line in the cart.
Check Box:
Products can also be added to the cart with a check box. The "Add Candle
Holder" checkbox is named product2 to make it show up on a separate line in the cart
(each product will be on a separate line in the cart). Note that every tag associated with
product2 has to have a value of 2 included within the tag. You can use as many check boxes
as you need (max of 30 per form) as long as they are numbered to correspond to the product
numbers.
We have also added a "units" field to this product so we can add a shipping
charge for the candle holder to the cart
Radio Buttons:
Radio buttons can also be used to select an attribute for a product. We'll use them to
choose what type of finish we would like for our candle holder, again, appending them with
brackets to product2. The rules for radio buttons apply. Only one can be chosen for each
product they are associated with. Again, we are appending the choice to product2.
One line Text box:
This is pretty much self explanatory. Again, the append brackets are used to add
the text to the candle holder (product2) on the same line in the cart. The one line text
box could also be used as a separate product (productX) to gather small notes or messages
to send to the cart.
<input type="text" name="product2[]" size="30">
We could also charge an additional amount for engraving by making this a separate
product with the fields as shown, with "X" being replaced by a product number.
Add 16 characters (max) of engraving to the Candle Holder (FREE)
Scrolling text box:
The "Add a message for a card" checkbox is product3. It will show up in
the cart on its own line (if checked) with the message appended to it.
If you would like to a free card
included with your order,
What would you like the card to say?
Check here to add a card and message
Submit button:
<input type="submit" value=" Add to Cart">
Submit button using your own image:
The tag img src must reflect the actual path to your image relative to the page
it's displayed on. In this case it resides within the image folder.
All of the above form components can be used in any combination with product and productpr
within your pages. The only limitation is the limitation you impose within your mind, so
let your creative juices flow freely and build a cart the whole world will come to see.
So,
here's what it looks like in the cart
Product
Quantity
Price
Amount
6 inch Candle, Vanila Scented
6.98
6.98
Candle Holder, Polished Brass, Hi Sexy
3.00
3.00
Card Message, Just for you on Valentines day
0.00
0.00
All prices are in US Dollars
Subtotal
9.98
Shipping
6.00
Tax
0.00
TOTAL
15.98
To recap:
6 inch candle is productpr1. "Vanila scented" (drop down menu) is an attribute.
Candle Holder is product2. "Polished Brass" (radio button) is the first
attribute and "Hi Sexy" (one line text box) is the second attribute.
Card Message is product3, and "Just for you on Valentines day" (scrolling text
box) is an attribute.
