The Shopping Cart

This product is best for catalogs of less than 100 items. For larger catalogs, performance and manageability can be an issue.

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.

1. Install the Shopping Cart software
2. Edit the configuration file
3. Create your product list
4. 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:

1. Access your account Control Panel
2. Select Shopping Cart Generator
3. 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:

PUT_SHOPPING_LIST_HERE

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

Back to Main Menu