Shopping Cart Software HTML Help

netstores shopping cart
shopping cart products menu shopping cart menu demo shopping cart menu about netstores shopping cart demo netstores ecommerce clients shopping cart technical resources get started free with our shopping cart search submit
 
netstores shopping cart  
netstores shopping cart

HTML Integration

Integrating dynamic elements into your site is easy, its done by using one of two methods: HTML links, HTML Forms. Whether you need a simple "Add To Cart" button, or if you require a complex "Add To Cart" with several product style options, the code needed to do that has all been laid out below so you can easily copy & paste it into your page.

Before You Begin You Will Need :

  1. Your Store Name (If you haven't set up your store with us yet, you'll need to do that first, click here).
  2. Your Store URL (example: www.yourstorename.com)
  3. About 30 minutes if you're just getting started.

Use the navigation elements to the right. HTML Integration is broken up into 3 Levels: Basic, Intermediate, and Advanced. Choose your skill level and begin copying and pasting the HTML you would like to use.

 

Basic

Add To Cart

Copy and paste the link shown below into your HTML document, then change the red text according to your Store ID, your Product Code, and your other preferences. For a complete description of what each term means click here.

Example:
div

http://www.netstores.com/dwos-bin/add.pl?nccust=your Store ID &Item Code=Product Code&sortby=FieldName

Go to Top of Page Top

View Cart

This link shows customers the current items in their shopping basket. The current order total is shown and the customer can click buttons to begin a new search, clear the order quantities, modify the order, or complete the order.

To add a link in your web page that lets a user view their shopping cart, use the following URL:

http://www.netstores.com/dwos-bin/gen-m2o.pl?-myour Store ID+-t

Example:
div

Go to Top of Page Top

View Catalog

The cart has the ability to search for items and display the results as a dynamic catalog of items. Each catalog page has a specific number of items per page shown in a specific number of columns.You can specify the number of items per catalog page and the number of item columns.

To Make a Catalog Link:

http://www.netstores.com/dwos-bin/catalog.pl?nccust=your Store ID

Example:
div

Go to Top of Page Top

Checkout Button

This link will take your customer from wherever they may be presently in your shopping cart, directly to the checkout page where they purchase their item(s).

http://www.netstores.com/dwos-bin/proc_ordr.pl?nccust=your Store ID&complete=1  

Example:

Go to Top of Page Top

Quick-Search Form

We have come up with a solution to a simplified search interface. If you add the following code to your web page, it will give you a box where you can enter a word or phrase to search for in the "title" field of your database. To search a different field, just change the value of the "fieldname" variable to whatever field you want.

<FORM METHOD=post ACTION=http://www.netstores.com/dwos-bin/search.pl>
<INPUT TYPE=hidden NAME=function VALUE=search>
<INPUT TYPE=hidden NAME=nccust VALUE=your Store ID>
<INPUT TYPE=hidden NAME=fieldname VALUE=your fieldname>
<INPUT TYPE=text NAME=searchvalue VALUE="Text to show in window" SIZE=30>
<INPUT TYPE=submit NAME=Submit VALUE="Text to show on button">
</FORM>

Example:

Go to Top of Page Top

Intermediate

Standard Search Page

The simplest way to link your web page to your shopping cart is to provide your customers with a link that goes to the NetStores search page. This will allow your customers to search your product database. The URL for this link is:

http://www.netstores.com/dwos-bin/gen-srch.pl?your Store ID

Example:
div

Go to Top of Page Top

Add To Cart Buttons

 

The simplest method of site integration is to use"Add To Cart Buttons" to your web page. An Add To Cart Button is a link inside your HTML page that adds an item from your product list to the shopping cart. Below is an example of the HTML code for an Add To Cart button:

<FORM METHOD="POST" ACTION="http://www.netstores.com/dwos-bin/proc_ordr.pl">
<INPUT TYPE="hidden" NAME="nccust" VALUE="your Store ID">
<INPUT TYPE="hidden" NAME="the product code" VALUE="1">
<INPUT TYPE="submit" NAME="order" VALUE="text to show on button">
</FORM>

