This form:
<FORM METHOD=POST ACTION="http://www.bluegalaxy.info/webshopsolution/cgi-bin/my_cart.pl">
<FONT FACE="verdana" SIZE=-1 COLOR=#000000>
<B>Stylish Men's Tie</B><BR>
<strike>Old Price: $21</strike><BR>
<B>On sale now for $15</B><BR><BR>
<TABLE border=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD><img src="http://www.bluegalaxy.info/webshopsolution/images/tie1.jpg"></TD>
<TD><img src="http://www.bluegalaxy.info/webshopsolution/images/tie2.jpg"></TD>
<TD><img src="http://www.bluegalaxy.info/webshopsolution/images/tie3.jpg"></TD>
<TD><IMG SRC="http://www.bluegalaxy.info/webshopsolution/images/spacer.gif" WIDTH=10 HEIGHT=1 ALT="">
</TD>
<TD VALIGN=TOP align="center">
<FONT FACE="verdana" SIZE=-1 COLOR=#000000>Add gold plated tie clip?</font><br>
<SELECT NAME=custom3 SIZE=1>
<OPTION>No clip
<OPTION>Add clip +$10.00
</SELECT><BR><BR>
<INPUT TYPE=HIDDEN NAME="add" VALUE="1">
<INPUT TYPE=IMAGE NAME="add" SRC="http://www.bluegalaxy.info/webshopsolution/images/bluegrayaddtocart.gif" alt="Click to add to cart">
</TD>
</TR><TR>
<TD align="center"><input TYPE=RADIO name="custom2" value="Blue stars"></TD>
<TD align="center"><input TYPE=RADIO name="custom2" value="Happy faces"></TD>
<TD align="center"><input TYPE=RADIO name="custom2" value="One happy face"></TD>
</TR>
</TABLE>
Choose your pattern.
<BR><BR>
<INPUT TYPE=HIDDEN NAME=name VALUE="Stylish Men's Tie">
<INPUT TYPE=HIDDEN NAME=price VALUE="15.00">
<INPUT TYPE=HIDDEN NAME=sh VALUE="1">
<INPUT TYPE=HIDDEN NAME=img VALUE="tie1.jpg">
<INPUT TYPE=HIDDEN NAME=continue_shopping VALUE="http://www.bluegalaxy.info/webshopsolution/demo.html">
<INPUT TYPE=HIDDEN NAME=product_details VALUE="http://www.bluegalaxy.info/webshopsolution/demo.html">
<INPUT TYPE=HIDDEN NAME=custom1 VALUE="A stylish men's tie.">
</FORM>
Makes this:
Notes about this form:
- This product form can be copied and pasted into any web page. You can adjust the product details like the name, price, img, and the "custom1", "custom2", and "custom3" details.
- This form uses a graphic submit button. The trick for using a graphic submit button is to use two tags intead of one. For example:
<INPUT TYPE=HIDDEN NAME="add" VALUE="1">
<INPUT TYPE=IMAGE NAME="add" SRC="http://www.bluegalaxy.info/webshopsolution/images/bluegrayaddtocart.gif" alt="Click to add to cart">
Notice there is a separate "add" tag with a value of 1. This tag is necessary with the IMAGE tag in order to use a custom graphic submit button.
- This form includes radio buttons and a select menu, both of which send shopper selections to the cart. The radio buttons pass the "custom2" value to the cart, which is the shopper's choice of pattern. The select menu passes the customer's choice of whether or not to add a "gold plated tie clip" to the cart along with their tie. If the shopper chooses to add the tie clip, $10 is added to the price of the tie. This is a special "custom price add-on" feature of the cart. It works by using a plus symbol '+' followed by the currency symbol your cart uses: '$', followed by a number, in one of the custom tags of your form.
- The image of the product is passed to the cart with this tag:
<INPUT TYPE=HIDDEN NAME=img VALUE="tie1.jpg">
Notice this is just the name of the graphic and not a full URL to the image. The full URL to the graphic is:
http://www.bluegalaxy.info/webshopsolution/images/tie1.jpg
The reason a full URL to the graphic was not necessary is the cart already knows where to find the product images:
2 URL to images or thumb-nail directory -->http://www.bluegalaxy.info/webshopsolution/images
This feature is a convenience for the merchant or webmaster who is creating product forms.
- This form also provides an example of how you can show shoppers that there has been a discount or the product is on sale. Use the HTML <strike> tag on the original price.
- The "product_details" URL is where you want shoppers taken to if they click the image or name of the product in the cart contents page. This allows each product in the cart to contain its own link back to the product page where it was originally found by the shopper. The cart has a feature that works with this tag:
5 Linking to product_details -->1
See "General Settings Variable" #5 in the Readme for complete details.
|