Hosting Web Sites Around the World
Home   About   Support   Search   Contact
  Ask Support
   
  Account Overview
  Control Panel Overview
    
  Anonymous FTP
  Archive Manager
  Active Server Pages
  CGI-BIN & File Paths
  Changing Passwords
  ContentXpress
  Counters
  Cron Job Manager
  Custom Error Manager
  Email Software Setup
  File Manager
  Formmail
  FTP Instructions
  .htaccess File
  IP address
  Mail Manager
  Mailing Lists
  Mime Types
  MS FrontPage
  MySQL
  Password Protection
  PGP & PGP Mail
  Real Audio/Real Video
  Redirect URL
  Revved Up Tools
  Search Engine
  Secure Mail
  Secure Server SSL
  Shopping Cart
  Site Statistics
  SiteXpress
  SSH / Telnet
  Spam Vault
  Sub-Domains
  Submission Tips
  Webmail
  Web Site Builder

 

 

Support Manual

Dansie Shopping Cart
Template.html

This page explains how to put purchase buttons on your website pages.

  1. Using HTML Forms
    1. A Simple Form
    2. A Comprehensive Form
    3. Explanation of HTML Tags
    4. Using other Form Elements
  2. Multi-Item HTML forms
  3. View Cart (checkout) forms and Summary Server Side Includes
  4. Search Engine Forms (for Flat-file database)
  5. Helpful JavaScript examples
  6. <A HREF> method of adding items to your cart

1 Using HTML Forms:

A Simple Form:

This HTML . . .

<form action="http://52601.com/cgi-bin/cart/cart.pl">
<input type="hidden name="merchant" value="MerchantName">
<b>
Black Leather purse
Price $20.00</b>

<input type="hidden" name="name" value="Black Leather purse">
<input type="hidden" name="price" value="20">
<input type="hidden" name="img" value="purse.jpg">
<input type="hidden" name="return" value="http://mysite.com/purses.html">
<input type="submit" name="add" value="Put in shopping cart ">
</form>

Creates this form on your web page. . .

Black Leather purse
Price: $20.00

A Form with several options:

This HTML . . .

<form action="http://52601.com/cgi-bin/cart/cart.pl">
<input type="hidden name="merchant" value="MerchantName">
<b>
Mens Tie
Price $40.00</b>

<input type="hidden" name="name" value="Mens Tie">
<input type="hidden" name="price" value="40">
<input type="hidden" name="img" value="mens-tie.jpg">
<input type="hidden" name="img2" value="mens-tie-large.jpg">
<input type="hidden" name="return" value="http://mysite.com/ties.html">
<input type="submit" name="add" value="Put in shopping cart ">
</form>

<br>Size:

<select name="custom1" size="1">
<option>Small $40
<option>Large $50
</select>

<br>Color:

<select name="custom2" size="1">
<option>Grey
<option>Blue
<option>Purple
<option>Polka Dot
</select>

<br>With tie clip?

<select name="custom3" size="1">
<option>No clip
<option>Clip +$10
</select>

<br>Quantity

<input type="text" name="quantity" value="1" size="2">
<imput type="submit" name="add" value="order">
<form>

Creates this form on your web page. . .

Mens Tie
Price: $40.00
Size:
Color:
With tie clip?
Quantity:


Explanation of HTML Tags

"ACTION" in the <FORM> tag above must be used in all forms. Set the ACTION URL to the URL where your cart script is located. It needs to match the URL in Host Variable #1 in your vars.dat file exactly.

"name" in the <input type="hidden"> tag above must be used in all forms. Set the name to whatever you want.

"price" in the <input type="hidden"> tag above, likewise, must be used in all forms. Set the price to whatever you want.

Volume Discount Pricing method.
You may utilize the Dansie Shopping Cart's volume discount pricing capabilities. Just set the value of this tag like so:
<input type="hidden" name="price" value="3.00:1:2.50:10:2.00:20">
Explanation:
$3.00 for 1 or more.
$2.50 for 10 or more.
$2.00 for 20 or more.
Etc... Use the colon ":" for the delimiter.

