Webquarry Shopping Cart
Example
Creating HTML forms
(How to put purchase buttons on your web pages)


Note: this example uses a demo store with the merchant ID of "webquarry". Substitute your merchant ID in place of webquarry to put items in your store's shopping cart.

CONTENTS:


  1. Standard HTML templates for sending an item to the shopping cart
    1. A simple form
    2. A very comprehensive form
    3. Explanation of HTML tags
    4. Using other form elements
  2. Using "multi-items" HTML forms
  3. HTML that allows customers to "view cart contents" or "checkout"
  4. Using the Webquarry Shopping Cart search engine with flat-file databases
  5. A helpful JavaScript example
  6. Adding items to your cart with a link as opposed to a submit button.



1 Standard HTML templates for sending an item to the shopping cart:

A simple form:

This HTML form...

<FORM METHOD=POST ACTION="http://cart.webquarry.com/cgi-bin/cart.pl">

<INPUT TYPE=HIDDEN NAME=merchant     VALUE="webquarry">

<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="http://www.webquarry.com/art/purse.jpg">
<INPUT TYPE=HIDDEN NAME=return   VALUE="http://www.webquarry.com/demo">
<INPUT TYPE=HIDDEN NAME=custom1  VALUE="Black Leather purse with leather straps">

<INPUT TYPE=SUBMIT NAME="add" VALUE="Put in Shopping Cart">
</FORM>

Makes this...
Black Leather purse with leather straps
Price: $20.00



Back to top.



A very comprehensive form:

This HTML form...

<FORM METHOD=POST ACTION="http://cart.webquarry.com/cgi-bin/cart.pl">

<INPUT TYPE=HIDDEN NAME=merchant     VALUE="webquarry">

<B>
Mens Tie<BR>
Price: $40.00<BR>
</B>

<INPUT TYPE=HIDDEN NAME=name VALUE="Mens Tie">
<INPUT TYPE=HIDDEN NAME=price VALUE="40.00">
<INPUT TYPE=HIDDEN NAME=sh VALUE="1">
<INPUT TYPE=HIDDEN NAME=img VALUE="http://www.webquarry.com/art/mens_tie.jpg">
<INPUT TYPE=HIDDEN NAME=return VALUE="http://www.webquarry.com/demo">

Size: 
<SELECT NAME=custom1 SIZE=1>
<OPTION>Small $40.00
<OPTION>Large $50.00
</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.00
</SELECT><BR>

Quantity: 
<INPUT TYPE=TEXT NAME=quantity VALUE="1" SIZE=2 MAXLENGTH=2><BR>
<INPUT TYPE=SUBMIT NAME="add" VALUE="Order">
</FORM>

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

Back to top.



Explanation of HTML tags:

"ACTION" in the <FORM> tag above must be used in all forms. Set the ACTION URL to "http://cart.webquarry.com/cgi-bin/cart.pl". NEVER deviate from this or your cart will not work.

"merchant" in the <INPUT TYPE=HIDDEN> tag above must be used in all forms. Set the name to the merchant ID that you were given when your store was set up.

"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 utilized the Webquarry 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 Webquarry Shopping Cart has two other discount features: Webstore Discount and Coupon Discount. See Personal Variables #52 and #59 in the vars.dat explanation.

"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 vars.dat explanation 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 the vars.dat file Host Variable #3 as its location. You may make the width and height of your thumb-nail images uniform with the help of vars.dat Database Variable #18.

"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. 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 vars.dat Host Variable #2.

"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 (vars.dat 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 (vars.dat 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 vars.dat Personal Variable #1 file to the highest number of "customs" that your cart will use in any given HTML form. The default is set at 20.

"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 vars.dat Personal Variable #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 vars.dat 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#">