Example:

Go to Top of Page Top

Add To Cart Buttons with Images

 

To use this code in your HTML page, just replace the red areas with the appropriate values for your shopping cart and the item you are selling. The code above will add an add to cart button to your HTML page, but it will use a standard CGI form button. If you want to use a custom image instead of the standard button, use this code instead:

<FORM METHOD="POST" ACTION="http://www.netstores.com/dwos-bin/proc_ordr.pl">
<INPUT TYPE="hidden" NAME="nccust" VALUE="your Store ID">
<INPUT TYPE="hidden" NAME="the product code" VALUE="1">
<INPUT TYPE="hidden" NAME="order" VALUE="Add to Cart">
<INPUT TYPE="image" SRC="URL of your custom image">
</FORM>

Example:

Go to Top of Page Top

Catalog Pages

The cart has the ability to search for items and display the results as a dynamic catalog of items. Catalog Pages can be brought up in a variety of ways, utilizing the extensive flexibility of the shopping cart software.

To Make a Link that will return the contents of the entire catalog:

http://www.netstores.com/dwos-bin/catalog.pl?nccust=your Store ID

Example (see below for more examples):
div

Go to Top of Page Top

The Catalog button is versatile, and it is widely used for category buttons within a catalog. A Store selling video equipment might have a category called DVD's, the HTML for a link that would return every DVD that store sells would be this:

http://www.netstores.com/dwos-bin/catalog.pl?nccust=your Store ID&Category=DVD

Also, you can specify (if you choose to use any of these, simply add the modifier after the above URL, feel free to tack on as many modifiers to the URL string as you need them):

Remember: The red text indicates that it is a variable and must be augmented according to your preferences.

  • The maximum number of items to show on each catalog page. &limit=#
  • What fields should be searched and what should be found. &Field-Name=Value
  • What field should be used to sort the results. &sortby=Field-Name
  • In how many columns to display the items. &columns=#
  • How an item will look on the page (by specifying a template to use) &page=TemplateName
  • How many items to skip (which item to show first) when displaying the items. &skip=#

Examples:

  • Example (show more items on each catalog page using the limit modifier):
    http://www.netstores.com/dwos-bin/catalog.pl?nccust=your Store ID&limit=25
    div
  • Example (display the items found by a Catalog query ):
    http://www.netstores.com/dwos-bin/catalog.pl?nccust=your Store ID&Category=4
    div
  • Example (items are displayed in multiple columns with columns modifier ):
    http://www.netstores.com/dwos-bin/catalog.pl?nccust=your Store ID&columns=2
    div
  • Examples (items are displayed using a different template using the page modifier):
    http://www.netstores.com/dwos-bin/catalog.pl?nccust=your Store ID&page=CATALOG
    div
  • Example (skip a number of items before starting to display them using skip):
    http://www.netstores.com/dwos-bin/catalog.pl?nccust=your Store ID&skip=40
    div
  • Example (multiple modifiers in one string ):
    http://www.netstores.com/dwos-bin/catalog.pl?nccust=your Store ID&columns=2&limit=20&skip=1
    div

Go to Top of Page Top

Query Searches

NetStores provides a new function for performing searches that uses standard query formatting instead of the somewhat unusual format of the Driven Search. This allows all the features of the Driven Search, without its limitations. For example, you can use it as a link just like the driven search. Here is the format for the "query" search:

http://www.netstores.com/dwos-bin/query.pl?nccust=clothmasters
&Garment_Type=shirt&sortby=Item-No&limit=200

This breaks down into a few basic parts,

URL and query header: http://www.netstores.com/dwos-bin/add.pl?nccust=mondrian&

Query body:

Garment_Type=shirt&sortby=Item-No&limit=200

If you want to use the AUTOADD functionality, but don't want to go to the trouble of adding all the "AUTOADD=1" parameters and input elements, you can use the "Add" function instead which does everything that the Query Search does except it is implied that it will automatically add the item to the shopping cart (so you don't need to add extra parameters). As with the Query search and Driven Search, you can add the optional "qty" parameter to specify quantities for adding to the shopping cart. As before, if "qty" is not present, it defaults to a quantity of 1.

