|
The steps below are designed to convey the concepts involved in setting
up your web pages to work with the virtualCART
Server. virtualCART
has many capabilities not listed on this page. Our advice is to read
through this page first before you do anything. By the time you get
to the end, you'll say "OK, I get it now!"
Step 1:
Select the virtualCART Grahics Theme that best
matches your site (or use your own), then configure your virtualCART
Shopping Cart by completing our virtualCART
setup configuration form using your Web browser. The configuration
form is fairly long and hints at some of the virtualCART
capabilities, but don't be dismayed. Enter things as best you can.
You can easily change things later using our reconfigure mode. Write
down and save your cart-id code, user name, and password.
Step
2:
Create an html page that you will use as your test page. You
can do all your testing right on your local drive or upload to your
web site. The page should include a single product description and
a photo if applicable. Later, you can include many products with options
on a single or multiple pages, but for now we start with basic functionality.
Step
3:
Download the "add to shopping cart", "view shopping cart" and
the "go to checkout" gif's. You can get the exact color you want from
one of the virtualCART Graphics Themes (our use your own).
Place them on your system in the directory where your product pictures
reside.
Step
4:
Install the "Add to Cart" action by pasting the html code below
into your test page near the item. The "add to cart" action below
is in reality a small form. The form action points to virtualCART,
the data sent to virtualCART
is what is in the hidden variable "item", and the submit button is
the "Add to Cart" image.
<form
action="http://www.cartserver.com/sc/cart.cgi" method=POST>
<input type=image border=0 name=add src="cartadd2.gif" width=154 height=46>
<input type=hidden name=item value="b-2400^widgetb^Wacky
Widget B^6.32^1">
</form>
The first line opens the form and points it to virtualCART.
The
second line is your submit button. The name=add in
blue colored text is what the submit button is named, and tells
virtualCART
to add to cart when it receives the form data. If you are
thinking that the src="cartadd2.gif" could be some other
image, you'd be right. Any image may be used, which can very handy
for customizing your pages.
The
third line is a hidden variable. It is set up as name=item,
and its contents are highlighted in red. This is the information
sent to virtualCART
when you submit the form (click "add to cart"). We'll discuss the
contents of that variable in detail below, but briefly, the item
variable contains your:
cart-id
number
item
part number
item
description
item
price
item
quantity
These
are the five essential fields needed to use virtualCART;
the need for each is self-explanatory. Each of the five pieces of
information is separated by a ^ character. This is our field separator,
a handy tool that allows us to send a lot of information compactly
in a single variable, saving you space and typing time!
After
you paste in the html tags, don't forget to change the five fields
(the part in red) in the item variable to hold the data pertinent
to your test item. Don't change the name of the variable
item, it must stay name=item, since that is the variable
virtualCART
expects to parse data from. Be careful not to mess up the field
separators, and don't use the quotation mark character ( " ) either,
since browsers see that as the close quote, and the remaining contents
of "item" will be lost! Note: If you want to have a quotation mark
character ( " ) in your description, use ".
If
you just CAN'T wait, after you've pasted the four lines above (and
substituted your own data), you should be able to put your test
item in the virtualCART.
Following
is the full description of all fields:
Field
1: Your individual cart-id code. This is unique to
your site, and common to all your products. It must match the
cart-id assigned during configuration (step 1).
Field
2: The part number of your product. Even if you don't use
part numbers, you should have a unique part number for each item
you are selling. Keep them short if possible.
Field
3: The product description. Use only enough text to remind
the customer what the item is when they review their cart contents.
A more detailed description should be on your web page.
Field
4: Item price. Don't put in the $.
Field
5: Contains the quantity of the product to be added to the
shopping cart. Normally 1, but may be any number.
The
following are optional:
Field
6: Contains the individual item shipping/handling cost, if
you configured your cart to use that method of calculating S&H.
Don't use $ here either.
Field
7: Contains the item shipping insurance fee (if any).
Field
8: Contains the Unit of Measure. Defaults to "ea."
Field
9: Contains the item weight. In general, all your products
should have their weight listed, or none of them should. If virtualCART
sees no items with weight assigned, it makes no mention of it.
Field
10: Contains the URL of the image you associate with that
product. You must turn on PICTURE LINKS in the virtualCART
configuration or this will be ignored.
Important
Note: If you use one of the optional fields, you must have the
field separators present as place holders for unused fields or the
field count will be thrown off. For example, to add the product picture
to the example above, you would list it as:
b-2400^widgetb^Wacky Widget B^6.32^1^^^^^http://www.you.com/pic.gif
See
how we skipped fields (item ship fee, ins fee, u/m, item weight) we
didn't care about?
If
you are still a little confused about fields, please visit
here for more information.
Step
5:
Somewhere on your test page, install the "view cart" image/action
similar to step 4. This is so customers can see what is in their cart
without having to put anything into it.
<form action=http://www.cartserver.com/sc/cart.cgi method=POST>
<input type=hidden name=item value="b-2400">
<input type=image border=0 name=view src="view1a.gif" width=154 height=46>
</form>
The
"item" variable for "view shopping cart" contains only your cart-id
code. In this example it is b-2400. The submit image has the
name=view associated with it, which will tell virtualCART
to simply display the contents of the shopping cart.
Step
6:
Somewhere on your test page, install the "goto checkout" image/action
similar to step 4.
<form action=http://www.cartserver.com/sc/cart.cgi method=POST>
<input type=hidden name=item value="b-2400">
<input type=image border=0 name=checkout src="outnow.gif" width=154 height=46>
</form>
The
"item" variable for "goto checkout" contains only your cart-id code.
In this example it is b-2400. The submit image has the name=checkout
associated with it, which will tell virtualCART
to begin the checkout process.
Step
7:
Test your page. You should at this point be able to add your
item to virtualCART,
checkout, and receive your order through e-mail. That is the full
outline of the basic concept. Congratulations! You just graduated!
If
you experience a problem, please review this page to be sure you
followed instructions. The most common cause of problems is in not
substituting your own cart-id code or image source (gif name) for
the values in the examples.
When
all is well, take another look at our example
pages. You'll find a wealth of information on how to use text
boxes and pop-up selections to give your product pages the flexibility
they need. If your site uses frames, visit our frames
example.
|