The Dansie Shopping Cart has two other discount features: Webstore Discount and Coupon Discount. See Personal Variables #52 and #59 in the ReadMe.

"sh" in the <input type="hidden"> tag above stands for Shipping and Handling. You only need to use this tag if you have Personal Variable #27 set to "1" (using shipping calculated by the weight of each item method). See the ReadMe for details on Personal Variable #27. Set this to how many pounds/kilos that this item weighs.

"img" in the <input type="hidden"> tag above stands for "image". The use of this tag is optional. If you would like a thumb-nail image of this item to appear in the cart, then set the value of this tag to the full URL of the image you want to use. You may also put just the image name and the cart script will use the "images directory" that you specified in Host Variable #3 as its location. You may make the width and height of your thumb-nail images uniform with the help of Database Variable #18.

"img2" in the <input type="hidden"> tag above stands for "larger image". The use of this tag is optional. If you would like your thumb-nail images to be linked to larger images, then set the value of this tag to the full URL of the image you want to use. You may also put just the image name and the cart script will use the "images directory" that you specified in Host Variable #3 as its location.

"return" in the <input type="hidden"> tag above is optional. If you wish to specify what page your customer returns to when they click the "Continue Shopping" button at the bottom of the cart display, then set the value of this tag to the full URL of the page you want them to return to. A full URL begins with "http://" (or "https://" if you are using a site security certificate). Example:
<input type="hidden" name="return" value="http://www.YourName.com/page.html">
And NOT like this:
<input type="hidden" name="return" value="page.html">
If you don't use this tag in your forms, then the URL your customers will "Continue Shopping" at will be the "default return shopping URL" that you specified in Host Variable #2.
If your "return" variable has a query string inside the URL, then encode these characters: (?,=,&) with these respective URL encodings: (%3F,%3D,%26).

"quantity" in the <input type="text"> tag above is optional. If you wish to allow your customers to choose their quantity then you can use this tag. If you don't use this tag, the cart will use a default quantity of 1. Your cart gives you the ability to change quantity later after the item is in the cart too.

