|
|
HTML Integration |
| Integrating
dynamic elements into your site is easy, its done by using
one of two methods: HTML links, HTML Forms. Wether 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 layed out
below so you can easily copy & paste it into your page.
Before
You Begin You Will Need :
- Your
Store Name (If you haven't set up your store
with us yet, you'll need to do that first, click
here).
- Your
Store URL (example: www.yourstorename.com)
- About
30 minutes if you're just getting started.
Use
the navigation elements to the left. 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:
http://www.netstores.com/dwos-bin/add.pl?nccust=your
Store ID &Item Code=Product
Code&sortby=FieldName
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:
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:
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:
 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:
|
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:
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:
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:
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):
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
- Example
(display the items found by a Catalog query ):
http://www.netstores.com/dwos-bin/catalog.pl?nccust=your
Store ID&Category=4
- Example
(items are displayed in multiple columns with columns
modifier ):
http://www.netstores.com/dwos-bin/catalog.pl?nccust=your
Store ID&columns=2
- 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
- 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
- Example
(multiple modifiers in one string ):
http://www.netstores.com/dwos-bin/catalog.pl?nccust=your
Store ID&columns=2&limit=20&skip=1
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.
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):
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".
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:
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:
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:
|
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>
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>
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.
The
Query Search:
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.
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:
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="affilate_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>
<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="affilate_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>
<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="affilate_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>
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
Back
to Top
|
|
