Add a shopping cart to your site in minutes!

NeonGecko's Javascript Shopping Cart is a fully functional shopping cart that you can cut-and-paste into any website. It does not require any programming or scripting support from your hosting service.

How it Works

You create a html page on your site to hold the cart. You insert code on this page that sources the javascript files. This code will create the interactive shopping cart.

You then put "Add to Cart" buttons on your product pages. The button sends all the information to the cart in the form of an encoded link. This link contains all of the product information the cart needs to compute the order.

Users can add products to their cart, adjust quantities, and then proceed to Google Checkout for payment processing. To see it in action, visit our Widget Store Demo Site.

Getting Ready

Payment will be processed through Google Checkout.
If you haven't done so already, Sign up for a Merchant Account.

You will need to configure your account to allow unsigned carts. Unsigned carts are not tamper-proof, so you will need to make sure that the prices are correct before you ship the order. Uncheck the checkbox on the Settings -> Integration Page labeled "My company will only post digitally signed carts." We wish there were a way to use Javascript to sign carts, but doing so would mean sending your secret key to your customer's browser, which would be surely be intercepted.

When you have successfully set up your Google Checkout account, enter your Google merchant ID here.


Adding the Shopping Cart Page

Next, you'll need to create a page on your site to hold the cart. The "Add to Cart" button will need to know where the cart is. When you know the URL of your cart, enter the path to it below. Like any other link on your site, you have the choice of whether to use the full "http://...." link or just a partial (relative) link. Generally, relative links are preferred, but will need to to be sufficient to take the user from the product page to the cart page. If its easy to do, place the cart in its own directory. The cart stores itself in a cookie, and if the cart lives in its own directory, the cookie will not be sent with requests for other objects.

Shopping Cart Options

Shipping charges will be computed based on two parameters. You can charge a base fee for each order, and you can specify shipping charges per product. If you wish to charge a base fee for each order, enter the amount below.

You can control the appearance of the cart to match your site's theme. Download a Sample CSS File that you can customize and include in your stylesheets.

You can optionally specify advanced cookie parametes. In most cases, leaving these settings blank is the correct thing to do. Cookie Path defaults to the directory holding the cart.

*optional
*optional
*optional
*optional

Shopping Cart Code

Copy and paste the code below onto your cart page.

Congratulations! You have a working shopping cart. Now lets make some "Add to Cart" buttons.


Make Add to Cart Buttons

The button links to the cart page with all of the product information encoded in the URL. You'll need to use this tool to generate the buttons. The link is "child-proof", meaning that it resists tampering by unsophisticated users. Because we cannot submit signed carts using Javascript, any determined user could submit an order with incorrect pricing. It is important, therefore, to make sure the pricing is correct before fulfilling the order, just as you would with a traditional "catalog order form".

The SKU is your partnumber for the product. It is required, so make something up if you don't have partnumbers. Name and Price should be obvious.




The cart will link back to the product page if you supply a path below. As with any other link, you can choose to use the entire "http://...." URL or just a partial, relative path. In general, relative paths are preferred. The path will need to be sufficient to send the user from the cart page to the product page.


Use the Product Shipping Fee to specify shipping charges for the product. This fee will be multiplied by the quantity the user purchases. Entering a zero for your Product Shipping Fee means that adding this product does not increase the total shipping charges. A blank Product Shipping Fee will result in free shipping, unless another product is in the cart which has a Product Shipping Fee. The difference between blank and zero only matters if you have a Base Shipping Fee above.


If you want, you can create a pull-down option list for your product. This is useful for clothing that comes in different styles or colors. You specify the name of the option and enter the list of values for the selection list, one per line.


Add to Cart Button Code

Copy and paste the code below onto your product page.

Congratulations! You've successfuly created an "Add to Cart" button. Repeat the steps above for each product in your store.

Further Customization

If you want to further customize the look and feel of the "Add to Cart" button, go right ahead. The magic is in the url, so feel free to make text links, custom buttons, even email a URL which will add an item to the cart.

Privacy

This JavaScript Shopping Cart does not send any information about your orders or products to any other site except Google.com.

If you followed the instructions above, you have placed code on your site that sources some files hosted on www.neoncart.com. Specifically, the Javascript Code Base and the Add to Cart Button. If your users load these files from our servers, then we will see it in our log files. If you are concerned about referrer logs, you should copy those files to your own server and modify the links appropriatly. If you take that step, then absolutely no information is ever sent to our servers. In that case, you should check back often for newer versions of the code.

License and Warranty

This page is copyright 2008 by NeonGecko.com All Rights Reserved. The javascript code that makes the cart work is published under the terms of the GNU General Public License. You are free to redistribute and/or modify the code according to the terms of the GNU GPLv3. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Link

The cut-and-paste code snippet for the cart page contains a link back to this page. We hope that you leave it there, as it will help other users find this great tool. If you decide you don't want to link to us, you are free to edit the code to remove it.

Are you using our cart?

If you are using our cart, let us show you some love! We are planning to showcase stores that use our cart. Send us your information and we might link to your store.