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. NopERcart by Eugene Reimer is an enhanced variant of nopcart v4.4.
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.
Q: Why did you drop AlertPay, and how much work would it be to support their new interface?
A: For one thing AlertPay has been borderline useless as a payment-processor what with being completely dead at times, and
being semi-alive but not accepting any credit-cards at other times. But when they made, without notice, an incompatible change to their interface such that
previously working websites abruptly became broken, that's when I said "I'm not willing to play that game".
Before they added "multiple-items", the single ap_description field was allowed to be more than 2,000 characters which was ample for "All-In-One" use;
then they added support for multiple items, and simultaneously reduced the maximum length on the ap_description field to 150-characters.
Thereby forcing any website using AlertPay to instantly make these changes, by rendering the site completely non-functional without those changes.
That sort of customer-appreciation seems an effective way to drive away any customers they had left, leaving me baffled by their still being in business.
However they are available in many more countries than PayPal or Google-Checkout, and that may be their reason for being.
A-2: Supporting their new "multi-item" orders would involve
very little work. Anyone wanting to use AlertPay is invited to make those changes to nopERcart, and I'll be happy to post the result.
Just take a look at the two AddPaymentProcessorFields routines, and you'll see what changes are needed to change the "ap" payment-processor from being handled as
all-in-one to the multiple-item style used for the other cart-supporting payment-processors.
Q: I'm using Internet-Explorer and have no idea why nothing works?
A: To enable the display of error messages in Internet Explorer:
click Tools, then Internet Options, then Advanced, then in the list under browsing:
(1) deselect the "Disable script debugging" option,
(2) enable the "Display a notification about every script error" option.
Doing (1) is essential; (2) is optional - having it enabled is nicest while debugging,
but can become annoying when visiting buggy websites. If you've done (1) but not (2),
then IE will display an error icon on the status line when an error occurs. You can
double-click this icon to display the error message. It'll be a yellow triangle
near bottom-left corner of your window.
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 by Art Held to support Free Shipping and a few other things; see www.hikerscamerabelt.com/Scripts/nopercart.js.
You may find something of interest on the Support Forum for nopcart; but be aware that nopcart and nopERcart are different, and anything found there would need to be adapted for nopERcart.
As you may realise Eugene passed away in November, 2011.
We'd still like to hear from you if you're using this cart, even if you're not having problems. We would like to mention your site as one using it.
WebMaster 2012-February-11