NOP's Free Shopping CartVersion 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:
- Crystal
Star (English, Dollar, Version 4.x, secure server)
- shop.cefpi.org
(English, Dollar, Version 4.2.2, secure server, authorize.net)
- http://www.sanctuaryoncamelback.com/ (English,
Dollar, Version 4.2.2, secure server, authorize.net)
- http://www.mor-israel.com/ (Hebrew, ₪, Version 4.x)
- Street
Trend (English, Pound, Version 4.x)
- Rude Stuff
(English, Dollar, Version 4.x)
- koopjes.spikecity.net (Dutch, Pound, Version 4.x)
- http://noe.master.online.fr/ (French, Mark, Version
4.x)
- http://www.chscomputer.it/ (Italian, Version 4.x)
- http://www.sportsmedshop.com/ (English, Dollar,
Version 3.0)
- Green
Bird Incense (English, Dollar, Version 4.x)
- Direct 2
U (English, Dollar, Version 4.x)
- http://www.sinkbox.com/ (English, Dollar, Version
4.x)
- http://www.uwsite.nl/ (Dutch, Dollar, Version 4.x)
- www.saffrongold.f9.co.uk/ (English, Pound, Version
4.x)
- Official FreeCart Demo Store (English,
Dollar, Version 4.x)
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!
- 17 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 for the translation!)
- Hebrew (thanks to Mr. Eliezer Tavor / MOR / Web-Master for the
translation!)
- Italian (thanks to Colomela Francesco for the translation!)
- Malay (thanks to bennyong from http://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!)
- 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:
- Download the cart here:
- Uncompress the shopping cart with a zip file decompressor. If you do
not have one, head over to http://www.winzip.com/ to get one.
- 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.
- 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.
- 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
- Italian: language-it.js
- Malay: language-my.js
- Norwegian: language-no.js
- Polish: language-pl.js
- Romanian: language-ro.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!
- 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.
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.
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>
(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 pageYou 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!
_Scott
Looking for more scripts? Try these sites: ScriptSearch.com | A1 Javascripts | JavaScript Kit | Jan-s Script Portal
|