Go to Top of Page Top

Driven Searches

NetStores also provides a method of creating custom queries of your product database. If, for instance, you have a store that sells clothing online and you want to add a link on your web page that displays all of the shirts in your inventory, you can use the "Driven Search" interface to do this. Unlike Instant Purchase Buttons, Driven Search Queries are normal HTML links. Here is an example of such a link that would give the customer a list of all of the records with "shirt" in the "Garment_Type" search field:

http://www.netstores.com/dwos-bin/drv-srch.pl ?-m+clothmasters+-f+Garment_Type%3Dshirt|sortby%3DItem-No|limit%3D200

This may seem very confusing, but it breaks down to two basic parts:
Variables are in red

URL and query header: http://www.netstores.com/dwos-bin/drv-srch.pl?-m+clothmasters+-f+

Query body:

Garment_Type%3Dshirt|sortby%3DItem-No|limit%3D200
Example (search for all "HUGE" items in the demo store, sorted by name):
div

The URL and query header make your browser contact NetStores and tell the driven search interface to process a query for the specified merchant. The only part of this that will ever change is the Store ID, which in the example is "clothmasters".

The Query body is divided into sections with the "|" character (found above the Enter key on most PC keyboards). These sections can be pattern matches, such as the first section in the example, which selects all records where the "Garment_Type" field contains "shirt", they can be sorting guidelines, or they can be limits on the number of records displayed. The "%3D" in the example is the HTTP-encoded form of the equals "=" sign. The query body of the example basically tells the Driven Search interface, "select all records where the Garment_Type field contains 'shirts', sort the list by the Item-No field, and only display a maximum of 200 records".

Go to Top of Page Top

Quick-Search Form

We have come up with a solution to a simplified search interface. If you add the following code to your web page, it will give you a box where you can enter a word or phrase to search for in the "title" field of your database. To search a different field, just change the value of the "fieldname" variable to whatever field you want.

<FORM METHOD=post ACTION=http://www.netstores.com/dwos-bin/search.pl>
<INPUT TYPE=hidden NAME=function VALUE=search>
<INPUT TYPE=hidden NAME=nccust VALUE=your Store ID>
<INPUT TYPE=hidden NAME=fieldname VALUE=your fieldname>
<INPUT TYPE=text NAME=searchvalue VALUE="Text to show in window" SIZE=30>
<INPUT TYPE=submit NAME=Submit VALUE="Text to show on button">
</FORM>

Example:

Go to Top of Page Top

View Cart

This link shows customers the current items in their shopping basket. The current order total is shown and the customer can click buttons to begin a new search, clear the order quantities, modify the order, or complete the order.

To add a link in your web page that lets a user view their shopping cart, use the following URL:

http://www.netstores.com/dwos-bin/gen-m2o.pl?-myour Store ID+-t

Example:
div

Go to Top of Page Top

View Cart

This link shows customers the current items in their shopping basket. The current order total is shown and the customer can click buttons to begin a new search, clear the order quantities, modify the order, or complete the order.

To add a link in your web page that lets a user view their shopping cart, use the following URL:

http://www.netstores.com/dwos-bin/gen-m2o.pl?-myour Store ID+-t

Example:
div

Go to Top of Page Top

Advanced

Add To Cart Buttons with Images & Options

If you're selling products that come in different sizes, styles, colors, etc., then you will probably want to use Add To Cart Buttons with options. This is a little more complex than normal Add To Cart Buttons. Here is an example of the code for an Add To Cart Button with one option:

<FORM METHOD="POST" ACTION="http://www.netstores.com/dwos-bin/proc_ordr.pl">
<INPUT TYPE=hidden NAME=nccust VALUE="your Store ID">
<INPUT TYPE=hidden NAME="options" VALUE="TRUE">
<INPUT TYPE=hidden NAME="order" VALUE="Add to Cart">
<INPUT TYPE="image" SRC="URL of a custom image"BORDER=0><br>

