Do you want to put up a simple store-front, but lack CGI access or expertise? 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:
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; however, everything after a "//" is a comment, where anything goes.
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.utf8.js | Czech (by Jan Egert)
| noper-language-da_DK.utf8.js | Danish (by Glenn Jensen)
| noper-language-de.utf8.js | German (by bjarnat_r@hotmail.com)
| noper-language-de_alt.utf8.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.ascii.js | Esperanto (by Ernie Knolfson of zengarten.com) -- new in nopERcart 2007-08-05
| noper-language-es.utf8.js | Spanish (by Capitán Nemo Comunicaciones)
| noper-language-et.utf8.js | Estonian (by pilv) -- new in nopERcart 2007-08-05
| noper-language-fi.utf8.js | Finnish (by Mikko Lähteenmäki aka ifreq)
| noper-language-fr.utf8.js | French (by Fred of noe.master.online.fr and Jean-Pierre David of pages.videotron.com/jpdsig)
| noper-language-he_IL.utf8.js | Hebrew (by Mr. Eliezer Tavor / MOR / Web-Master)
| noper-language-hu.utf8.js | Hungarian (by Robert Horvath)
| noper-language-it.utf8.js | Italian (by Colomela Francesco)
| noper-language-ms_MY.ascii.js | Malay (by bennyong of hostonfire.com)
| noper-language-nl.utf8.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.utf8.js | Norwegian (by Thomas A. Amundsen of graphic.no)
| noper-language-pdt.utf8.js | Plautdietsch (by me, Eugene Reimer) -- new in nopERcart 2007-08-05
| noper-language-pl.utf8.js | Polish (by Archmag)
| noper-language-pt_BR.utf8.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.ascii.js | Romanian (by Florin B)
| noper-language-ru.utf8.js | Russian (by Vladimir of lukianov.ru) -- new in nopERcart 2007-08-05
| noper-language-sk.utf8.js | Slovak (by Jaro Nemcok)
| noper-language-sl_SI.utf8.js | Slovenian (by Berto art-reef.com) -- new in nopERcart 2007-08-05
| noper-language-sv_SE.utf8.js | Swedish (by Artur Stensson)
| noper-language-sv_SE_alt.utf8.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_CN.utf8.js | Chinese-Simplified (by AHU of 52q.net) -- new in nopERcart 2010-01-28
| noper-language-zh_TW.utf8.js | Chinese-Traditional (by C.J. Ho of SunnyFactory)
| |
<FORM action="shoppingcart.htm" onSubmit="return AddToCart(this)"> <input type=hidden _ID="SP001" _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; |
For Promotional Discounts (eg: 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="SP001" _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; and each value is either a replacement or a to-be-added value, the latter case indicated by a leading plus-sign; for _ID or _NAME adding is string-catenation, for the others it is arithmetic-addition.
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:
Tip from Art Held: when removing the ACTION part of the FORM tag in order to stay on the same page, you may want to modify your onSubmit code to return false, thereby avoiding the "movement" to top of page; that will however interfere with the use of Print_cart_summary, which needs the page to be reloaded.
First it contains:
<FORM>
<SCRIPT> ManageCart(""); </SCRIPT>
</FORM>
Then ONE of the following, depending on the PaymentProcessor you've chosen. (Or more than one for multiple payment methods.)
PayPal (PaymentProcessor "pp"):
<FORM action="https://www.paypal.com/cgi-bin/webscr" method=POST onSubmit="return ValidateCart(this)">
<SCRIPT> PaymentProcessorFields("pp"); </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/api/checkout/v2/checkout/Merchant/YOUR-MERCHANT-ID" method=POST onSubmit="return ValidateCart(this)">
<SCRIPT> gcCurrency="USD"; PaymentProcessorFields("gc"); </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 USD with the currency-code for your currency; eg: GBP.
You will replace BOTH occurrences of YOUR-MERCHANT-ID with your Merchant-ID at Google.
AlertPay (PaymentProcessor "ap"):
<FORM action="https://www.alertpay.com/PayProcess.aspx" method=POST onSubmit="return ValidateCart(this)">
<SCRIPT> PaymentProcessorFields("ap"); </SCRIPT>
<input type=hidden name="ap_currency" value="USD">
<input type=hidden name="ap_merchant" 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 YOUR-EMAIL with the email-address that identifies your Merchant-Account at AlertPay.
2009-03-06: AlertPay is not accepting credit-cards. 2009-04-01: the AlertPay website is dead! 2009-05-19: AlertPay has come back to life, and is accepting credit-cards.
2010-03-23: AlertPay has made INCOMPATIBLE changes to its interface; I'm dropping support for AlertPay; if you want to use them you're on your own.
VirtualTerminalNetwork (PaymentProcessor "vt"):
<FORM action="https://www.virtualterminalnetwork.com/Merchant/ConfirmPayment.asp" method=POST onSubmit="return ValidateCart(this)">
<SCRIPT> PaymentProcessorFields("vt"); </SCRIPT>
<input type=hidden name="merchant_email_id" value="YOUR-EMAIL">
<input type=SUBMIT value="Check-Out">
</FORM>
You will replace YOUR-EMAIL with the email-address that identifies your Merchant-Account at VirtualTerminalNetwork.
InternetSecure (PaymentProcessor "is"):
<FORM action="https://secure.internetsecure.com/process.cgi" method=POST onSubmit="return ValidateCart(this)">
<SCRIPT> PaymentProcessorFields("is"); </SCRIPT>
<input type=hidden name="GatewayID" value="YOUR-MERCHANT-ID">
<input type=hidden name="language" value="English">
<input type=hidden name="ReturnURL" value="http://YOUR-DOMAIN-NAME/shoppingthanks.htm">
<input type=SUBMIT value="Check-Out">
</FORM>
You will replace YOUR-MERCHANT-ID with the identifier for your Merchant-Account at InternetSecure.
LinkPoint (PaymentProcessor "lp"):
<FORM action="https://secure.linkpt.net/lpcentral/servlet/lppay" method=POST onSubmit="return ValidateCart(this)">
<SCRIPT> PaymentProcessorFields("lp"); </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> PaymentProcessorFields("wp"); </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="/cgi-bin/shoppingcheckout-an.pl" method=POST onSubmit="return ValidateCart(this)">
<SCRIPT> PaymentProcessorFields("an"); </SCRIPT>
<input type=SUBMIT value="Check-Out">
</FORM>
You will modify the supplied shoppingcheckout-an.pl replacing the loginID and transactionKey values with those
for your account at Authorize.net.
CGI Checkout (PaymentProcessor "cgi"):
to use a CGI-script called /cgi-bin/shoppingcheckout-op.pl that accepts POST mode:
<FORM action="/cgi-bin/shoppingcheckout-op.pl" method=POST onSubmit="return ValidateCart(this)">
<SCRIPT> PaymentProcessorFields("cgi"); </SCRIPT>
</FORM>
HTML Checkout, when using the two-step approach:
<FORM action="shoppingcheckout.htm" onSubmit="return ValidateCart(this)">
</FORM>
Q: How do I charge shipping as a fraction of price?
A: Give each product a weight equal to its price; the rest of the solution will be obvious.
To hire someone with experience in using nopERcart, try: fredmace@bellsouth.net ; catchy-eyes ; Olympic Peninsula Web Solutions ; FiddleFace Design ; Information Systems Unification ; Art Held .
You may be interested in the modifications made by Art Held to support Free Shipping and a few other things; see www.hikerscamerabelt.com/Scripts/nopercart.js.
I'd like to hear from you if you're using this cart, even if you're not having problems.
And I may mention your site as one using it, although I'm unable to list all of them.
Eugene Reimer 2007-July-31