The steps below are designed to convey the concepts involved
in setting up web pages to work with the Americart
Server. Americart 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 will say "OK, I get it now!"
Step1
Please review the terms of the Americart Merchant
Service Agreement, then create your Americart account by signing up for
our 14-day free trial.
Write down and save the assigned cart-id code and your chosen password.
Once you've created your cart, you configure it by logging into your account
Here. The form is fairly long, and hints at many
Americart capabilities, but do not be dismayed. Enter things as
best you can; you can easily make changes later using Reconfigure
mode.

Step2
Create an html page to use as your test page. Do your testing
on your local disk drive or upload to your website. The page should
include a single product description and a photo if applicable. Later,
you can include many products with options on single or multiple pages,
but for now we start with basic functionality.

Step3
Download the "add to cart", "view
cart" and
the "go to checkout" graphic files from one of the Americart theme
pages, or use your own if you wish. Place them on your system
in the folder where the test page resides.

Step4
Install the "Add to Cart" action by pasting the html
code below into the test page near the item. The "add to cart" action
below is in reality a small form. The form action points
to Americart. The data sent to Americart is contained
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=hidden name=item value="a-1358^widgetb^Widget B^6.32^1">
<input type=image border=0 name=add src="addtocart.gif" width=154
height=46>
</form>
| To "Copy" the above, highlight
the lines by pressing the mouse button while moving
the pointer over the lines until they are selected.
Release the button, pull down "Edit" and
choose "Copy". In the test page editor, "Paste" the
code in a similar manner, taking care to "Paste" so
the code is interpreted as "html code" and
not simple visible text. |
The first line of code opens the form and points
to Americart.
The second line is a hidden variable setup as name=item.
Its contents, highlighted in red above, are sent to
Americart when you submit the form (click "add to cart").
The item variable
is fully detailed further below, but briefly, it contains:
cart-id code
item part number (optional)
item description
item price
item quantity
Those are the five essential fields needed for Americart.
Each field is separated by a ^ character. This is a field separator,
a technique to store information compactly in a single variable.
The third line is the submit button. The name=add
above is what tells Americart to add to cart when it receives
the data.
The fourth line closes the form. Do not leave this out.
After pasting in the html tags, change the five fields
in the item variable to hold data pertinent to your test
item. Do not change the name of the variable item;
it must be name=item, since that is the variable Americart
parses data from. Be careful not to skew the field
separators, and avoid " characters in the fields since browsers see that
as the closing quote, truncating the item. To have a " in
the description, use "
Then, substitute the filename of the add to cart graphic
you downloaded and saved to the folder where the test
page resides. Any image may be used, allowing full customization
of your website pages. Do not use a textual "submit" button.
Use the graphical method.
At this point, after pasting the four lines of html above
and substituting your own data, you should be able
to add the test item to the cart.
| Here is the full description
of all item variable fields: |
| Field 1 |
Your cart-id code. (assigned at account
configuration in step 1) |
| Field 2 |
Item part number. Optional unique part code for
each item. |
| Field 3 |
Item description. Short description for cart display
and order summary. |
| Field 4 |
Item price. Don't use a $. |
| Field 5 |
Item quantity to initially be added to the cart.
Normally 1. |
| The following are
optional: |
| Field 6 |
Individual item shipping cost, if you configured
your cart to use that method of shipping calculation.
Don't use a $. |
| Field 7 |
Individual item shipping insurance cost (if any). |
| Field 8 |
Item unit of measure, defaults to "ea." |
| Field 9 |
Item weight. Needed if weight based shipping methods
are used. |
| Field 10 |
URL of the item's graphic image. Use if you enabled "PICTURE
LINK" in the cart configuration. |
If using an optional field, insure that the field separators
are present as place holders for unused fields to the
left or the field count will be thrown off. For instance, add a 5.2
lb. product weight to the example code above:
a-1358^widgetb^Wacky Widget B^6.32^1^^^^5.2
Notice the three fields (ship fee, ins fee, u/m) that were
skipped?
Still confused about fields? Visit here for
more information.

Step5
Somewhere on the 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="a-1358">
<input type=image border=0 name=view src="viewcart.gif" width=154
height=46>
</form>
The "item" variable for "view
shopping cart" contains only your cart-id code. In this example it
is a-1358. The submit image has the name=view associated
with it, which will tell Americart to simply display the contents
of the shopping cart. Be sure to change the viewcart.gif
to match the graphic file you are using.

Step6
Somewhere on the 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="a-1358">
<input type=image border=0 name=checkout src="checkoutnow.gif" width=154
height=46>
</form>
The "item" variable for "goto
checkout" contains
only your cart-id code. In this example it is a-1358.
The submit image has the name=checkout associated with it, which
will tell Americart to begin the checkout process. Be sure to change
the checkoutnow.gif to match the graphic file you are using.

Step7
Test your page. You should be able to add the
item to the cart, checkout, and receive the order via
email. That is the full outline of the basic concept. Congratulations!
You just graduated!
If you experience problems, 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 (file name) for the values in the examples.
When all is well, take another look at our sample carts and demo
stores. There you will find a wealth of examples on how
to use text boxes and pop-up selections to give
your product pages the flexibility they need. There
is more info on how to add options to your products in the "How
to tag your pages for Americart" chapter of our Frequently
Asked Questions

Create code snippets quickly using our HTML code generator.

If you cannot resolve a problem, please search our site for a discussion of the issue.
If you still can't find a solution, please email support@cartserver.com.
Please provide concise, detailed problem descriptions. Include
your cart-id in the email subject line if you have already created
an account, and the URL of your test page if relevant.