Creating a Small Webshop with Javascript
This article describes how to create a small webshop in fundanemt with Javascript.
The shop will support basic things like:
- shopping cart
- multible product pages
- options per product (like what size a t-shirt should be)
- minimum order
- regional Tax costs
- internationalization
- support for Authorize.net, WorldPay and LinkPoint
The shop does not support:
- import of product lists
- direct creditcard payment
Getting the main script
The shopping cart is based on an opensource (GPL'ed) javascript shopping cart called NOP shopping cart.
So start by getting the script from their site:
http://www.nopdesign.com/freecart/index.html
Go into you web root folder and create a new folder called shop/
put the javascript files from the NOP shopping cart in that folder.
Now you have the basic backend files. Now we need to setup the fundanemt pages to handle the shopping cart and so on.
Setting up the shop in Fundanemt
You will need a new hidden site branch in your menu tree called shop. so you should create a new hidden site on the same level as your frontpage.
under this page you will need pages called:
- manage
- checkout
- checkout2
Each of these pages will hold the functionallity to manage products in the user shopping cart and checkout from the shop.
shop/manage
This page will hold the functions to manage the products a user has added to his/her cart.
You will need at least one html element on the page and it should contain the following:
<SCRIPT SRC="/shop/language-en.js"> </SCRIPT>
<SCRIPT SRC="/shop/nopcart.js">
//=====================================================================||
// NOP Design JavaScript Shopping Cart ||
//---------------------------------------------------------------------||
// Visit NOP Design at http://www.nopdesign.com/freecart ||
//=====================================================================||
</SCRIPT>
<h1>Your Shopping cart</h1>
<!--Shopping Cart ManageCart Begin-->
The following is the contents of your shopping cart:
<p>
<FORM ACTION="/en/shop/checkout" METHOD="GET" onsubmit="return ValidateCart(this)">
<SCRIPT>
ManageCart();
</SCRIPT>
<INPUT type=SUBMIT value=" Order products ">
</FORM>
<!--Shopping Cart ManageCart End -->
Notice that there is some text in the code that you can change to fit your language. there is also a filename "language-en.js" which could be change to one with another extention than -en (e.g. -dk, -no, -de). Remember to check if your language is actually supported.
Now your products can be managed.
shop/checkout
This page contains the first part of the checkout procedure.
On this page you will also need one html element.
<SCRIPT SRC="/shop/language-en.js"> </SCRIPT>
<SCRIPT SRC="/shop/nopcart.js">
//=====================================================================||
// NOP Design JavaScript Shopping Cart ||
//---------------------------------------------------------------------||
// Visit NOP Design at http://www.nopdesign.com/freecart ||
//=====================================================================||
</SCRIPT>
<!--Shopping Cart Checkout Begin-->
The following products are in your shopping cart:
<p>
<FORM ACTION="/en/shop/checkout2" METHOD="POST">
<SCRIPT>
CheckoutCart();
</SCRIPT>
<table>
<tr>
<td> Name:</td> <td> <input type="text" name="b_first"> <input type="text" name="b_last"> </td> </tr>
<tr> <td> Email:</td> <td> <input type="text" name="b_email"> </td> </tr>
<tr> <td> Address:</td> <td> <input type="text" name="b_address"> </td> </tr>
<tr> <td> Zip/city:</td> <td> <input type="text" name="b_zip"> <input type="text" name="b_city"> </td> </tr>
<tr> <td> Fax:</td> <td> <input type="text" name="b_fax"> </td> </tr>
<tr> <td> Phone:</td> <td> <input type="text" name="b_phone"> </td> </tr>
<tr> <td valign="top"> Comment:</td> <td> <textarea name="comment" rows=5 cols=20> </textarea> </td> </tr>
<tr> <td> </td> <td> <INPUT type=SUBMIT value=" Send the order "> </td> </tr>
</table>
</FORM>
<!--Shopping Cart Checkout End -->
Again you can change the text, and language stuff in the code.
There are also other fields that you could send if you want and then you just add them.
you can also add field for another person/address that the products should be shipped to. you can do this by adding the same fields, but where the names of the start with s_ (for shipping address) instead of b_ (for billing address).
shop/checkout2
This is the final part of your checkout. this is where the actual php things happen.
So on this page you will need a php element for all the functions needed. The code for this can be really simple of it can be a bit less simple.
The easiest way to do it is by downloading the php example from the NOP shopping cart website.
You can find the script here:
http://www.nopdesign.com/freecart/checkout.zip
You should copy the contents of the php file into you php element and then change the settings in the top:
- $header should be ""
- $footer should be ""
- $youremail should be the email you want the order to go to
- csvfilename should be a file that the webserver has write access to. it will be a semicolon seperated order history log.
- $mode should be "BOTH" if you would like the csv order log file - else it should be "EMAIL"
You can also change the text etc to fit your language as with all the other code.
When done you save the php element and you are now ready to create products.
Adding a product
Each product is a small piece of html/javascript of its own.
So to insert a product you need a product page (you can have as many of them as you like).
As the first element on each product page you will need to have a small header that includes the shopping cart javascript.
If you expect to have serval product pages it is a good idea to make this element global so you can control all the product page headers from one place.
Insert an html element containing the following:
<SCRIPT SRC="/shop/language-en.js"> </SCRIPT>
<SCRIPT SRC="/shop/nopcart.js">
//=====================================================================||
// NOP Design JavaScript Shopping Cart ||
//---------------------------------------------------------------------||
// Visit NOP Design at http://www.nopdesign.com/freecart ||
//=====================================================================||
</SCRIPT>
once again you will have to change the -en to fit your language.
Now you are ready to add the first product. Each product is a small form of its own. so you will need an html element to add a product.
Into the html element you need to paste somthing like this:
<!--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="/en/shop/manage">Check out now</a>
</FORM>
<!--Shopping Cart Product End -->
as you can see there is some options where the user can change different things when ordering the product.
If you dont want any options then just remove them.
So now you have your first product added and you can go on adding other products to your product page.
As mentioned this shopping cart has serval other features like support for payment via online payment portals.
To get this to work it is easier to go and read the documentation for NOP shopping cart which you will find on the page of the project:
http://www.nopdesign.com/freecart/index.html