Setup Guide

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:
Configure your virtualCART® Shopping Cart by completing the sections in your shopping cart control panel that are specific to your business, ie. payment methods, shipping methods and sales tax.  Enter information as best you can. You can easily add features and change setting later.



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:
If you plan on using "add to shopping cart", "view shopping cart" and  "go to checkout" images, 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://[cart-id].vcartserver.com/store/addToCart.aspx" method=POST>

<input type=image border=0 name=add src="/cartadd2.gif" width=154 height=46>

<input type=hidden name=item value="[cart-id]^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 be 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]
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 &quot;.

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:

[cart-id]^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://[cart-id].vcartserver.com/store/addToCart.aspx" method=POST>

<input type=hidden name=item value="[cart-id]">

<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 [cart-id]. 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://[cart-id].vcartserver.com/store/addToCart.aspx" method=POST>

<input type=hidden name=item value=[cart-id]">

<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 [cart-id]. 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.