"#noshipping#" If you have the cart set to calculate shipping according to the subtotal (This is when you have vars.dat 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#">



Back to top.



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 Using "multi-items" 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.

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 vars.dat 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 won't 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...

<FORM METHOD=POST ACTION="http://cart.webquarry.com/cgi-bin/cart.pl">

<INPUT TYPE=HIDDEN NAME=merchant     VALUE="webquarry">

Item: Quantity:<BR>

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

<INPUT TYPE=CHECKBOX NAME="multi-item1" VALUE="Banana Split|3.95|1|http://www.webquarry.com/art/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|http://www.webquarry.com/art/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|http://www.webquarry.com/art/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>

Makes this...
Item: Quantity:
Banana Split
Pineapple
Watermelon



Back to top.


3 HTML that allows customers to "view cart contents" or "checkout":

This is the HTML you use to display an image link that allows customers to "look" into their cart, or finish their purchase. Make sure you set the FORM ACTION to the correct URL. 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.

Example #1 (a link)
<A HREF="http://cart.webquarry.com/cgi-bin/cart.pl?look|merchantID">
<IMG SRC="cart.gif" BORDER=0 ALT="View Your Shopping Cart"></A>

Example #2 (a form)
<FORM METHOD=POST ACTION="http://cart.webquarry.com/cgi-bin/cart.pl">
<INPUT TYPE=HIDDEN NAME=merchant     VALUE="webquarry">
<INPUT TYPE=HIDDEN NAME=return VALUE="http://www.YourName.com/SuperWuper.html">
<INPUT TYPE=HIDDEN NAME=purpose VALUE="look">
<INPUT TYPE=IMAGE SRC="cart.gif" NAME="View Cart/Checkout" BORDER=0>
</FORM>



Back to top.


4 Using the Webquarry Shopping Cart search engine with flat-file databases:

Webquarry Shopping Cart has been upgraded with new powerful search features. Make sure you add vars.dat Database Variable #25 and #26 to your vars.dat file to take advantage of these new powerful features.

The form below shows you how the Webquarry Shopping Cart can search your flat-file databases for the products. Copy and paste it into one of your web pages.

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 vars.dat Database Variable #1 in your vars.dat file.

You will find 6 form variables below. db, category, search, method, price and display. 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.

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

http://cart.webquarry.com/cgi-bin/cart.pl?db=stuff.dat&category=Books&merchant=webquarry
category is defined so the script only returns items in that category.

http://cart.webquarry.com/cgi-bin/cart.pl?db=stuff.dat&category=Books&search=Boy+Scout&merchant=webquarry
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...
<FORM METHOD=POST ACTION="http://cart.webquarry.com/cgi-bin/cart.pl">

<INPUT TYPE=HIDDEN NAME=merchant VALUE="webquarry">
<INPUT TYPE=HIDDEN NAME=db VALUE="stuff.dat">

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>

Makes this...
Category:
Search For:
Method:
Price Range:
Items per page:



Back to top.


5 A helpful JavaScript example:

Custom measurements, or quantity of additional tag-along items. This can be used to ask, "How many square yards of carpet will you need?" This could also be used to ask, "How may additional red roses do you want delivered with the basket?" You only need to change variables s,e and c. Make sure "custom1" is the correct name. I wouldn't tamper with the rest unless you know a little about JavaScript. Note: Webquarry's Shopping Cart is compatible with JavaScript 1.2, 1.0 and it will even work if a web browser has it's JavaScript turned off. However, using JavaScript in your forms wont work if a customer has his JavaScript turned off in their browser.

This JavaScript example:
   <FORM>
   Length:<BR>
   <SELECT NAME="custom1" SIZE=2>
   <SCRIPT LANGUAGE="JavaScript">
      var i   = 0  // Initialize
      var s   = 10 // Length Start value
      var e   = 20 // Length End value
      var inc = 1  // Increment each time
      var c   = 1  // Cost in units of money per extra unit of length (1 = $1.00 etc.)
      for (var i = s; i<= e; i+=inc)
      {
         document.write ("<OPTION VALUE=\"+$"+(i-s)*c+"\">"+i+"\n")
      }
   </SCRIPT>
   </SELECT>
   <BR>
   </FORM>

Makes this...
Length:



Back to top.


6 Adding items to your cart with a link as opposed to a submit button:

You may add items to your cart with <FORM> tags and submit buttons as you see in section 1 and 2 of this page 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://cart.webquarry.com/cgi-bin/cart.pl?name=Purse&merchant=webquarry&price=20&custom1=Black+Leather

Here are the rules:

Here is another example:

http://cart.webquarry.com/cgi-bin/cart.pl?name=Purse&merchant=webquarry&price=20&custom1=Black+Leather
&custom2=Large&quantity=3&sh=1&img=http://www.webquarry.com/art/purse.jpg
&return=http://www.webquarry.com/demo



Back to top.