Free Javascript Shopping Cart

NOP's Free Shopping Cart

Version 4.4.0

Have you ever wanted to put up a simple store front, but not had CGI access to do it, or wish to lower your server overhead? Then this free JavaScript shopping cart is exactly what you need. Every browser supports JavaScript these days, and with the use of NOSCRIPT tags, those very few who have turned it off are alerted to re-enable it during the duration of their shopping experience. This script also features the ability to have your products on many pages -- you do not have to have all of your products on one page, like so many of the other solutions. This complete, simple to use shopping cart is easy to implement on almost any site. All that is required is pasting in the source code on every page that you can purchase products from, and on the final checkout page.

Who uses this shopping cart? Hundreds of sites on the Internet, just a few of which are:

Features at a glance:

  • Client-side scripting -- no CGI required
  • Secure servers with CGI or PHP supported if available
  • Multiple product pages -- no limits
  • Product quantity selection
  • Complete 'Manage Cart' page
  • Product ID, Name/Description, and amounts passed
  • Shipping Costs
  • Multiple Additional information fields (ie. color, size, etc) - Enhanced in version 4.4!
  • Regional Tax Costs - New version 4.3!
  • Configurable for almost every currency type.
  • Minimum order, configure a minimum purchase amount before users are allowed to checkout - New version 4.3!
  • 19 Languages Supported!
    • English
    • Brazilian (thanks to Jane Araújo for the translation!)
    • Chinese [Traditional Chinese in Big5 Encoding] (thanks to C.J. Ho from SunnyFactory for the translation!)
    • Czech (thanks to Jan Egert for the translation!)
    • Danish (thanks to Glenn Jensen for the translation!)
    • Dutch (thanks to Ron A.J. Hartendorp of Computer Network Services, and pra@xidis.com for the translation!)
    • Finnish (thanks to Mikko Lähteenmäki aka "ifreq" for the translation!)
    • French (thanks to Fred from noe.master.online.fr for the translation!)
    • German (thanks again to Ron A.J. Hartendorp of Computer Network Services and Angela Stascheit for the translation!)
    • Hebrew (thanks to Mr. Eliezer Tavor / MOR / Web-Master for the translation!)
    • Hungarian (thanks to Robert Horvath for the translation!)
    • Italian (thanks to Colomela Francesco for the translation!)
    • Malay (thanks to bennyong from www.hostonfire.com for the translation!)
    • Norwegian (thanks to Thomas A. Amundsen of graphic.no for the translation!)
    • Polish (thanks to Archmag for the translation!)
    • Romanian (thanks to Florin B for the translation!)
    • Slovak (thanks to Jaro Nemcok for the translation!)
    • Spanish (thanks to Capitán Nemo Comunicaciones for the translation!)
    • Swedish (thanks to Artur Stensson for the translation!)
  • 3rd Party Payment Processor Support
    • Authorize.net
    • WorldPay
    • LinkPoint

Ready to use the script?

Most of us learn by example, so I recommend downloading the fully working sample site, and reading the posts in the Support Forums.

