The Shopping Cart - Continued...
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">
<font
color="#0000FF">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 "<font
color="#FF0000">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<font
color="#FF0000">/
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<font
size="3">/
SID=PUT_SID_HERE/buy=1/item=3">
<font
color="#0000FF">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="/cgilocal/shop.pl/
page=<font
color="#FF0000">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/
<font
color="#FF0000">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 3 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"> <font
size="2">*Do not break your URL onto 3 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 '<font
color="#FF0000">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=demodone.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
[Click here to go back to Steps
1 &2]
| Prev | Next | The Shopping Cart - Continued... |
BIGSEA
A metaphor. A philosophy. A way of doing business.
Copyright 1997-2001 - Last update: Monday, April 16, 2001 at 12:52:23 PM
|