Size: <select name="1">
<option selected value="OPT-product code of a large shirt">Large
<option value="OPT-product code of a small shirt">Small
</select>

</FORM>

Example: Size:

Go to Top of Page Top

When the image is clicked this form will add an item with the selected product code to the shopping cart.

The following is an example of an Add To Cart form with multiple drop-down menus to select options:

<FORM METHOD="POST" ACTION="http://www.netstores.com/dwos-bin/proc_ordr.pl">
<INPUT TYPE=hidden NAME=nccust VALUE="your Store ID">
<INPUT TYPE=hidden NAME="options" VALUE="TRUE">
<INPUT TYPE="image" SRC="URL of a custom image" BORDER=0><br>

Size: <select name="1">
<option selected value="OPT-SHIRT.LARGE">Large
<option value="OPT-SHIRT.HUGE">Huge
</select>

Color: <select name="2">
<option selected value="OPT-product code extension for a blue shirt">Blue
<option value="OPT-product code extension for a red shirt">Red
</select>

</FORM>

Size: Color:

When the image is clicked, it will add an item with a product code like "SHIRT.LARGE.BLUE" or "SHIRT.HUGE.BLUE" to the shopping cart.

The basic concept is that it goes through the drop-down menus in sequential order, takes their selected value, strips off the "OPT-" at the beginning, and joins them together to produce the item number of a product in the database.

NOTE:For Instant Purchase Buttons with options to work, you must have an entry in your product database for each combination of options. For the above example, you would need a record for each combination aside from the original product "SHIRT", with "SHIRT.LARGE.BLUE", "SHIRT.HUGE.BLUE", "SHIRT.LARGE.RED", and "SHIRT.HUGE.RED" as the product codes.

In order to keep every product variables from showing up during a product search, use "~INV" which stands for invisible at the end of your product name. i.e.: "SHIRT.LARGE.BLUE~INV" but do not do this to the original "SHIRT" or it will not show up during a search.

Go to Top of Page Top

The Query Search:

div

href="http://www.netstores.com/dwos-bin/query.pl? nccust=mondrian&Item%20Code=HUGE.BLUE&sortby=Name&AUTOADD=1"

   
URL and query header: http://www.netstores.com/dwos-bin/query.pl?nccust=mondrian&

Query body:Garment_Type=shirt&sortby=Item-No&limit=200&AUTOADD=1

Additionally, since the Query Search uses standard query formatting, you can put it in a form add all manner of options to it. Here is an example that allows you to choose between "blue" and "red" HUGE shirts from the demo store, and add it to the cart with a specified quantity.

Huge Shirt Color

Go to Top of Page Top

New Auto-Add

New Auto-Add functionality Now it is possible to not only search for products with the Query Search and the Driven Search, but to actually add products to the shopping cart based on the results of the search. This is accomplished with the "AUTOADD=1" parameter and value passed to either the Driven Search, or the Query Search.

You can either add the "AUTOADD=1" parameter to the Query Search link, or add "AUTOADD%3D1" to the Driven Search link.

The first item in the search results is automatically added to the customers shopping cart, thus turning a search button into an instant purchase button. If the "AUTOADD=1" parameter and value is present, you can also add an additional Quantity parameter as "qty=#" to add a certain number of the product to the shopping cart. If "qty" is not present, it defaults to 1. Here are examples that add the HUGE blue shirt to the shopping cart:

Go to Top of Page Top

Affiliate ID

The cart has the ability to track where a purchase originated from. This feature can used to track which reseller/channel originated an order. This is done by including the 'affiliate_id' field in an add-to-cart button that uses either the 'proc_ordr.pl' or 'add.pl' script, or search button that uses the 'query.pl' script.

If an affiliate ID is used, it will be recorded as part of the order .It will be sent out as part of the order email. It can be viewed online as part of the order (the 'View Orders/Customers' link in a cart's 'Merchant Administration Area'). It can be downloaded as part of the order (the 'Detailed' option under the 'Download Order File' link in a cart's 'Merchant Administration Area').

