The Shopping Cart
Description
The Shopping Cart program allows visitors to your on-line shopping site to collect
items in a virtual shopping cart. They may view the contents of their shopping cart at any
time and may add or delete items at will. The program automatically calculates the
subtotal, sales tax, shipping charges, and grand total. When a visitor decides to
check-out,
the order information including the buyer's name, address and billing instruction is
e-mailed to your order department (or whomever you choose) and a receipt is sent to the
shopper.
Features
- Mails order to one or two e-mail addresses
- Sends receipt to customer
- Accommodates up to four types of shipping
- Allows owner to predefine sales tax based a specific state
- Tracks purchases even if user clicks the back button
- Tracks each customer by Shopper ID (SID) (does not use cookies)
What This Program Does Not Do
- It cannot keep track of a visitor if the visitor leaves the site
- It does not calculate exact shipping costs. It can calculate a base rate plus an
additional charge per item, based on up to 4 different shipping methods that you create.
However, it cannot calculate shipping charges based on weight, size, or zone.
- It does not perform on-line payment. It can be integrated with an on-line payment
program such as CyberCash or First Virtual, but these are not included in the Shopping
Cart script.
- It does not securely transmit credit card payment information. You can use our SSL
server to safely transmit the credit card and order information from the customer to our
computers, but the resulting order that is e-mailed from the Shopping Cart script to the
person(s) you specify is not secure. You may wish to have users print the generated order
form and mail or fax it to you.
Implementation
The Shopping Cart is actually quite easy to implement. You do not need to know
PERL or any other programming language and you don't need to be an expert webmaster. Just
follow the simple steps outlined below and you should be up and running in no time.
- Install the Shopping Cart software
- Edit the configuration file
- Create your product list
- Modify your web pages to include the shopping cart feature
Note: You may wish to print out this page so you can follow along as you work through
each of the steps.
Hassan Consulting's documentation
1. Install the Shopping
Cart Software
To install the shopping cart software within your web site:
- Access your account Control Panel
- Select Shopping Cart Generator
- Click the YES button to install files
*** CAUTION! This will cause any existing version of this
shopping cart to be over-written.
The installation will create a subdirectory within your web site called /shop
which contains several HTML files used in a demonstration as well
as a /lists directory and a /tmp
directory which are used by the Shopping Cart program. A shopping cart script (shop.pl)
and a configuration file (shop.cfg) will be placed within your /cgi-local
directory. After installation, a prompt will appear to refer you to the newly installed
demonstration within your web site.
Demo files inside /shop/
Use these files as an example.
You may delete them when you
create your own pages.
--------------------------------
cdrom.html
done.html
email.html
harddrives.html
list.html
modem.html
shop.html
tapes.html
product_list.txt
/picts/ (images used in demo)
2. Edit the configuration
file
2a. Download the Configuration File
Use an FTP program to download the newly installed Shopping Cart
configuration file (shop.cfg) to your computer. The file is
located in your /cgi-local directory.
*** Be sure to download the shop.cfg
file in ASCII transfer mode (not binary mode).
After the configuration file is downloaded to your computer you can edit it with any
text editor of your choice, such as Notepad, WordPad, or TeachText. Just remember to save
your edited version as a 'text only' document and make sure you keep the file name the
same.
2b. Specify to what e-mail address(es) you want the order to be sent.
As mentioned, the Shopping Cart script has the ability to mail orders to one or two
e-mail addresses. These addresses are specified within the shop.cfg
file in a section titled '# mailing info' as shown below:
# mailing info $admin = ''; # who to mail the order to
$admin1 = ''; # second person to mail the order to |
Type the e-mail address of the person to whom you want the orders sent between the pair
of single quotes following the $admin variable names as in this example:
# mailing info $admin = 'johndoe@john.com'; # who to mail the order to
$admin1 = 'janedoe@jane.com'; # second person to mail the order to |
*** To specify a single email address, merely leave the second
variable empty.
*** IMPORTANT! You MUST keep the single quotes surrounding the email addresses.
2c. Specify the Sales Tax Rate for your State.
The Shopping Cart script will automatically calculate the Sales Tax for an order
provided you specify the two letter postal code and tax rate for your state. If the two
letter postal code in the billing address of a user matches the postal code you specify,
then the appropriate sales tax will be added to the order according to the tax rate you
specify. The sales tax is specified within the shop.cfg file in a
section titled '# current tax rate and states' as shown below:
# current tax rate and states $tax_state = "FL"; # State in uppercase
$tax_state2 = "fl"; # State in lowercase
$tax_rate = ".06"; # 6 % |
Change the "FL" and "fl" in the $tax_state variables to
the two letter postal code for your state. Change the ".06" in the $tax_rate
variable to the current sales tax rate in your state. For example, if your
sales tax is 5.5%, you would edit the $tax_rate variable to read:
$tax_rate=".055";
2d. Specify the Shipping Charges you wish to use.
The Shopping Cart program can accommodate up to four types of shipping charges that you
specify. Each of these charges is calculated using a simple base charge plus an additional
charge for each item ordered. The shipping section is located at the end of the shop.cfg
file as shown below:
# Set your shipping cost here
#
# set to "" to turn off shipping
# set to "" to turn off one kind of shipping
# values for shipping types
$shipping{1} = "upsground";
$shipping{2} = "upsred";
$shipping{3} = "upsblue";
$shipping{4} = "international";
# labels for shipping types
$shipping_label{$shipping{1}} = "US Mail";
$shipping_label{$shipping{2}} = "UPS Red";
$shipping_label{$shipping{3}} = "UPS Blue";
$shipping_label{$shipping{4}} = "International";
# descriptions for shipping types
$shipping_desc{1} = "Regular US Mail";
$shipping_desc{2} = "Delivery in 2 business days";
$shipping_desc{3} = "Next Day Delivery";
$shipping_desc{4} = "International Delivery";
# default shipping type
$shipby = ""; |
If you only want 2 shipping types:
$shipping{1} = "upsground";
$shipping{2} = "upsred";
$shipping{3} = "";
$shipping{4} = "";
These appear on the order email
Change these to whatever you
want your ordering department
to see on the form as the
shipping type
These are the choices the
customer sees on the order page.
Change these to whatever you
want the customer to see as the
shipping types
Use one of the shipping 'values'
$shipby = "upsground"; |
The actual shipping 'base' and 'rate' charges are specified at the end of the shop.cfg
file as shown below:
$shipping_base{$shipping{1}} = "6.51";
$shipping_rate{$shipping{1}} = ".49";
$shipping_base{$shipping{2}} = "18.31";
$shipping_rate{$shipping{2}} = ".69";
$shipping_base{$shipping{3}} = "8.66";
$shipping_rate{$shipping{3}} = ".59";
$shipping_base{$shipping{4}} = "100.00";
$shipping_rate{$shipping{4}} = "50.00"; |
The first two lines determine the first set of shipping charges, the second pair of
lines determine the second set of shipping charges, and so on. You only need to change the
dollar amounts within the quotes for each pair of base and rate shipping charges. Use the
following examples as a guide to setting the shipping charges.
Single charge of $10.00 for total order:
$shipping_base{$shipping{1}} = "10.00";
$shipping_rate{$shipping{1}} = "0.00"; |
Flat rate of $5.00 per item:
$shipping_base{$shipping{2}} = "0.00";
$shipping_rate{$shipping{2}} = "5.00"; |
$5.00 base charge plus an additional $2.50 per item:
$shipping_base{$shipping{3}} = "5.00";
$shipping_rate{$shipping{3}} = "2.50"; |
$15.00 for first item plus $4.00 for each additional item:
$shipping_base{$shipping{4}} = "11.00";
$shipping_rate{$shipping{4}} = "4.00"; |
The last example is a little tricky. The first item would be charged $11.00 plus 1 x
$4.00 = $15.00. Each additional item would add an additional $4.00 to the shipping charge.
Note: this program cannot calculate shipping charges based on weight, type of item,
zone, country, or shipping tables.
2e. Upload the Configuration File
After you have finished making the necessary changes to your configuration file and
have saved it as a plain text file, use your FTP program to upload
this file (shop.cfg) back up to your /cgi-local
directory.
*** Be sure you keep the file name shop.cfg
when you save your changes.
*** Be sure to upload the shop.cfg file in ASCII transfer mode (not
binary mode).
3. Create your product
list
The product list contains order information about each item you wish to make available
through the Shopping Cart program. The Shopping Cart Generator creates a sample product
list file named product_list.txt which is used in conjunction
with the demo. You may modify this existing product list file (found within the /shop
directory) or create your own, but make sure you keep the name product_list.txt.
You can use a plain text editor (Notepad, WordPad, Teachtext, etc.) to create or modify
this file (be sure to save as plain text).
The product list contains one line of information for each product you sell. Each line
contains 4 specific sections of information that the Shopping Cart program needs to create
the order. A pipe symbol " | " (hold shift and hit the key below the
Backspace/Delete key) is used to separate each of these 4 sections of information.
Therefore, make sure you do not use this symbol in any of your descriptions; use it only
to separate the 4 categories.
Item ID Product Description
| |
| Product Number | Price
| | | |
1|AX-65000|Conner CS2000DATi 2.0GB SCSI-2 Int|1312.00|
2|AX-65001|Conner 2-4GB Turbo DAT,SCSI,5.25 Int|913.00|
3|AX-65002|Conner TSM4000R-SBE 4GB Int. SCSI|543.00| |
Item ID
This is a unique ID number used to reference each item in your list. It is
usually numbered in ascending order beginning with the number 1, as in the example. You
will use this ID number to reference your products in your web pages.
Product Number
Your internal item or product number associated with the item. This product
number will be listed on the order form for each product the customer orders and is used
for your reference.
Product Description
This is the description of the product that you want printed on the order form.
This is not the description that you put on your web pages to describe your
products. This description only appears on the order form, between the product number and
the price, for each product the customer orders.
Price
The price of a line item to two decimal places (e.g. 13.00 or 7.98). You must
include the cents; if the product costs an even dollar amount include .00 to the end of
the price for the cents. This price only appears on the order form and is used to
calculate the total of the order. If you change your prices, make sure you update your
prices in your web pages as well as in this product list file.
*** Be sure to download and upload the product list file in ASCII
transfer mode only.
*** If you choose to rename the product list file you MUST also do so within the config
file.
4. Modify Your Web Pages
to Include the Shopping Cart Features
One of the nice features of the Shopping Cart program is that you can develop the
structure and look of your web pages any way that you want. You are only limited by your
imagination. You can list all your products on one page, or you can create a dozen pages
for each product. It's all up to you. There are just a few additional steps needed to add
the Shopping Cart functionality to your web site.
*** All of your pages must reside within the /shop/
directory.
4a. Create an Entry Page.
A shopping cart program can only work if it can keep track of a particular customer as
that customer travels through a site. The Shopping Cart program uses a computer generated
Shopper ID (SID), to keep track of each customer that visits your web site and what
products that customer has added to his or her shopping cart. You will need to create an Entry
Page that will give the Shopping Cart script a chance to generate a unique
Shopper ID for each customer before the customers reach any pages from which they might
add or view products in their shopping cart. Customers must go to this Entry
Page before going to any pages that implement the shopping cart
functionality (i.e. any of your product pages).
Your Entry Page can look however you want it to look, but it must
contain a special link that will transport the customer into your site while at the same
time telling the Shopping Cart script to generate a unique Shopper ID (SID) for the
customer. This link will look similar to the following:
<a href="/cgi-local/shop.pl/page=list.html">
Browse through our Product Catalog!</a> |
This link tells the Shopping Cart program (shop.pl) to transport the customer to
"list.html", but first generate a new unique Shopper ID for the customer and
hide it within the hyperlinks of the "list.html" page. You can refer the
customer to any page that you want; you do not need to use "list.html".
Many people create Entry Pages that tell visitors to download the latest version of
Netscape or Explorer, or that give visitors the choice of a high graphic version or text
only version of the site, or that just present visitors with an introductory splash screen
that introduces the site. You could even create a blank Entry Page that merely redirects
users to the above URL using a META tag redirect.
4b. Modify your hyperlinks to include the Shopper ID (SID).
You must add a Shopper ID (SID) tag to every internal hyperlink in every page of
your web site that a customer may traverse. When a customer visits one of your pages, the
Shopping Cart script will replace this Shopper ID (SID) tag with the customer's unique
Shopper ID that was generated from the Entry Page.
You cannot add the SID tag to any external hyperlinks (links to other sites), because
other sites won't even know what an SID is. Keep in mind, though, that if a customer
clicks on any hyperlink that does not contain an SID, the Shopping Cart program
will lose track of that customer and not know what items the customer has in his or her
shopping cart, unless the customer hits the back button on the browser to go back to a
previous page in your site that the customer had already visited. This means that you can
add links to your pages that go to other sites (for product details, etc.), but only if
you are certain that the customer will 'back up' to a previously visited product page that
contains the customer's Shopper ID in the page's hyperlinks.
To add the Shopper ID (SID) tag to your links, modify your links a shown below:
Change all your hyperlinks from this format:
<a href="product2.html">Go to Next Page</a> |
to this format:
<a href="/cgi-local/shop.pl/page=product2.html/SID=PUT_SID_HERE">
Go to Next Page</a> |
The two parts of the URL above that are new (the /cgi-local/shop.pl/page=
and /SID=PUT_SID_HERE) will be exactly the same
for every link in your web pages and must be typed exactly as shown.
If you are curious...
The above URL tells the shop.pl program, which is
located in your /cgi-local/ directory, to show the file nextpage.html
to the user, but first replace all occurrences of PUT_SID_HERE with
whatever Shopper ID the user currently has. In other words, this URL
says, "transport the user to nextpage.html, but remember the user's name so you can
keep track of what the user added to his or her shopping cart."
4c. Create an 'add this item to your shopping cart' link for each product in
your site.
In order for a shopping cart is to be useful, customers need to be able to add items to
their shopping carts as they browse your web site. You will need to add a link next to
each product you sell that allows customers to add that particular product to their
shopping carts. Your link to add an item to the shopping cart should look similar to the
following:
<a href="/cgi-local/shop.pl/page=shop.html/SID=PUT_SID_HERE/buy=1/item=3">
Add this item to your shopping cart.</a> |
The only parts of this link that you should change are the "page=shop.html"
and the "item=3", and, of course, the text (or
image) you wish to use as the hyperlink.
page=shop.html
This signifies to which page you wish to send the customer when the customer clicks on the
link. Most often you would send the customer to your order form page so the customer can
see the details of the item added to the shopping cart, as well as make any changes to the
order (i.e. change the quantity). You do not need to call your order form page
'shop.html'; you can call it 'orderform.html' or 'shopping_cart.html' or whatever you
want.
item=3
This signifies which Item ID to look up in the product list file (product_list.txt).
Remember that you assigned a unique Item ID to each product you wish to
sell and listed those products in the text file product_list.txt.
The Shopping Cart program uses this Item ID to determine which line in
the product list file contains the product number, description, and price for the product
the customer wishes to add to the shopping cart. It then transfers this information to the
shopping cart order form to create a list of items the customer wishes to purchase.
4d. Create a "Shopping Cart" page.
You will need to create a "Shopping Cart" page. This page shows a list of
items the customer has added to his or her personal shopping cart, the shipping methods,
and the total charges for the order. It also allows the customer to change the quantity
desired of any particular item, change the shipping type, recalculate the total, or
proceed to checkout. You may design your page however you want, except for the
personalized order information which is generated by the Shopping Cart script. Use the
shopping cart page in the demo (shop.html) as a guide for
creating your own page. (You can name your page anything you want.)
To add the Shopping Cart information to your page, just include the following tag
in your file at the location you want it to appear on the page:
You can see from the demo shopping cart page (shop.html) that
the Shopping Cart script generates the part of the page between the two horizontal rules
merely by replacing the tag "PUT_SHOPPING_LIST_HERE" with the personalized
shopping cart information.
In order to allow customers to change their order (quantity or shipping type), you will
need to enclose the page inside a FORM with the following action:
<FORM method="POST"
ACTION="/cgi-local/shop.pl/page=shop.html/SID=PUT_SID_HERE/recalculate=1"> |
The recalculate=1 tells the script to recalculate the
order according to the changes the customer made to the order form. Remember to change the
shop.html to the name of your Shopping Cart page. Also
remember the closing FORM tag ( </form> ) as well as a submit button that says
Recalculate.
4e. Create a "Billing Information" page.
You will also need to create a "Billing Information" page. This page gives a
form where the customer can complete his or her order by filling in his or her name,
phone, shipping address, billing address, and payment info. In order to create this page,
you should just modify the demo page email.html because all of
the form fields need to be exactly as in the demo page. You cannot add any
additional fields to the form. You can format the page to your liking, but do not change
any of the form fields. Also, make sure the page contains the following form action:
<FORM METHOD="POST"
ACTION="/cgi-local/shop.pl/page=done.html/SID=PUT_SID_HERE/mail=1"> |
The mail=1 tells the script to mail the order and billing
information. Remember that the page= part of the URL tells
the Shopping Cart script to which page to send the customer next. In this case, the demo
page done.html is a thank you page. You may send the customer
to any page you desire, although it is best to present the customer with a new page that
confirms that the order was sent and says thank you for ordering.
You will link to the 'Billing Information' page by adding a link on your 'Shopping
Cart' page that is similar to the following:
<a href="/cgi-local/shop.pl/page=email.html/SID=PUT_SID_HERE">
Checkout</a> |
Sending Information Securely
You can use our SSL Secure Server in conjunction with this 'Billing Information'
page to securely send confidential order information from the user to the server. This
'Billing Information' page is the only shopping cart page that needs to be used with the
SSL, since it is the only page with confidential information.
To use SSL, modify your link to the 'Billing Information' page as follows:
<a href="https://wwwXX.rapidsite.net/userid/cgi-local/
shop.pl/page=email.html/SID=PUT_SID_HERE">Checkout</a> *Do not break your URL onto 2 lines as shown. We did
only because it was too long to fit on the screen. |
You also need to modify the FORM action on the 'Billing Information' page as follows:
<FORM METHOD="POST" ACTION="https://wwwXX.rapidsite.net/userid/
cgi-local/shop.pl/page=done.html/SID=PUT_SID_HERE/mail=1">
*Do not break your URL onto 2 lines as shown. We did
only because it was too long to fit on the screen. |
https://wwwXX.rapidsite.net/userid*
The 's' at the end of 'https'
tells the browser that the link points to a page that should be treated securely. You
should replace the 'userid' with your userid and the 'XX' with the number of the server on which your account resides.
You can find this information via your control panel under "Edit Account
Information".
*If you have obtained your own SSL certificate through Verisign for your domain you can
use your domain name (https://www.yourdomain.com/) in place of the RapidSite domain
(https://wwwXX.rapidsite.net/userid/).
Using the Cart with Frames
If you wish to add frame capability to your demo shopping cart, you will need to add
the following html files to your /shop directory. Remember to save these files using
the correct file names, you can use any text editor to create these files. Once you
have created these files, please FTP upload them into the /shop directory of your domain
is ASCII text mode.
demo-frames.html :
<html>
<head>
<title>Frames version of Shopping Cart</title>
</head>
<frameset frameborder=yes cols="20%,80%">
<frame name=menu
src="/cgi-local/shop.pl/page=demo-menu.html/SID=PUT_SID_HERE">
<frame name=target
src="/cgi-local/shop.pl/page=demo-listf.html/SID=PUT_SID_HERE">
</frameset>
<body>
</body>
</html> |
demo-menu.html :
<html>
<head><title>navigation links</title></head>
<body>
<b><font size=+2>Menu</font></b>
<p><br>
<a target=target
href="/cgi-local/shop.pl/page=demo-modem.html/SID=PUT_SID_HERE">Modems</a><br>
<a target=target
href="/cgi-local/shop.pl/page=demo-harddrives.html/SID=PUT_SID_HERE">Hard
Drives</a><br>
<a target=target
href="/cgi-local/shop.pl/page=demo-tapes.html/SID=PUT_SID_HERE">Tapes</a><br>
<a target=target
href="/cgi-local/shop.pl/page=demo-cdrom.html/SID=PUT_SID_HERE">CD
Roms</a><br><br>
<a target=target
href="/cgi-local/shop.pl/page=demo-shop.html/SID=PUT_SID_HERE">Shopping
List</a><br>
<a target=target
href="/cgi-local/shop.pl/page=demo-email.html/SID=PUT_SID_HERE">Check
Out</a><br>
</body>
</html> |
demo-listf.html :
<html>
<head><title>Demo Internet Store</title></head>
<body>
<center>
<h2>Demo Internet Store</h2>
</center>
</body>
</html> |
You also need to modify the FORM action on the demo-email.html page as
follows :
<FORM METHOD="post"
target="_top"
ACTION="$location/shop.pl/page=demo-done.html/SID=PUT_SID_HERE/mail=1"> |
Once you have completed the above steps, you are ready to access your demo shopping cart
via frames. To access your demo Cart using frames, you would use the following URL
in your web browser:
http://<your
domain>.com/cgi-local/shop.pl/page=demo-frames.html
Search this site by typing in your search term then click the search button.
Since July 17, 2006
Google+
|