For those looking for a more complete description, there are a few easy steps to follow to run the shopping cart:

  1. Download the cart here:

  2. Uncompress the shopping cart with a zip file decompressor. If you do not have one, head over to www.winzip.com to get one.

  3. Configure the script options, if you wish. To configure the options, open up the file nopcart.js in your favorite text editor. I recommend notepad under Windows, or kwrite under Linux. The following options are configurable:
    Options For Everyone:
    • Display Notice:Controls whether the user is provided with a popup letting them know their product is added to the cart.
    • Display Shipping Column:Controls whether the managecart and checkout pages display individual shipping cost columns for each product. Set this to 'true' if each product you sell has it's own shipping cost associated with it.
    • Display Shipping Row: Controls whether the managecart and checkout pages display a row at the bottom of the table for shipping cost totals.
    • Display Tax Row: Controls whether the managecart and checkout pages display tax cost total row at the bottom of the table.
    • Tax Rate: Your area's current tax rate, ie: if your tax rate was 7.5%, you would set Tax Rate = 0.075. You can set this to 0.0 if you do not wish tax to be calculated.
    • Tax By Region: Turning this option on makes your shopping cart prompt users for information to determine if they should be charged tax. For example, if your store is in Arizona, USA you only need to charge tax to Arizona residents, so you can set this option to allow you to collect tax only from Arizona residents.
    • Tax Prompts: The messages that users are prompted with are configurable.
    • MinimumOrder: number, the minium dollar amount that must be purchased before a user is allowed to checkout. Set to 0.00 to disable.
    • MinimumOrderPrompt: string, Message to prompt users with when they have not met the minimum order amount.
    • Monetary Symbol: The symbol which represents dollars/euro, in your locale.
  4. PaymentProcessor: The two digit processor code. Support payment processor codes are:
    • Authorize.net (an)
    • Worldpay (wp)
    • LinkPoint (lp)
    Options For Programmers: (Most people won't use these)
    • OutputItem<...>: The name of the pair value passed at checkout time. Change these only if you are connecting to a CGI script and need other field names, or are using a secure service that requires specific field names.
    • AppendItemNumToOutput: true/false, if set to true, the number of each ordered item will be appended to the output string. For example if OutputItemId is 'ID_' and this is set to true, the output field name will be 'ID_1', 'ID_2' ... for each item.
    • HiddenFieldsToCheckout: true/false, if set to true, hidden fields for the cart items will be passed TO the checkout page, from the ManageCart page. This is set to true for CGI/PHP/Script based checkout pages, but should be left false if you are using an HTML/Javascript Checkout Page. Hidden fields will ALWAYS be passed FROM the checkout page to the Checkout CGI/PHP/ASP/Script
    You will see these options near the top of the file. Each option is either true/false, a string, or a number. For true/false fields, you must enter either true or false, replacing the existing option. For string options, enter in any text you wish between the single quotes. This can include HTML tags, or escape characters. For number fields, simply enter the number you wish.

  5. On each page you wish to sell products from, or display the cart, include the lines:
    <SCRIPT SRC="language-en.js"></SCRIPT>
    <SCRIPT SRC="nopcart.js">
      //=====================================================================||
      //               NOP Design JavaScript Shopping Cart                   ||
      //---------------------------------------------------------------------||
      //       Visit NOP Design at http://www.nopdesign.com/freecart         ||
      //=====================================================================||
    </SCRIPT>
    
    You can change the language that NOPCart uses by including different language packs in the first line. The available language packs are:
    • English: language-en.js
    • Brazilian: language-br.js
    • Chinese [Traditional Big5 Encoded]: language-cb5.js
    • Czech: language-cz.js
    • Danish: language-dk.js
    • Dutch: language-nl.js
    • Finnish: language-fi.js
    • French: language-fr.js
    • German: language-ge.js
    • Hebrew: language-il.js
    • Hungarian: language-hu.js
    • Italian: language-it.js
    • Malay: language-my.js
    • Norwegian: language-no.js
    • Polish: language-pl.js
    • Romanian: language-ro.js
    • Slovak: language-sk.js
    • Spanish: language-sp.js
    • Swedish: language-se.js

    Don't worry -- none of this text will be visible to users on your site. The only way you'll see this is if you choose 'view source' on a page. It's important you include this line, since it instructs the browser to load the shopping cart file.

    Don't forget to include the proper relative path to the nopcart.js file if your files are not all in the same directory!

  6. For each product you wish to sell, create a small FORM tag with:
    • Price
    • Name or Short Description
    • Product ID or Part Number
    • Shipping Cost
    • Additional Information (Up to 4)

    This form will look something like:
        <!--Shopping Cart Product Begin-->
        <P><FORM NAME=order>
        Quantity: 
        <input type=text size=2 maxlength=3 name=QUANTITY onChange='this.value=CKquantity(this.value)' value="1">    
        <input type=hidden name="PRICE" value="19.95">
        <input type=hidden name="NAME" value="My Sample Product">
        <input type=hidden name="ID_NUM" value="Sample ID 001">
        <input type=hidden name="SHIPPING" value="5.95">
        Select a color: 
        <select name=ADDITIONALINFO>
            <option value="Red">  Red
            <option value="Blue"> Blue
            <option value="White">White
        </select>
        Select a size: 
        <select name=ADDITIONALINFO2>
            <option value="Small">  Small
            <option value="Medium"> Medium
            <option value="Large">Large
        </select>
        <input type=button value='  Add to Cart  ' onClick='AddToCart(this.form)'>
        <a href="managecart.html">Check out now</a>
        </FORM>
        <!--Shopping Cart Product End  -->
    	
    Of course you will replace the 'value=' section with the information for your product. If you do not have any additional information to prompt for (ie. Size, Color, Style, etc.), or do not wish to charge for shipping simply leave those fields off the form.

    If you wish to have the cart go directly to a manage cart page when a product is added, just replace the FORM tag like this: <FORM NAME=order ACTION="managecart.html"> -- of course replacing managecart.html with the name of your managecart page.

  7. Setup a 'manage cart' page. All you have to do is add the following line into your HTML page to have the shopping cart displayed, and the form elements written into the page:
        
        <!--Shopping Cart ManageCart Begin-->
        The items listed below are currently in your shopping cart:
        <p>
        <FORM ACTION="checkout.html" METHOD="GET" onsubmit="return ValidateCart(this)">	
        <SCRIPT>
            ManageCart();
        </SCRIPT>
        
        <INPUT type=SUBMIT value="   Check Out   ">
        </FORM>	
        <!--Shopping Cart ManageCart End  -->
        

    Make sure to specify the correct location of your checkout page as the FORM ACTION. For example, if your checkout page was on a secure server (www.secure.com), named checkout.cgi, and could accept POST mode, your FORM tag would be: <FORM ACTION="https://www.secure.com/checkout.cgi" METHOD="POST" onsubmit="return ValidateCart(this)"> Most user's will not use CGI based checkout pages, but if you do, make sure to set the HiddenFieldsToCheckout option to true.

  8. Setup a checkout page. If you have a secure server, and CGI access, the form action on this page should point at it. If you are accepting credit card numbers, a secure server really should be used. If you have CGI access, place the file checkout.pl into your cgi-bin directory, and point the FORM ACTION from this checkout page to it. If you don't have CGI, but you can access scripts, place the file checkout.php on your server, and point the FORM ACTION from the checkout page to it. This checkout script (either Perl or PHP) will write all of your orders to a CSV file which can be viewed by Microsofy Excel, or Sun Star Office -- as well as send both a confirmation email to you and your customer(s). To set the location of this file, and your E-Mail address, simply open the checkout.pl or checkout.php file in a text editor, and read the options at the top.

    Your checkout page is going to look something like:

        
        <!--Shopping Cart Checkout Begin-->
        The items listed below are currently in your shopping cart:
        <p>
        <FORM ACTION="/cgi-bin/checkout.pl" METHOD="POST">	
        <SCRIPT>
            CheckoutCart();
        </SCRIPT>
        
        Name:    <input type="text" name="b_first"> <input type="text" name="b_last">
        Email:   <input type="text" name="b_email">
          ... Your other form data here...
    
        <INPUT type=SUBMIT value="   Submit Order   ">
        </FORM>	
        <!--Shopping Cart Checkout End  -->
        

    If you do not have your own CGI or PHP capability, then use your ISP's 'formmail' or 'mailto' scripts. Most EVERY ISP has one available for you to use. Your checkout page will look exactly the same, except for the FORM ACTION, and any 'hidden' fields your ISP will tell you about. In most cases, your form action will look something like: <FORM ACTION="/cgi-bin/formmail" METHOD="POST">
    At this point,most of you are done!

    If you are absolutely sure you have no mail script available, you can use the FORM line <FORM ACTION="mailto:spam@nopdesign.com" ENCTYPE="text/plain"> where the email address is your own. This syntax will not work with some browsers/aol. Do not write me about this not working, or opening up a blank email....

    Do you use a payment processor/gateway? If so -- this section is just for you. Here are some sample checkout pages for the supported payment processors. Remember to configure your nopcart.js script to use the payment processor you have selected first!! Also, check with your processor to make sure you have the most current FORM ACTION line. This section is provided as a reference, and should get you started. There are more options that the documentation your payment processor provided will explain.

    • LinkPoint

         <FORM ACTION="https://secure.linkpt.net/lpcentral/servlet/lppay" METHOD="POST">	
            <SCRIPT>
               CheckoutCart();
            </SCRIPT>
         <INPUT type="hidden" name="storename" value="--ENTER YOUR STORE ID HERE--">	
         <INPUT type=submit value="Proceed to payment">
         </FORM>	
         

    • WorldPay

         <FORM ACTION="https://select.worldpay.com/wcc/purchase" METHOD="POST">	
            <SCRIPT>
               CheckoutCart();
            </SCRIPT>
         <input type=hidden name="instId" value="--ENTER WORLDPAY ID HERE--">
         <input type=hidden name="currency" value="USD">
         <input type=hidden name="testMode" value="0">
         <input type=hidden name="cartId" value="WebPurchase">
         <INPUT type=submit value="Proceed to payment">
         </FORM>	
         

    • Authorize.net

         <FORM ACTION="https://secure.authorize.net/gateway/transact.dll" METHOD="POST">	
            <SCRIPT>
               CheckoutCart();
            </SCRIPT>
         <INPUT TYPE=HIDDEN NAME="x_Login" VALUE="--ENTER YOUR ID HERE--">
         <INPUT type=submit value="Proceed to payment">
         </FORM>	
         

  9. (Optional) Include a "No JavaScript" warning in your pages. This will alert users without Javascript that they should update their browsers before returning to your store.

        
        <NOSCRIPT>
        Whoops, we detected that your browser does not have JavaScript, or it is disabled.  Our product catalog
        requires that you have JavaScript enabled to order products.  <a href="http://www.netscape.com">Netscape</a>
        and <a href="http://www.microsoft.com/ie">Microsoft</a> offer free browsers which support JavaScript.
        If you are using a JavaScript compliant browser and still have problems, make sure you have JavaScript enabled in
        your browser's preferences.
        </NOSCRIPT>
        

Changing the look of the managecart or checkout page

You can use cascading style sheets to format the mangecart page table with no modifications to the code at all. These are the classes embedded into the checkout page, and what they are used for:
  • nopcart - This is the class for the main table. You can specify borders, background colors, etc here.
  • nopheader - This class is used for the descriptive headers of the shopping cart table.
  • nopentry - This class is used for each product entry in the user's shopping cart.
  • noptotal - This class is used for the rows displaying the users subtotal, shipping and total costs.

Looking for some samples?

Then head on over to our demo store at http://www.shop.nopdesign.com. If you wish to download the entire site so you can view all the source or modify it to use for your site, download the file: samplesite.zip.

Licensing?

This code is Free! That means commercial or non-commercial use. About the only thing I ask is that you don't claim that you wrote it. If you want to put it on a CD and distribute it, that's okay too. You do not have to display a logo, or a link back to NOP Design, but if you would like to, here is an image you can use to link back to www.nopdesign.com, or www.nopdesign.com/freecart.

Support?

NOP Design provides limited support with the free shopping cart. The best place to get help are the Support Forums. We do read these, and your questions will get answered as soon as possible. Typically, it takes one to two weeks to get a detailed response. Your questions may already be on there as well -- please check before posting a new thread.

That's all there is to it. Have fun, and happy shopping!

This site, the support forums and all programs here are free, but to help cover server costs, bandwidth and other expenses, you can donate through PayPal any amount you choose. I hope you enjoy the applications and the site!

_Scott


Looking for more scripts? Try these sites:
ScriptSearch.com | A1 Javascripts | JavaScript Kit | Jan-s Script Portal