Examples:

<form method="post" action="http://www.netstores.com/dwos-bin/proc_ordr.pl">
<input type="hidden" name="nccust" value="your Store ID">
<input type="hidden" name="affiliate_id" value="the Affiliate ID">
<input type="hidden" name="the product code" value="1">
<input type="submit" name="order" value="text to show on button">
</form>

Go to Top of Page Top

<form method="post" action="http://www.netstores.com/dwos-bin/query.pl">
<input type="hidden" name="nccust" value=your Store ID>
<input type="hidden" name="affiliate_id" value="the Affiliate ID">

<input type="text" name="Name" value="" SIZE="30">
<input type="submit" name="Submit" value="text to show on button">
</form>

Go to Top of Page Top

<form method="post" action="http://www.netstores.com/dwos-bin/add.pl">
<input type="hidden" name="nccust" value=your Store ID>
<input type="hidden" name="affiliate_id" value="the Affiliate ID">

<input type="hidden" name="add-the product code" value="1">
<input type="submit" name="order" value="text to show on button">
</form>

Go to Top of Page Top

Explanation of Terms Used:

The following terms are used at 'modifiers' for our base URLs (/dwos-bin/catalog.pl?, /dwos-bin/query.pl?, /dwos-bin/cart.pl?, etc.). The modifiers work by tacking on an "&" after each modifier if you decide to use more than one at a time. This tells our software to, "use the first modifier AND use the second modifier", its very simple.

* note:
modifiers are case sensitive, please use only lower case as they are shown below.

Legend:

  • red -- indicates a variable that you may change and customize.
  • bold -- indicates the modifier in use

nccust
The Store ID of the store.
Usage: www.netstores.com/dwos-bin/catalog.pl?nccust=YourStoreID

limit
The number of items to display per page.
Usage: www.netstores.com/dwos-bin/catalog.pl?nccust=YourStoreID&limit=10

sortby
The field to sort results by.
Usage: www.netstores.com/dwos-bin/query.pl?nccust=YourStoreID&sortby=FieldName

columns
Display results in an HTML table with specified number of columns.
If columns=1, or not specified, results will be simply be
concatenated together sequentially.
Usage: www.netstores.com/dwos-bin/cart.pl?nccust=YourStoreID&columns=3

page
Which item template to use on the catalog pages. This template will be used for each item and can use information from the item file and the store. Templates can be configured by going to the 'Advanced' level of store configuration, and choosing 'Template Pages ' More detail on configuring template pages can be found here.
Usage: www.netstores.com/dwos-bin/catalog.pl?nccust=YourStoreID&page=TemplateName

skip
The number of items to skip before displaying.
Usage: www.netstores.com/dwos-bin/query.pl?nccust=YourStoreID&columns=2&skip=24

Go to Top of Page Top

Download Our FREE Shopping Cart Extensions for:
 
Download shopping cart extensions for Microsoft® FrontPage® Download shopping cart extensions for Macromedia® Dreamweaver® Download shopping cart extensions for Adobe® GoLive® Download shopping cart extensions for NetObjects Fusion®
 
 
 
HTML Integration
Basic
div Add To Cart
div View Cart
div View Catalog
div Checkout Button
div Quick-Search
div Explanation of Terms Used
Intermediate
div Standard Search Page
div Add To Cart Buttons
div Add To Cart Buttons w/Images
div Catalog Pages
div Driven Searches
div Quick-Search
div View Cart Buttons
div Explanation of Terms Used
Advanced
div Add To Cart Buttons w/Options
div Query Searches
div Auto-Add
div Affiliate ID
div Explanation of Terms Used
 

FREE Shopping Cart Extensions
 
 

 
 
 
Products   |  Demo  |  About NetStores   |  Downloads  |  Clients  |  Technical Resources  |  Get Started FREE!  |  Help  |  Site Map
 
 
Copyright © 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004 Fishbone Communications, Inc. All rights reserved.