nopERcart  free  shopping-cart

Do you want to put up a simple store-front, but don't have CGI access to do it?  Then this free JavaScript shopping-cart is exactly what you need.  This software only needs JavaScript, which every browser supports these days.  You won't have to become a database-administrator!  Your products can be on many separate pages.  This complete, simple, easy-to-use shopping-cart makes it easy to implement any e-commerce site.  All that's required is pasting-in the supplied source-code on each page that customers can purchase products from, and revising the supplied shoppingcart.htm file to identify the payment-processor you've chosen. 

Who uses this shopping-cart?  Some of the sites using it are:


Features at a glance:


An Example, or two:

Many of us learn by example, so I recommend looking at:
  • this Sample selling page, along with the View-Cart page it takes you to, and
  • the Javascript source, with Canada-Post shipping-table, and a packing-rules example

    • A second example is for a US retailer shipping by weight-only via UPS & USPS, payment-processing by Google-Checkout in US-dollars;  it also illustrates an alternate approach to add-to-cart popups and non-automatic switching to view-cart:
  • UPS+USPS-Demo selling page
  • Javascript source, with UPS+USPS shipping-table

    • A third example is for a Dutch retailer shipping via TNT-Post, with payment-processing by PayPal in Euros: 
  • TNT-Post-Demo selling page (in Dutch)
  • Javascript source, with TNT-Post shipping-table, and another packing-rules example

    • A fourth example is for a British retailer shipping via Royal-Mail, with payment-processing by PayPal in Pounds-Sterling: 
  • Royal-Mail-Demo selling page
  • Javascript source, with a Royal-Mail shipping-table that offers a 6-way choice

    • An example demonstrating the use of Coupon Discounts: 
  • Coupon-Demo selling page


    • How To use this Shopping-cart:

    Here are the few easy steps to installing & running this shopping-cart:
    1. Download the cart here:

    2. Unzip.  If you don't have an unzipper, head over to www.winzip.com to get one. 


    3. Configure the options, if you wish.  To configure the options, open file nopercart.js in your favorite text-editor.  I recommend notepad under Windows; Linux users won't need a recommendation. 

      Some of the options that are configurable:

      Other Options:  See the Javascript file nopercart.js for a complete list, and description, of all options.  Near the top of the file you'll see comments describing all the options, and after that you'll see assignment statements giving values to them.  Most options are either true/false, a string, or a number;  for true/false options, you enter either true or false, replacing the existing value;  for string options, enter any text you wish between the quote-marks -- this can include HTML tags;  for numeric options, simply enter the number you wish.  However, the ShipTable and PackTable options are arrays of structures that are made up of strings and numbers; the examples in nopercart.js will show you how to specify these options. 

      When editing the options, be aware that punctuation matters in Javascript statements; however, everything after a "//" is a comment, where anything goes.


    4. On each page you wish to sell products from, include the lines:
      <script src=nopercart.js></script> <!-- nopERcart Shopping-Cart, from http://ereimer.net/nopercart.htm -->
      <script src=noper-language-XX.js></script>
      Don't worry -- none of that text will be visible to users on your site.  The only way anyone will you see it is by doing a 'view source' on a page.  The first line is essential; it instructs the browser to load the file containing the Javascript shopping-cart routines. 

      The 2nd line is optional, only needed to make nopERcart use a language other than English.  The language-pack choices are:
      noper-language-cs_CZ_cp1250.js Czech (by Jan Egert)
      noper-language-da_DK.js Danish (by Glenn Jensen)
      noper-language-de.js German (by bjarnat_r@hotmail.com)
      noper-language-de_alt.js German (alternate by Mike)
      noper-language-el_GR_utf8.js Greek-Modern (by bill@vpournaras.gr) -- new in nopERcart 2007-08-05
      noper-language-eo.js Esperanto (by Ernie Knolfson of zengarten.com) -- new in nopERcart 2007-08-05
      noper-language-es.js Spanish (by Capitán Nemo Comunicaciones)
      noper-language-et_utf8.js Estonian (by pilv) -- new in nopERcart 2007-08-05
      noper-language-fi.js Finnish (by Mikko Lähteenmäki aka ifreq)
      noper-language-fr.js French (by Fred of noe.master.online.fr and Jean-Pierre David j-pdavid@videotron.ca)
      noper-language-he_IL_iso8859-8.js Hebrew (by Mr. Eliezer Tavor / MOR / Web-Master)
      noper-language-hu_iso8859-2.js Hungarian (by Robert Horvath)
      noper-language-it.js Italian (by Colomela Francesco)
      noper-language-ms_MY.js Malay (by bennyong of hostonfire.com)
      noper-language-nl.js Dutch (by Ron A.J. Hartendorp of Computer Network Services, pra@xidis.com, and Corina van Weert of catchy-eyes.nl)
      noper-language-no.js Norwegian (by Thomas A. Amundsen of graphic.no)
      noper-language-pdt.js Plautdietsch (by me, Eugene Reimer) -- new in nopERcart 2007-08-05
      noper-language-pl_utf8.js Polish (by Archmag)
      noper-language-pt_BR.js Portuguese-Brazil (by Jane Araújo)
      noper-language-pt_PT_utf8.js Portuguese-Portugal (by Phosphoros) -- new in nopERcart 2007-08-05
      noper-language-ro.js Romanian (by Florin B)
      noper-language-ru_cp1251.js Russian (by Vladimir of lukianov.ru) -- new in nopERcart 2007-08-05
      noper-language-sl_SI_utf8.js Slovenian (by Berto art-reef.com) -- new in nopERcart 2007-08-05
      noper-language-sk_cp1250.js Slovak (by Jaro Nemcok)
      noper-language-sv_SE.js Swedish (by Artur Stensson)
      noper-language-sv_SE_alt.js Swedish (improved alternate by Béatrice: bea@ludd.luth.se or www.ludd.luth.se/~bea)
      noper-language-tr_utf8.js Turkish (by Yetkin Degirmenci of yetkindegirmenci.com) -- new in nopERcart 2007-08-05
      noper-language-zh_TW_big5.js Chinese-Traditional (by C.J. Ho of SunnyFactory)


    5. For each product you wish to sell, create a small FORM tag that looks something like: 
      <FORM action="shoppingcart.htm" onSubmit="return AddToCart(this)">
