Vipcart Example 3

Back to Examples
Vipcart EXAMPLE 3. ONE CLICK ADD WITH FRAMES

Below is an example of how to use the Vipcart with frames and "one click" adding.
Save this page on your harddisk and open the saved page in Notepad or your favourite HTML-editor to customize it to fit your needs.

If you use notepad or an other textbased HTML-editor
The instructions of how to use this page is written in the within the HTML comment-tags !

If you use a WYSIWYG editor such as Frontpage, Netscape Composer, Dreamweaver etc.
The instructions of how to use this page is written with (blue text)

When you are ready to publish your webstore you can (and should) ofcourse delete all instruction lines AND this box. Then upload your new pages on your webhotel/webserver.

(To understand how to set up your webstore you should know how to use the INPUT tags of HTML or atleast how they work in your HTML-editor
Try http://www.blooberry.com/html/intro.htm for a great HTML-guide)

(This page sells 3 items and uses the DIRECT LINK SUBMIT method.( AKA the GET Method) This means that each Article/Product can be added to the shoppingcart with just one mouse-click. An example of such a link could be:

http://store.vipcart.com/?id=42&addto=1&returnto=http://www.vipcart.com/&q0=1&p0=100&item0=Nice%20Shirt&w0=10

To be able to understand the structure of this link we separate this link at the ?-character and at each &-character. Then we will get:

http://store.vipcart.com/ (This is the call of the Vipcartprogram) This is separated with a ?
id=42 (This tells Vipcart your UserID so it can use your settings at Vipcart. This variable MUST ALWAYS be set) This is separated with a &
addto=1 (This tells Vipcart that you want to add items to the shoppingcart) This is seperated with a ?
returnto=http://www.vipcart.com/ (This tells Vipcart what page it shall return to when the user clicks "continue shopping") This is separated with a &
q0=1 (This tells Vipcart to add 1 item) This is separated with a &
p0=100 (This tells Vipcart the price of the item we want to add) This is separated with a &
item0=Nice%20Shirt (This tells Vipcart the Item information/description) This is separated with a &
w0=10 (This tells Vipcart the weight of the item, NOTE! To use the weight feature you MUST set Weight to "Visible" in the "ShoppingCart content table & fieldwidths" section of the control panel)

This link would call the Vipcart and add 1item with the item information "Nice Shirt", with the price 100, and the weight 10. And when you click "Continue shopping" you will return to http://www.vipcart.com/

The thing you must think about is: when you send variables using this method you can not use any character. Try to only you alphabetical letters and numbers. Allmost all other character must be transformed to %nn . where nn represent the hexadecimal number of the characters ASCII-number. Confusing? Just use the below list if you want to use special characters in your variables:

[space] = %20
! = %21
" = %22
& = %26
? = %2F
+ = %2B
; = %3B
, = %2C
= = %3D

The characters / . and - can be used as without transforming them.
Example: We want to add an Article/Product with The Item information text "Very nice skirt, The latest from Paris!" Then the converted text would read: "Very%20nice%20skirt%2C%20The%20Latest%20from%20Paris%21"

And in a complete link it would look like:
http://store.vipcart.com/?id=42&addto=1&returnto=http://www.vipcart.com/&q0=1&p0=800&item0=Very%20nice%20skirt%2C%20The%20Latest%20from%20Paris%21

Now look at the example below to see how it is used in a webpage.

The best way for you to learn how to use the Vipcart shoppingcartsystem is to test your way though. )

WELCOME TO THE SUIT STORE

(Note that as we use frame we must also set the "target" tag of all links to "cart", so the cart will be updated in the fram "cart". And the "returnto" tag should be set to the framepage of the page you want to return to when clicking "continue shopping" in the order page of the cart. And that is in this case "example3frame.htm".)

Nice Shirt Price $30
*Fine Jacket* Price $99
Cool Pants Price $50

(to add more items to this page, just continue in the same manner as above. You can have an unlimited number of items on each page)