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.