<input type=hidden  _ID="Sample-001" _NAME="My Sample Product" _PRICE="19.95" _WEIGHT="30" _LENGTH="25" _WIDTH="16" _HEIGHT="10">
Quantity: 
<input type=text  name="_QUANTITY" value="1" size=2 maxlength=3 onChange="this.value=CKquantity(this.value)">    
<input type=SUBMIT  value="Add to Cart">
</FORM>
      Of course you will replace the right-side of _ID, _NAME, _PRICE, _WEIGHT, _LENGTH, _WIDTH, _HEIGHT with information for your product.  If shipping-size doesn't affect your shipping-costs, simply omit the _LENGTH, _WIDTH, _HEIGHT attributes.  On the other hand, if size alone determines your shipping-costs then omit the _WEIGHT attribute. 

      For Quantity-Discount pricing, the _PRICE can be a comma-separated list of terms, such as:
      3.95 -- means 3.95 each;
      3.95,2:3.00 -- means 3.95 for the first, 2nd and subsequent are 3.00 each;
      3.95,10=2.99 -- means 3.95 each, or exactly 10 for 29.90;
      3.95,10=2.99,10:2.99 -- means 3.95 each, 10 or more are 2.99 each;
      3.95,2:3.00,4:2.75,8:2.50  -- means 2nd...are 3.00, 4th...are 2.75, 8th and subsequent are 2.50;
      3.95,2:-30,GRP01 -- means 2nd and subsequent are 30% off, and this applies across all products in the group GRP01;
      One _PRICE can contain any number of ":" or "=" terms, at most one starting with a letter to name a group;  the ":" and "=" terms may be interspersed, or not, but the ":" terms must appear in increasing order by left-side, and "=" terms likewise.  Exact-quantity ("=") discount-prices are only permitted within a group where all products have identical prices (anything else would be so bloody hard to explain, I'm guessing nobody will want such);  no such restriction applies to the N-or-more (":") discount-prices.

      For promotional Discount-Coupons, the _PRICE can be something like:
      >=40:-15.00   -- means if the pre-tax pre-shipping subtotal is at least 40.00 this 15.00 discount applies;
      >=0:-10.00 -- means this 10.00 discount applies without any qualification;
      >=0:-25% -- means this 25% discount applies without any qualification;

      If you have USERCHOICE's for your customers (eg: for Colour, Style, etc), then your form will look something like: 

      <FORM action="shoppingcart.htm" onSubmit="return AddToCart(this)">
<input type=hidden  _ID="Sample-001" _NAME="My Sample Product" _PRICE="19.95" _WEIGHT="30" _LENGTH="25" _WIDTH="16" _HEIGHT="10">
Size: 
<select name=USERCHOICE>
    <option _ID="+S" _NAME="+ Small">  Small
    <option _ID="+M" _NAME="+ Medium"> Medium
    <option _ID="+L" _NAME="+ Large">  Large
</select>
Colour: 
<select name=USERCHOICE2>
    <option _ID="+R" _NAME="+ Red">   Red
    <option _ID="+W" _NAME="+ White"> White
    <option _ID="+B" _NAME="+ Blue">  Blue
</select>
Quantity: 
<input type=text  name="_QUANTITY" value="1" size=2 maxlength=3 onChange="this.value=CKquantity(this.value)">    
<input type=SUBMIT  value="Add to Cart">
</FORM>

      Other sorts of USERCHOICE selectors are illustrated in the supplied shopping.htm example.  A product can have up to ten such USERCHOICEn choices, for n being emptystring or 1..9;  each can be either a select-statement or a set of radio-buttons;  each can supply values for any of _ID, _NAME, _PRICE, _WEIGHT, _LENGTH, _WIDTH, _HEIGHT;  the value for _ID or _NAME can be either a replacement or a string-to-be-added;  for a numeric attribute, either a replacement or a number-to-be-added;  in both cases a leading plus-sign indicates to-be-added. 

      The above code snippets will take your customer directly to the View-Cart page upon clicking Add-to-Cart.  If you wish to avoid that:  remove the ACTION part of the FORM tag;  consider enabling the DisplayPopupOnAdd option;  consider adding the following to the above snippet so that customers see a summary of their cart-contents, and can get to your View-Cart page when they wish to:
      <p>Your cart contains <script>Print_cart_summary(" item"," items"," at a cost of ");</script> &nbsp; <a href=shoppingcart.htm>View Cart</a>


    6. Setup a View-Cart page (named shoppingcart.htm in these examples).  You will use ONE of the following, depending on the PaymentProcessor you've chosen. 

      PayPal (PaymentProcessor="pp"):
      <FORM action="https://www.paypal.com/cgi-bin/webscr" method=POST onSubmit="return ValidateCart(this)">
      <SCRIPT> ManageCart(); </SCRIPT>
      <input type=hidden name="currency_code" value="USD">
      <input type=hidden name="return" value="http://YOUR-DOMAIN-NAME/shoppingthanks.htm">
      <input type=hidden name="business" value="YOUR-EMAIL">
      <input type=SUBMIT value="Check-Out">
      </FORM>
      You will replace "USD" with the currency-code for your currency; eg: "CAD".  You will replace "http://YOUR-DOMAIN-NAME/shoppingthanks.htm" with the URL of your own Thanks-for-your-Purchase page.  You will replace "YOUR-EMAIL" with the email-address that identifies your Merchant-Account at PayPal. 

      Google-Checkout (PaymentProcessor="gc"):
      <FORM action="https://checkout.google.com/cws/v2/Merchant/YOUR-MERCHANT-ID/checkoutForm" method=POST onSubmit="return ValidateCart(this)">
      <SCRIPT> ManageCart(); </SCRIPT>
      <input type=IMAGE src="http://checkout.google.com/buttons/checkout.gif?merchant_id=YOUR-MERCHANT-ID&w=180&h=46&style=white&variant=text&loc=en_US>
      </FORM>
      You will replace BOTH occurrences of YOUR-MERCHANT-ID with your own Merchant-ID at Google. 

      LinkPoint (PaymentProcessor="lp"):
      <FORM action="https://secure.linkpt.net/lpcentral/servlet/lppay" method=POST onSubmit="return ValidateCart(this)">
      <SCRIPT> ManageCart(); </SCRIPT>
      <input type=hidden name="storename" value="YOUR-STORE-ID">
      <input type=SUBMIT value="Check-Out">
      </FORM>

      WorldPay (PaymentProcessor="wp"):
      <FORM action="https://select.worldpay.com/wcc/purchase" method=POST onSubmit="return ValidateCart(this)">
      <SCRIPT> ManageCart(); </SCRIPT>
      <input type=hidden name="instId" value="YOUR-WORLDPAY-ID">
      <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="Check-Out">
      </FORM>

      Authorize.net (PaymentProcessor="an"):
      <FORM action="https://secure.authorize.net/gateway/transact.dll" method=POST onSubmit="return ValidateCart(this)">
      <SCRIPT> ManageCart(); </SCRIPT>
      <input type=hidden name="x_Login" value="YOUR-ID">
      <input type=SUBMIT value="Check-Out">
      </FORM>

      CGI Checkout (PaymentProcessor="cgi"):
      If you're equipped with a secure server, then you can go this route.  For example, if your secure server is www.secure.com, your checkout-script is shoppingcheckout.pl, and it accepts POST mode, then your FORM tag would be: <FORM action="https://www.secure.com/shoppingcheckout.pl" method=POST onSubmit="return ValidateCart(this)">

      HTML Checkout (PaymentProcessor=""):
      If you want the two-step approach, then your FORM tag will be: <FORM action="shoppingcheckout.htm" onSubmit="return ValidateCart(this)">


    7. Most of you are now done!  ONLY if you've chosen TWO-step checkout, do you need a checkout page.  Your checkout page (named shoppingcheckout.htm in these examples), will be almost identical to ONE of the variants from the preceding step.  The only essential difference: it calls CheckoutCart() instead of ManageCart().  The supplied example has another difference: a form for the customer to enter name & address. 


    8. (Optional) Include a "Javascript Needed" warning in your pages, to alert any user who has disabled Javascript to enable it in order to shop at your store.  And a "Cookies Needed" warning to alert a user who has disabled cookies.  Here are snippets you can add to all your shopping pages, to issue those warnings when they're needed:
      <NOSCRIPT>Our shopping-cart needs JavaScript.  Please enable JavaScript in your browser's preferences.</NOSCRIPT>
      <script>if(typeof navigator.cookieEnabled=="boolean" && !navigator.cookieEnabled)alert("You need to enable Cookies in your browser, before our shopping-cart will work for you.");</script>


    Changing the look of the viewcart or checkout page:

    You can redesign the look of this shopping-cart with no modifications to the code at all.  Here are the STYLE classes you can redefine in your viewcart and checkout pages, and what they are used for:


    Licensing?

    This code is Free!  That means commercial or non-commercial use.  The only conditions are those of the Lesser GPL -- see http://www.gnu.org/licenses for the details. 


    Support?

    For questions about the nopERcart shopping-cart, just ask  ereimer@shaw.ca . 

    To hire someone with experience in using nopERcart, try:  fredmace@bellsouth.net ;  catchy-eyes . 


    That's all there is to it.

    Have fun, and happy selling! 

    I'd like to hear from you if you're using this cart, even if you're not having problems.  I'll be happy to mention your site as one using it. 
    Eugene   2007-July