"custom1" (the name of the "size" <select> pull-down menu above) has the ability to actually change the price of the item. This is done with the use of your currency symbol (Personal Variable #36) followed by a numeric value at the end of the <OPTION> tag.

"custom2" (the name of the "color" <select> pull-down menu above) has the ability to send a custom description to the shopping cart with this item, but not change the price of the item because the currency symbol is not in the tag.

"custom3" (the name of the "With tie clip?" <select> pull-down menu above) has the ability to actually add to the price of the item. This is done with the use of the plus sign (+) followed by your currency symbol (Personal Variable #36) followed by a numeric value at the end of the <OPTION> tag.

"custom100" You may use as many custom descriptions that you want in your forms. Just make sure you set Personal Variable #1 in your "vars.dat" file to the highest number of "customs" that your cart will use in any given HTML form. The default is set at 20.

"merchant" For use with the Mall Version. See the Mall Version section of the ReadMe for details.

"redirect" This works with the "Add and Redirect" feature. See Personal Variable #49 in the ReadMe. If you would like a few HTML product forms to deviate from the default settings that you put in PV#49, then you can use this tag in your HTML forms:
<INPUT TYPE=HIDDEN NAME=redirect VALUE="1">
or
<INPUT TYPE=HIDDEN NAME=redirect VALUE="2">

"#nontaxable#" If you have the cart set to calculate sales tax (see Personal Variable #12) but you don't want sales tax calculated on one item, then use a tag like so:
<INPUT TYPE=HIDDEN NAME="custom1" VALUE="#nontaxable#">
If you are using the <A HREF> method of adding items to the cart, then use %23 encoding for the pound signs like so:
http://www.YourName.com/cgi-bin/cart.pl?name=Purse&price=20&custom1=Black+Leather&custom2=%23nontaxable%23

"#noshipping#" If you have the cart set to calculate shipping according to the subtotal (see section 10 in the ReadMe. This is when you have Personal Variable #27 set to 2.) but you don't want shipping considered on one item, then use a tag like so:
<INPUT TYPE=HIDDEN NAME="custom1" VALUE="#noshipping#">
If you are using the <A HREF> method of adding items to the cart, then use %23 encoding for the pound signs like so:
http://www.YourName.com/cgi-bin/cart.pl?name=Purse&price=20&custom1=Black+Leather&custom2=%23noshipping%23

"#nodiscount#" If you have the cart set to use Webstore or Coupon discounts (see Personal Variables #52 and #59 in the ReadMe) but you want certain items to always be full price and never be discounted, then use a tag like so:
<INPUT TYPE=HIDDEN NAME="custom1" VALUE="#nodiscount#">
If you are using the <A HREF> method of adding items to the cart, then use %23 encoding for the pound signs like so:
http://www.YourName.com/cgi-bin/cart.pl?name=Purse&price=20&custom1=Black+Leather&custom2=%23nodiscount%23
In order to reduce confusion for your customers it is highly recommended to include another custom description tag like this:
<INPUT TYPE=HIDDEN NAME="custom2" VALUE="No discounts on this item.">


Using Other Form Elements:
You may use all the standard form tags if you wish.
SELECT and OPTION:
RADIO:   An option   Another option
CHECKBOX: An option
TEXT:
TEXTAREA:
SUBMIT:


Examples:

<INPUT TYPE=CHECKBOX NAME="custom1" VALUE="With tie clip? +$10.00">

<INPUT TYPE=RADIO NAME="custom2" VALUE="No tie clip">
<INPUT TYPE=RADIO NAME="custom2" VALUE="With tie clip +$10.00">

What initials would you like embroidered into your tie?
<INPUT TYPE=TEXT NAME="custom3" SIZE=20 MAXLENGTH=20>

What initials would you like embroidered into your tie?
<TEXTAREA NAME="custom4" COLS=30 ROWS=3></TEXTAREA>

You may use standard submit buttons or images like so:
Standard submit button:
<INPUT TYPE=SUBMIT NAME="add" VALUE="Put in Shopping Cart">

Custom image submit button:
<INPUT TYPE=HIDDEN NAME="add" VALUE="1">
<INPUT TYPE=IMAGE SRC="http://www.YourSite.com/add.gif" NAME="Order">


Back to top


2 Multi-Item HTML forms:
Want to send multiple items to the shopping cart at one time with the use of checkboxes? Make sure you set the "name" tag to "multi-items". For each item, use "multi-item1", "multi-item2", etc. The value of each multi-item is four or more fields separated by the "|" delimiter. The key to the fields are as follows:
name|price|shipping|image|custom1|custom2|custom3|etc.

Or if linking your thumbnails to larger images:
name|price|shipping|image::image2|custom1|custom2|custom3|etc.
Use two colons as the sub-delimiter between the image names.
You may use a quantity text box with each multi-item. Just give it a corresponding number such as "quantity1", "quantity2", etc. If you omit the quantity text box, a default value of one will be given. Be sure to set Personal Variable #1 to the number of the largest number of multiple items you have in a form. For example, if you have a form that has 50 multiple items in it, set Personal Variable #1 to 50. The cart script wont look for any items higher than that array.

"multi-items" HTML form limitations:
If you use "multi-items" forms, then you can't use any comprehensive capabilities with them. In other words, you can't put a bunch of pull-down menus next to each product. The way that "multi-items" forms work best is with a huge list of products with check boxes down the page that don't need any extra custom descriptions.
If you want to use comprehensive forms, you will be able to do many powerful things, but a "Put in cart" button will need to accompany every individual product.

This HTML . . .

<FORM METHOD=POST ACTION="http://www.dansie.net/cgi-bin/scripts/cart.pl">

Item: Quantity:<BR>

<INPUT TYPE=HIDDEN NAME="name" VALUE="multi-items">
<INPUT TYPE=HIDDEN NAME="return" VALUE="http://www.dansie.net/demo.html">

<INPUT TYPE=CHECKBOX NAME="multi-item1" VALUE="Banana Split|3.95|1|split.jpg|A delicious ice cream treat.">
Banana Split<INPUT TYPE=TEXT NAME="quantity1"  VALUE="1" SIZE=2 MAXLENGTH=2><BR>

<INPUT TYPE=CHECKBOX NAME="multi-item2" VALUE="Pineapple|2|1|pineapple.jpg|A juicy pineapple.">
Pineapple<INPUT TYPE=TEXT NAME="quantity2" VALUE="1" SIZE=2 MAXLENGTH=2><BR>

<INPUT TYPE=CHECKBOX NAME="multi-item3" VALUE="Watermelon|3|1|watermelon.jpg|A ripe watermelon.">
Watermelon<INPUT TYPE=TEXT NAME="quantity3" VALUE="1" SIZE=2 MAXLENGTH=2><BR>

<INPUT TYPE=SUBMIT NAME="add" VALUE="Put these in my cart!">
</FORM>

 

Creates this form . . .

Item: Quantity:
Banana Split
Pineapple
Watermelon

Back to top
3 View Cart (checkout) forms and Summary Server Side Includes:

This is the HTML you use to display an image link that allows customers to "look" into their cart and/or finish their purchase (checkout). Make sure you set the FORM ACTION to the same URL that you have in Host Variable #1 of your vars.dat file. Also, set the proper URL to the cart.gif. It is recommended to have this image link on every page of your website. If your website uses frames, it is recommended to have it in your toolbar frame and use TARGET. The use of the Server Side Includes (SSI) tag below is optional. If you wish to use SSI tags but they are not working, contact your web host and ask them to enable SSI for you.

This HTML . . .

<a href="http://www.52601.com/cgi-bin/cart/cart.pl?look|MerchantName">View Cart</a>

Creates this link . . .

View Cart

 

This HTML . . .

<a href="http://www.52601.com/cgi-bin/cart/cart.pl?look|MerchantName">
<img src="http://www.YourName.net/images/cart.gif" BORDER=0 ALT="View Your Shopping Cart">
</a>

Creates this form . . .

View Your Shopping Cart
The above cart.gif image may not show if you are not connected to the internet.

 

This HTML . . .

<form method="post" action="http://www.52601.com/cgi-bin/cart/cart.pl">
<input type="hidden" name="return" value="http://www.dansie.net/demo.html">
<input type="image" src="http://www.YourName.net/images/cart.gif" name="View Cart/Checkout" BORDER=0>
</form>

Creates this form . . .

The above cart.gif image may not show if you are not connected to the internet.

 

This Javascript . . .

<SCRIPT language="JavaScript1.2">
function Summary()
{
SummaryWindow=window.open("http://www.dansie.net/cgi-bin/scripts/cart.pl?summary", "Summary", "width=300,height=200,titlebar=no,status");
}
document.write('<FORM><INPUT TYPE=BUTTON VALUE="Cart Summary" OnClick="Summary();"></FORM>');
</SCRIPT>

Would Create a Button like this . . .

This button will properly demonstrate when you are connected to the internet.

4 Search Engine Forms (for flat file database):

Dansie Shopping Cart version 3.0 has been upraded with new powerful search features. Make sure you add Database Variable #25 and #26 to your vars.dat file to take advantage of these new powerful features. Also, make sure you have lang.dat #91 through 96 and 149 and 150 from the 3.0 lang.dat file. If you wish to use the 3.0 search engine, then set Database Variable #25 in your vars.dat file to "3.0". If you want to remain with the old 2.0 search format, then just leave DBV#25 blank or set it to "2.0".

The form below shows you how the Dansie Shopping Cart can search your flat-file databases for the products. Copy and paste it into one of your web pages. Make sure you change the FORM ACTION to the URL to the cart.pl script on your site. It will be the same URL as you have in Host Variable #1 in your vars.dat file.

The location of your database file is either in the same directory as your vars.dat file (default), or a different directory that you set in Database Variable #1 in your vars.dat file. With the Mall Version database files need to be located in the merchants directory and don't forget to use the "merchant" tag like so:
<INPUT TYPE=HIDDEN NAME="merchant" VALUE="MerchantName">
Feel free to name your database files whatever you like and use as many as you need.

You will find 7 form variables below. db, category, search, method, price, display and return. The only variable that is required is db because you must tell the script which file to search. The rest are optional. If you do not define category, then all categories in the database file will be searched. If you do not define search (with key words) then all items will be displayed. By using the price variable you can search for specific price ranges. If you omit price then all items can be matched regardless of their price. The method variable allows your shoppers to search for "any words", "all words" or a "phrase". If you omit the method variable the default search method will be "any words". The display variable allows your shoppers to control how many items are displayed per page. The return variable allows you to tell the cart what URL to take a shopper to when they click the "Continue Shopping" button. If you omit this variable, the cart will use the URL you put in Database Variable #23 and if you have that blank, the return URL will be a link right back to the database display they just came from.

Foreign character search compatibility: If you have characters in your database such as any of these:
S¹s¹ŸÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÑÒÓÔÕÖÙÚÛÜY´àáâãäåçèéêëìíîï

The cart will return a match for words with those characters in them even if the shopper didn't type in the exact character. For example, someone searches for "El Nino" but you have "El Niño" in your product database, the cart will match it with or without the tilde "~". The reverse is true too. If someone searches for "Alegría" and you have "Alegria" in your database without the accent, the cart will still match it.

HREF links can be used just as well. Here are some examples:

http://www.dansie.net/cgi-bin/scripts/cart.pl?db=stuff.dat
The only variable passed is db so all items are returned.

http://www.dansie.net/cgi-bin/scripts/cart.pl?db=stuff.dat&category=Books
category is defined so the script only returns items in that category.

http://www.dansie.net/cgi-bin/scripts/cart.pl?db=stuff.dat&category=Books&search=Boy+Scout
Now "Boy Scout" is the key word search criteria so the script only returns matches for that in the "Books" category. Notice that you use plus signs (+) for spaces inside URLs.

This HTML . . .

<FORM METHOD=POST ACTION="http://www.dansie.net/cgi-bin/scripts/cart.pl"> <INPUT TYPE=HIDDEN NAME=db VALUE="stuff.dat"> <INPUT TYPE=HIDDEN NAME=return VALUE="http://www.dansie.net/search_form_source.html"> Category: <SELECT NAME=category> <OPTION VALUE="">All Categories <OPTION>Books <OPTION>Clothing <OPTION>Hotel </SELECT> <BR> Search For: <INPUT TYPE=TEXT NAME=search SIZE=30 MAXLENGTH=30> <BR> Method: <SELECT NAME=method> <OPTION VALUE="any_words">Any Words <OPTION VALUE="all_words">All Words <OPTION VALUE="phrase">As A Phrase </SELECT> <BR> Price Range: <SELECT NAME=price> <OPTION VALUE="">Any price <OPTION VALUE="10">Less than $10 <OPTION VALUE="10-20">$10 to $20 <OPTION VALUE="20-10000">$20 to $10000 </SELECT> <BR> Items per page: <SELECT NAME=display> <OPTION VALUE="5">5 Items per page <OPTION VALUE="10">10 Items per page <OPTION VALUE="25">25 Items per page <OPTION VALUE="50">50 Items per page </SELECT> <BR> <INPUT TYPE=SUBMIT VALUE="Search!"> </FORM>

Creates this form . . .

Category:
Search For:
Method:
Price Range:
Items per page:

 


5 Helpful JavaScript examples:

Required Fields:
This requires the use of JavaScript. Make sure to change the ACTION attribute in the FORM tag of this form to match the full URL to where your cart.pl script is located. It needs to match Host Variable #1 in your vars.dat file exactly. If a shopper has JavaScript enabled in their browser, the two text fields will be required. If they don't, the fields wont be required, but the form will still work. Try clicking the "Order Now!" button below without entering a first or last name. It will prevent you from moving to the next page until you enter those required fields.
  • Copy and paste the JavaScript function into the top of your document.
  • Put NAME="form1" in your FORM tag.
  • Use the purple tags below in place of your submit button.

This Javascript and HTML . . .

 

<SCRIPT LANGUAGE="JavaScript">
   function RequiredFields()
   {
      if (!document.form1.custom3.value ||
          !document.form1.custom4.value
         )
      {
         alert("Please enter all required fields.");
      }
      else
      {
         document.form1.submit();
      }
   }
</SCRIPT>

<FORM NAME="form1" METHOD=POST ACTION="http://www.dansie.net/cgi-bin/scripts/cart.pl">

<B>
Black Leather purse with leather straps<BR>
Price: $20.00<BR>
</B>

<INPUT TYPE=HIDDEN NAME=name     VALUE="Black Leather Purse">
<INPUT TYPE=HIDDEN NAME=price    VALUE="20.00">
<INPUT TYPE=HIDDEN NAME=sh       VALUE="1">
<INPUT TYPE=HIDDEN NAME=img      VALUE="purse.jpg">
<INPUT TYPE=HIDDEN NAME=img2     VALUE="purse_large.jpg">
<INPUT TYPE=HIDDEN NAME=return   VALUE="http://www.dansie.net/demo.html">
<INPUT TYPE=HIDDEN NAME=custom1  VALUE="Black Leather purse with leather straps">
<INPUT TYPE=HIDDEN NAME=custom2  VALUE="First and last name to be embroidered on purse:">
Name to be embroidered on purse:<BR>
First Name: <INPUT TYPE=TEXT NAME=custom3 SIZE=20 MAXLENGTH=30><BR>
Last Name: <INPUT TYPE=TEXT NAME=custom4 SIZE=20 MAXLENGTH=30><BR>

<SCRIPT LANGUAGE="JavaScript">
document.write('<INPUT TYPE=HIDDEN NAME="add" VALUE="1">\n<INPUT TYPE=BUTTON VALUE="Order Now!" OnClick="RequiredFields()";>');
</SCRIPT>
<NOSCRIPT>
<INPUT TYPE=SUBMIT NAME="add" VALUE="Order Now!">
</NOSCRIPT>

</FORM>

Creates this form . . .

Black Leather purse with leather straps
Price: $20.00
Name to be embroidered on purse:
First Name:
Last Name:


6 <A HREF> method of adding items to your cart:

You may add items to your cart with <FORM> tags and submit buttons as you see in section 1 and 2 of Template.html or you may use the GET method too by passing the name/value pairs to the cart.pl script in a query string.

Here is an example:

http://www.dansie.net/cgi-bin/scripts/cart.pl?name=Purse&price=20&custom1=Black+Leather

Here are the rules:
  • First link to the full URL to your cart.pl script.
  • Then put a question mark.
  • The first variable name must be "name" as you see above.
  • Use the equal sign "=" to separate the names from the values.
  • Use the ampersand "&" to separate each name/value pair.
  • Since we can't put a space character in a URL, subsitute those with the plus sign "+".
  • Use all the variable names you like as you find them in section 1C of Template.html.
Here is another example:

http://www.dansie.net/cgi-bin/scripts/cart.pl?name=Purse&price=20&custom1=Black+Leather
&custom2=Large&quantity=3&sh=1&img=purse.jpg&return=http://www.dansie.net/cart.html


If you have the Mall Version then use the merchant variable like so:
&merchant=MerchantName

If you would like to pass a URL with the "return" variable and it has a query string inside the URL, then encode these characters: (?,=,&) with these respective URL encodings: (%3F,%3D,%26).


Back to top

Dansie Shopping Cart 3.29
By Dansie Website Design
www.dansie.net
Copyright © Dec 10, 1997-2002

 

Copyright © 2003-2007 Hosting Connecticut, LLC.
Resellers of Hosting Connecticut, LLC. may reproduce this manual on their sites.