Sign Up Now! Control Panel Contact
   
Home
BSI Details
Control Panel
Who's BSI?
Email
FAQ
Domain FAQ
Billing FAQ
Scripts
Complete Topic Glossary
           

 

       
BSI $99 Deal
 
Byte Size BSI
 
DIY Deal
 
 
   

This tutorial is designed for website authors who have never installed nor implemented a shopping cart program. Advanced authors or site builders who are looking to finesse their cart pages should consult the extensive documentation at Irata.com.

If you are already running the Cart script at BSI you must have Hassan Cart version 1.24 running at your site for the automatically configured SECURE_URL and SECURE_ IMG tokens to work. Contact our Customer Support Agents using your Control Panel if you have questions about upgrading your cart.

To upgrade the cart yourself use your Control Panel to install the shopping cart and Make sure that 'Install Demo Pages' is not checked. This way you won't accidentally overwrite any files that may be in use at your site, like your product_list.txt database file. You will have to fill out all of your administrative, tax and shipping information again, so be careful. If you are not sure, find out first.

You can view the demo pages here, if you wish to use them in conjunction with the tutorial.

NOTES
Actual CODE examples will be shown in gray boxes just like this:

<a href="http://yourdomain.com/cgi-local/shop.pl/page=estore.htm>

Most of the links on this page will open into a new browser window. Close the window to return to this page.

We at BSI are always striving to improve our service. You can fill out the form at the bottom of this page and let us know how we can make future editions of this tutorial as useful as possible.

Please use the tech support link in your Control Panel for answers to specific technical questions.

  1. BSI Demo
  2. Compile information before installing
  3. Install the cart
  4. Check that the installed demo is O.K
  5. Download the installed cart demo pages
  6. Edit the cart database (product_list.txt)
  7. Edit the demo pages and create your own
  8. Edit email receipt header and footer files
  9. Upload files to your domain
  10. Credit card authorization

It works. How do I change the set up?

Make suggestions to improve this tutorial

It may sound silly, but going through our working online demo will aid you greatly in implementing your shopping cart. Testing your own pages will be much easier if you know what the pages are supposed to do. The BSI Shopping Cart Demo demonstrates the commonly used features of the shopping cart script and can be an invaluable resource of ideas and code.

These features include the search function, deciding what page is viewed after clicking BUY or ADD TO CART, the use of a secure orderform, the use of graphics and background tiles in pages and the use of various kinds of "add to cart" forms.

Try out all the pages. Try out the search. When you place your "fake" order, enter a working email address that you can check. This way the customer email "receipt" will be mailed to you so that you know what it looks like.

While you can reconfigure the shopping cart at anytime, it is much easier to create it the way you want it during installation. Here are a few numbers you will want to have handy during the Control Panel installation of your cart.

TAX

What is the sales tax or gross receipts tax rate for your state, if applicable?

SHIPPING

The shopping cart supports several types of shipping: by weight , by price , by number of items and by regular UPS rates based on zip code.

Since you can choose whatever shipping breaks you want, AND you can choose up to eight shipping METHODS you may want to figure out what shipping costs -- if any -- you will want the cart to charge and calculate.

For example, if you choose to ship by weight , what are your price/weight breaks? Does it cost $5.00 to ship anything 0-10 lbs. for 2-day delivery? That would be your first shipping break for the 2-day shipping method , and your first shipping rate would be $5.00.

Maybe it costs double that -- $10.00 -- to ship 0-10 lbs. overnight. That would be your first shipping break and rate for your second method of shipping.

Then you have to start all over for 10-20 lbs., perhaps. 20 lbs. would be your second break for the second method , with it's concurrent cost. And so on for as many breaks and methods as you have.

You can see that if you are shipping by weight and your price to ship something changes for every additional 5 lbs. of weight, AND you give the customer their choice of overnight, 2-day or regular ground shipping, that you have a decent number of figures to pull together.

If you ship your products based on the number of items , the same basics apply. If it costs $15.00 to ship 1-3 items, then 3 items is your first break and $15.00 is your first rate .

The shopping cart installation and configuration form at your Control Panel has fields for entering all of the shipping methods and shipping breaks; having them worked out ahead of time will make it much easier when you install the cart.

UPS

If you want to use the real UPS charts to compute your shipping based on customer zip code, you will need to download zone and rate charts from the UPS website. This can be done after cart installation and is covered later in this tutorial.

ADMINISTRATOR

Who will be receiving the email orders from the online shopping cart? You can always change them afterwards and the cart supports two administrative email addresses. You may want to use your own email address for testing purposes, or use an email forwarding or alias account at your Control Panel to forward the orders. You may change the administrative email address at anytime.

AUTHORIZE.NET

If you will be doing real time credit card authorizations with Authorize.net, have your Authorize.net account information readily available. The shopping cart installer allows you to set your Authorize.net information during installation.

DATABASE INFO

If you use a database program already to track your product inventory, it is generally possible to make a few adjustments to your database and then export the file as text in a form that is ready to go for the cart program.

This can save a good deal of data entry. However, the exported file must have delimiters , A delimiter is a character the defines the end of a field. The cart allows for common delimiter characters (pipebar, tab, comma, etc.) to be used. Some database programs will export to text using tabs (MS Excel is a good example of this), some programs use pipebars, and some give you a choice. If you have the choice, use pipebars; you can see them and most of the examples in this tutorial and the shopping cart documentation shows pipebars.

If you choose to use a delimiter other than Pipebar "|", the installed cart demo pages will not function properly, as the demo database file (product_list.txt) uses pipebars as delimiters.

This is because the delimiter that is actually used in the database file must match what the shopping cart has been told to expect. Our demo database file uses pipebars.

Directory Path to your Website

Go to your BSI Control Panel and click on Detailed Account Info . About 6 lines down from the top left you will see an entry for Home Directory Path. Write this path down or copy it with your text tool. It can come in handy when tracking down possible errors in your pages.


   
   
  1. Go to your BSI Control Panel and click on Shopping Cart Installer.

    If you can not click on Shopping Cart Installer then your account plan does not include our free Hassan Cart .

    The installer will help you set up and then add a number of new files to your site, all of which you are encouraged to download with an FTP program after the installation process.
  2. Fill out the information in the installation form completely and accurately. If you are not sure what to put in a certain field, find out before finishing the installation process. It will be much easier if the shop.cfg file is accurate from the start. The shop.cfg file tells the cart what to do. It acts as the master instructions for the program.
  3. After you fill out the form, click the install button and the installer will tell you whether or not your cart was installed properly. Then come back to this tutorial. The entire installation form is explained line-by-line below.
  4. A new directory called shop will be added into the root level of your site: http://yourdomain/shop .
    This directory will contain the demo pages and graphics that get installed along with your cart program. If you already created a directory called shop the installer will not overwrite the directory, but will replace any files within the directory if the names overlap.

    The shop directory will also contain the sample database file -- product_list.txt -- that contains sample inventory and price information for the demo cart. The demo version of the product_list.txt file uses pipebars as delimiters.
  5. A number of Perl scripts (files with a .pl extension) and a configuration file, shop.cfg , will be added to your cgi-local directory. If you don't know what a cgi directory or a Perl script is, don't worry about it for now. Perl scripts and the .cfg file must be downloaded "as text", in ASCII format.

INSTALLER FORM EXPLAINED

1st Administrator to mail order to:
2nd Administrator to mail order to:

Who the order gets mailed to, so that you can fill it and ship it. You can leave the 2nd blank if you want.

Subject of mail to customer:

What will the SUBJECT HEADER of the customer's email receipt? What they see in their email program's message pane.

Subject of mail to administrator:

Ditto for the administrator.

Should the cart send an email receipt to the customer?

Note that credit card information is NOT sent back out in the customer's receipt.

Charge tax?

You can charge gross receipts or sales tax and still give customers the choice to declare eligibility for the tax based on state of residence

You have the option of deciding whether are not certain items are taxable on an item by item basis. This is done by setting items to taxable or not with a certain field your product_list.txt database file, covered later in the tutorial. If you need even one item to be taxed, you should choose yes here.

Tax rate: (i.e. .0657)

Do NOT use % sign.

2 letter state code:

The state of residence in which the tax rate is applied.

Do you want the option for the customer to indicate whether they are to be charged tax in the product list screen:

This means that if you elect to charge tax, and check YES on this option, customer's get a "live in the state of NM" checkbox when their cart contents are displayed in a webpage. If you did Step 1 of this tutorial, you probably saw the checkbox on the cart pages for residents of your state. If you do not check this box, tax will be applied to all orders, regardless of the customer's state.

Calculate tax on shipping?

Yes means that the tax rate, if applicable for a given customer transaction, is applied to ALL shipping costs.

Currency to use: U.S. Dollars / English Pounds

Show me the money.

Check credit cards with static algorithm: Yes / No

Checking YES here does NOT mean that credit cards will be authorized online for you. The "static algorithm" checks customer credit card info for clearly indicated errors; expired date, less than 16 digits in the credit card account number, etc. This can be useful for clients who are not running real-time authorization and wish to prevent typos and minor errors from being submitted.

Discount percentage (0 = no discount) (example: 0.20 = 20% discount):

If you discount online from the raw prices in your database file, this can be useful for example, you wish to export your existing database for your online cart and want to sell online products for 10% less without having to re-keyboard all the prices. Ditto if you want to offer monthly sale on all online merchandise without re-keying the product_list.txt file.

Delimiter for product database:

See Step 2 for discussion of delimiters. This the character that marks the "end" of any given field in your database -- your product_list.txt files.

Demo cart pages will *not* work if you change this!

Yep, that's the truth. At least, they won't work until you change the product_list.txt demo file to match whatever you chose the delimiter to be.

Show the Order ID ( SID ) in the email receipt? Yes / No

The SID is a randomly generated number that the cart creates whenever a given "shopping experience" begins. It is not necessary to include this number in receipts for the cart to function properly.

Please check the fields you would like required by the email form:

A customer who does NOT fill out a field that you have chosen to be REQUIRED will have their order submission rejected by the cart program. They will be asked to hit "back" on their browser and fill out the field(s) that are blank or in error.

Charge shipping? Yes / No
(skip to here if you do not need shipping)

If you do not charge shipping, you're off the hook. If you DO, check the appropriate radio button and then skip to the section of the form that applies to your kind of shipping.

What's the 999999.00 thing about? This is your final price break for shipping. The cart needs to know what that LAST shipping range is. So if your last break is, for example, "every order above $150 has $20 of shipping" your last range is from $150 - $999999.00 and you need to put that last number in. You can copy the number from the install page instructions itself if you want.

See Step 2 for an extended discussion of shipping methods, breaks and rates.

Use UPS Shipping Charts for first shipping type? Yes / No

If you choose to ship with REAL UPS charts, the FIRST SHIPPING METHOD will become UPS rates, regardless of what you call it. In other words, the cart program will expect to find the rate and zone charts and apply shipping based on the customer's zip code, even if you decide to CALL the first shipping something like Fred 's Courier Service. This can be handy if you want to base your shipping on real UPS charts but do not necessarily ship UPS . The UPS shipping method only supports regular UPS ground charts, not expedited delivery services.

UPS Shipping Information

Both the two files below should be in your shopping root directory

  • Filename of zone chart
    (download it from UPS 's website comma delimited version)
  • Filename of UPS Ground Residential shipping chart
    (download it from UPS 's website comma delimited version)

Handling charge to be added to each item:

Weight per box (use 99999, if you do not divide it like this):

You do not need to have already downloaded these 2 charts from UPS . What you do need to do is remember to save those charts as the exact same filenames that were entered in this portion of the configuration form. When you do download them, put them into the newly created shop directory. This will be covered again later in the tutorial.

Authorize.Net Module Information

This information will be supplied to you by Authorize.net if you have an account with them for real-time credit card verification.

Install demo cart pages? Yes / No
This will give you something to work off of while creating your store.

If you have never set up the Hassan Cart before, SAY YES . You can use the demo pages, orderform and product_list.txt database file to start your own online shopping cart.

If you already have a working shopping cart on your site and are using the installer to change your shopping cart configurations or to upgrade to the latest version of the cart, SAY NO.

The Secure Authorize.Net modules are installed in your /cgi-local directory by default also by this program.

These are the additional Perl scripts that were mentioned earlier. They are like plug-ins for the cart program that allows it to perform additional functions. You can leave them alone.

The secure.pl module does not have anything to do with creating nor is submitting what is commonly called, a secure form . Rather, the secure module allows the cart program to deposit credit information into a secure file on the server, rather than emailing credit card information to the administrator. If you are using Authorize.net, those services will override the emailing of credit card info to the administrator as well as the secure.pl module.



   

If you chose not install the demo pages, you should still check your site to make sure that any configuration settings you changed are working properly and that you have not introduced any errors into the site.

The demo "entry" page that was installed with your cart can be found by plugging your domain name into the following.

http://yourdomain.com/shop/enter.htm

The demo should function at your site, with your custom information present in certain places. Look for the following:

  • That everything works.
  • If you are charging tax, that your state appears in the checkbox on the cart page.
  • That the shipping methods you set are present. If you chose to use real UPS charts, you may experience errors if you have not downloaded the UPS charts yet. That's covered later in the tutorial.
  • The tax charged on items is the correct tax rate. Grab a calculator to make sure.
  • When you go to the secure orderform, the page shows up with LOCK in the bottom of your browser window's status bar. Also check that the graphics do not come up "broken".
  • Problems in any of these areas could mean an incorrect installation. Go back to your Control Panel and reinstall or contact tech support.
  • The final links on the "thank you" page (the page that comes up after an order is successfully submitted) will NOT function properly until you edit them to include your real domain name. These 2 take the shopper either to your homepage or back to the entry page to start shopping again. See thanks.htm (but do the in between steps first; it will make your life much easier).

Using an FTP program, logon on to your site and download the files from the shop directory of your website. This directory contains the demo pages that you can edit to include your own graphics, pictures and products, as well as demo graphics with buy buttons, etc. It also includes the demo product_list.txt file that you can use a guide to entering your real product information and the text files that insert your own information into the top and bottom of the email receipts.

Full explanations of how to edit each file and what to do with them are explained in Step 7, but the list below will help familiarize you with the files you will be working with.

The .txt files in this directory must be downloaded and uploaded "as text" (ASCII mode).

These are the HTML files that will be in the shop directory:

  • enter.htm
    Contains links that actually start the shopper's session.
  • products.htm
    Product page containing links and forms for "adding" purchases to the cart. The pictures on this page repeat intentionally; we did not have want to include a load of unnecessary graphics in the demo pages.
  • product2.htm
    Same basic content as products.htm; extra page so you can see how menu buttons with links are constructed to tie two cart-ready pages together. More lovely velour repeats.
  • cart.htm
    Displays contents of the shopping cart.
  • search.htm
    Allows shopper to search contents of your inventory.
  • results.htm
    Returns results of search with "buy" links on the prices of the items.
  • ordrform.htm
    Secure form allows shoppers to submit the personal and credit card information to you.
  • thanks.htm
    This page is shown only after the successful submission of the order.
  • frameset.htm
    Sample "cart-ready" frameset page, for code examples.
  • mainbody.htm
    Used as the main contents page in frameset.htm.
  • navbar.htm
    Used as the static menu in frameset .htm

These are the Text (.txt) files that will be in the directory. These files must be downloaded and uploaded "as text" otherwise known as ASCII mode. If you are not sure how to do this, see our FTP help.

  • product_list.txt
    the big one. Your inventory database. This file must be uploaded and downloaded "as text" or ASCII mode.
  • header.txt
    the content of this text file is automatically inserted into the head of the email receipts that are sent to the customer. Show off your ASCII art!
  • footer.txt
    Same as the header.txt, but at the bottom of the email. A good place to put contact info or specials that is only sent to customers who have actually purchased from you.

The directory within /shop that you want to grab is:

  • cartpix
    http://yourdomain.com/shop/ cartpix
  • This directory contains demo graphics like the buy button, the recalculate button, etc.

Do not download nor upload the lists subdirectory; this directory is used by the cart program to keep track of shopping sessions.

Edit the product_list.txt file in a text editor or word processing program such as MS Word or WordPerfect. When you save the file, MAKE SURE you are saving "as text" and not in the native word processing format. Many word processors will allow you to "show invisibles" or "show paragraph marks" which make editing this file much easier if you have chosen to use tab delimiters.

The product_list.txt file is set up with one product per line. Each line contains a number of "fields”. These fields are required by the cart so it knows what to do with a given item. You can tell where the fields end in our demo file because we used pipebar " | " delimiters. The delimiter shows where the field ENDS -- delimiter shows you “de” end of “de” field. Ha-ha.

Note especially that every field must end. In other words, the last field of the line MUST have a delimiter after it, followed by a return.

So what do all the fields mean?

Field#1

Field#2

Field#3

Field#4

Fiel #5

Field#6

Item ID

Product Number

Description

Price

Weight

Taxable?

Field #1|Field #2|Field #3|Field #4|Field #5|Field #6|

1|AX-123|Nylon Bucket Hat|14.50|1||
2|AX-119|Adidas Trainer|43.50|1||
3|AX-120|Chino Shorts|31.50|1||

Field #6 is empty in demo.

Item ID

These are the numbers that get built into your actual HTML page so the cart knows what item to add. Basically, the buy links and forms on your pages will tell the cart to go do something with a given item number . This number is the first field of the cart. These item IDs can include any alphanumeric character. You can use the same numbers from field 2, if it is easier to keep track of, but you must have unique item IDs for every product you wish to have in your cart.

Product Number

Your internal product number for your company of that item gets emailed to the cart administrator in the administrative receipt.

Description

The description of the product you want your customer to see when they get their email receipt or view their shopping cart contents. This is also the field that gets searched by the carts built in search engine. If you want some keyword or number that is associated with a given product to show up in a search, that info must appear in field 3. Other fields do not get searched.

Price

The price of the item must include the cents. No commas or dollar signs are allowed. For Example: 129.00

Weight

The weight of the item in pounds can use decimal points in this number -- e.g. 0.5. This field is only used when you use UPS ground shipping or "by weight" shipping methods, other wise you can leave it empty.

Taxable?

Is this item taxable? Use a 1 if the item is not taxable, anything else if it is taxable. An empty field means to charge tax. Our demo has "empty" fields for the taxable option on all items. Remember that even though this is the last field, you must have that last pesky delimiter. If the item is not taxable, the line might look like this

1|AX-123|Nylon Bucket Hat|14.50|1|1|

If you chose a delimiter OTHER THAN PIPEBAR during your installation, you will need to replace or re-key the delimiters in our demo product_list.txt file.

Wait to upload your revised product_list.txt file. If you upload this revised database file before you edit the cart HTML pages, your demo will not work. And guess what? Take a deep breath because The Next Step is:

Create Your Own

  1. Back up your site.
  2. All cart-ready pages MUST be uploaded to the shop directory of your site.

    http://yourdomain.com/shop
  3. The code in the demo pages requires that ANY and ALL pictures that you want displayed in a "cart-ready" page are in the cartpix directory inside your shop directory. If there are pictures of products that you want to use in your catalog pages, upload them to this folder.

    http://yourdomain.com/shop/cartpix

    This directory also contains the demo graphics and buttons that were installed with your cart program.

Hyperlinks, form submissions and graphic references (how pictures are placed into your HTML page) are different for "cart-ready" pages than you what you may be used to. Many authoring -- web page building -- programs will not necessarily display images when you are working with these cart pages. They will come up as "broken", because while the HTML will work fine when it is online and running through the cart script, on your local computer it will not. The same goes for your browser; you will not be able to "see" the graphics unless you are actually running your pages online through the cart program.

Authoring programs that support previewing of "absolute" graphic references will let you see the images when you are building your pages, but you will still not see them in your browser until you look at the pages live online.

The same goes for the links; they will not work locally, only when they are fed through the cart script online. This does not make it impossible to build your pages, though, just slower. This tutorial outlines 2 basic strategies for working with this kind of HTML.

The first is to replace just the filenames in the links and image sources in the demo pages with your filenames. This is slower but less prone to error.

The second method is, build your pages as you normally would, so you can see them and play with them and then replace the first part of all your link and image sources with the special cart code. This method can make it easier to see what your pages look like, but depending on your grasp of the specialized cart code, it may leave you more open to error.

The following are step-by-step instructions for opening and editing the installed demo pages on a file-by-file basis.

This page has special links that are used to start up any shopping session. You can move this page anywhere in your site, but the example "starter" links already on this page -- Enter Cart, Browse Products and Begin Search -- must remain in their cart ready format. You will see that links look like this:

<a href="/cgi-local/shop.pl/page= products.htm ">

<a href="/cgi-local/shop.pl/page= search.htm ">

<a href="/cgi-local/shop.pl/page= frameset.htm ">

You can replace the filenames in blue with any "cart-ready" page and that would be the first page that starts to keep track of what a shopper is doing.

The funny looking part of the link ( /cgi-local/shop.pl/page= ) is the part that makes the cart program work. Just copy the link as it shows up in your demo pages and paste it where you need it. Then change ONLY the filename (the part in blue in the examples).

You can either link to your enter.htm page to start shoppers off, or you can take the link format from above and link into any cart page you want, skipping the enter page altogether.

For example, if you wanted to take somebody right to a cart ready page, like the products page, but that you had called "our_specials.htm", you would make a link like this:

<a href="/cgi-local/shop.pl/page= our_specials.htm ">

Keep in mind that you can put this kind of "starter" link ANYWHERE on your site. Whatever filename you swap in will be the first "cart" page that the shopper sees. The entry page is provided to get you started, but you do not have to use it for your cart to work. However, if you do NOT follow the above format, the "cart" page that you link to will not function.

The graphics on this page are also cart ready, with absolute links. This means that the image references have leading slashes followed by the path the picture.

All the pages in the demo depend on your pictures being uploaded to the cartpix sub folder. The image reference, for say, the Running Dude at the top of the page looks like this:

<img src="/shop/cartpix/ rundude.gif " alt=" Graphic " width=" 103 " height=" 104 " border=" 0 " align=" bottom ">

The leading slash essentially "homes" the browser to the root of your site, no matter where the page is to begin with. The browser then follows the path to the graphic. Image sources for cart pages must have absolute references .

If you want to put your logo or graphic in that spot, you need to change the image specs to match your own graphic, and then upload the graphic to your cartpix directory. Maybe it would look like this:

<img src="/shop/cartpix/ mylogo.gif " alt=" My Company " width=" 200 " height=" 100 " border=" 0 " align=" middle ">

The same goes for the background tile and the logo at the bottom:

<body bgcolor="white" link="#330099" vlink="#330099" background="/shop/cartpix/ bgndtile.gif ">

All of the other cart pages -- except for the secure orderform and thanks pages -- follow this exact same format for graphics.

You can substitute http and your full domain for the leading slash if you want, by replacing the domain and image attributes in the following sample:

<img src="http:// YOURDOMAIN.ZZZ /shop/cartpix/ rundude.gif " alt=" Graphic " width=" 103 " height=" 104 " border=" 0 " align=" bottom ">

For those authors who wish to build their pages "normally" -- whatever that is -- and then replace regular links and image sources with cart ready code, do the following:

  • Put all your pages in /shop and all your images in /cartpix before linking cart pages and placing pictures
  • However you wish to replace the code, you will need to change all image references from:

< img src=" cartpix/logo.gif" alt="My Company" width="200" height="100" border="0" align="middle">

to

< img src="/shop/ cartpix/mylogo.gif" alt="My Company" width="200" height="100" border="0" align="middle">

See products.htm for info about replacing relative hyperlinks with cart-ready hyperlinks

This is where things get a little more complex.

The products page has "cart-ready" graphics placed in it, just like the enter page. These include the same background tiles and logos and a product picture repeated over and over so we don't have to fill your cartpix directory with unnecessary graphics; the same image is used as PLACEHOLDER for the product pictures. Hopefully, your products are not quite so cheesy . This "dummy" product picture is referenced just like all the other graphics that we looked at in the enter.htm page:

<img src="/shop/cartpix/ velour.jpg " width=" 187 " height=" 245 " border="0" align="middle">

You can replace all instances the file "velour.jpg" with your own picture filenames, making sure to upload those pictures to shop/cartpix . You would need to change the height and width as well to match your own graphic. If you only have one picture, you can delete the extra velour.jpg files. See enter.htm for info about building pages with relative links and sources and replacing with cart ready references.

The products page, however, has a few extra graphics with LINKS on them. This is what the link and image source for the "products" button on the top left of the page look like:

<a href="MY_URL/page= products.htm ">
<img src="/shop/cartpix/ prodct.gif " alt="Button 1" width="113" height="30" border="0" align="bottom"></a>

The image source is just like all the others. The hyper link, however contains a "token" called MY_URL along with the "page=" part of the link. This kind of link structure is how internal cart links HAVE to be, with the exception of links to the secure orderform.

A token is a variable -- a placeholder -- that the cart replaces automatically with a much longer string that makes the cart program function properly and keep track of what the shopper is doing. Note that MY_URL is not in blue above, it SHOULD NOT be replaced with anything. The curious can go to the documentation for more info about the wonderful world of tokens and how to define them.

All YOU need to do is change the FILENAME that you want to be the link. Again, these kind of cart-ready links will not work on your machine locally. (Your computer will not know what MY_URL means, but the cart program online will). For example, the second button -- products2 -- has a link like this:

<a href="MY_URL/page= product2.htm ">
<img src="/shop/cartpix/ prodct2.gif " alt="Button 2" width="113" height="30" border="0" align="bottom"></a>

With that in mind, the button for "view cart" at the very bottom of the page follows the same format. Since this button links to the cart page, you can copy this button and the link and use wherever you want a "show cart" link:

<a href="MY_URL/page= cart.htm " target="_top"><img src="/shop/cartpix/ viewcart.gif " alt="View Cart" width="52" height="64" border="0" align="middle"></a>

All that changes is the filename after MY_URL/page= , and you've got a good link.

For those authors who wish to build their pages "normally" -- whatever that is -- and then replace links with cart ready code, do the following:

However you wish to replace the code, you will need to change all link references from:

<a href=" myfilename.htm ">
<img src=" cartpix/mybutton.gif " alt="Filename" width="113" height="30" border="0" align="bottom"></a>

to

<a href=" MY_URL/page=filename.htm ">
<img src=" /shop/cartpix/mybutton.gif " alt="Filename" width="113" height="30" border="0" align="bottom"></a>

Now s-t-r-e-t-c-h and Onward to the buy links and forms that are the real meat of the page.

The first item for sale on the demo page is the 20" monitor. This is an easy buy link that does not require a form because there is nothing for the user to choose, they either buy 1 monitor or ...not.

This first buy link and button graphic look like this:

<a href="MY_URL/page= cart.htm /buy= 1 /item= 9 "><img src="/shop/cartpix/ buy.gif " width="52" height="64" border="0" align="middle"></a>

The first part of the link is similar to the link on the PRODUCTS menu buttons, with the required MY_URL/page= portion, followed by buy and item ID variables.

The page=cart.htm portion of the link tells the cart program to show the cart after the shopper clicks on the link. This part is just like a regular cart-ready page link.

The 2 variables -- buy and item -- tell the cart HOW MANY of WHAT ITEM to add to the cart. In this case the quantity is 1 (buy=1) and the item ID (item=9) is taken from field 1 of the product_list.txt file -- remember that?

9|AX-127|20" Sony Monitor|1422.34|50||

The first field for this product is the item ID -- Number 9. This is what the item= variable is set to in the form above. It helps to have your product_list.txt file in front of you when you are building these kind of links. For your own products, you would need to change the item ID number in the link to match your own database. You will also need to change the actual text in the page to describe what product is being purchased with that link.

If you want a page other than the cart page to be shown when a shopper clicks buy, you need to change the page= part of the link. For example, if you wanted the shopper to see the same products page after clicking buy, the link would need to look like this:

<a href="MY_URL/page= products.htm /buy= 1 /item= 9 "><img src="/shop/cartpix/ buy.gif " width="52" height="64" border="0" align="middle"></a>

Keep in mind that the instructions you send through the link are independent of each other. You can have things be added to the cart but have the next page be any page you want.

The next item, Polo Tops, does not have a link on the buy button, but rather the buy button is used as a FORM SUBMIT button. The form action looks much the same as a regular "buy" link, but the form elements allow the shopper to select qualities like size and color when adding the item to the cart.

The form allows the shopper to use the pull downs to select color and size. Again, you would need to edit the pull downs to reflect the size and color choices of that item. The cart does not allow for other item properties to be set, only color and/or size. You can not, for example, create a form input element for "pattern"; it will not work.

Here's what the form looks like:

<form action="MY_URL/page= cart.htm /buy= 1 /item= 31 " method="POST">
<select name="color" size="1">
<option value="Lt. Blue with White Stripe">Lt. Blue w/White Stripe
<option value="Navy Blue with White Stripe">Navy Blue w/White Stripe
</select><br>
<select name="size" size="1">
<option value="XS">XS(3-4)
<option value="S">S(5-6)
<option value="M">M(7-8)
<option value="L">L(10-12)
</select><br>
<input type="image" src="/shop/cartpix/ buy.gif " width="52" height="64" border="0" align="middle">
</form>

The action is like a regular buy link, telling the cart to show the cart.htm after the form is submitted, telling the cart to buy one quantity of the given item and that the item being purchased is 31 (from the first field of the product_list.txt file). So to use this form, you need to put YOUR item ID in the form action.

The select lets the shopper choose color and size.

The last part of the form is the input type="image" and the cart-ready image source for the buy button. This code makes the graphic the "submit" button. You could also take this graphic out completely and put in a regular HTML form submit button if you w ant. As long as there is a way for the form to get submitted, your "buy" will work.

Authors who are familiar with basic form concepts should begin to realize how many ways you can build a form to add items to the cart. The buy and item ID variables can be form inputs themselves, allowing for things like purchasing multiple items or quantities at once. The demo products pages have a good variety of forms that you can use or modify. For example, the Embroidered Velour Top form allows you to choose size and enter how many you want to buy.

<form action="MY_URL/page=cart.htm/item=30" method="POST">

<table border="0" cellpadding="3" cellspacing="1">
<tr>
<td align="right" valign="middle"><font size="2">

<select name="color" size="1">
<option value="Wine">Wine
<option value="Navy Blue">Navy Blue
</select><br>

<select name="size" size="1">
<option value="XS">XS(3-4)
<option value="S">S(5-6)
<option value="M">M(7-8)
<option value="L">L(10-12)
<option value="XL">XL(14)
</select><br>

<b>Quantity:</b>
<input type="text" value="1" name="buy" size="4"> </font></td>
<td align="right" valign="middle"><input type="image" src="/shop/cartpix/buy.gif" width="52" height="64" border="0" align="middle"></td>
</tr>
</table>

</form>

Note that the form action no longer contains a buy variable, because this is being submitted with the form using the text box. The NAME of the text box form input is buy , so when the form is submitted, whatever the shopper ha s entered for quantity is what buy will equal.

For a more extended discussion of using forms and the shopping cart, see Hassan's documentation.

OK -- deep breath.
One, two, three, and four; now we get to code some more.

The last little bit for this page is the link to the Secure Orderform .

You can use the checkout button on the demo pages anywhere on your cart-ready shop pages, but it is also easy to change this graphic and what it links to. Hopefully, if you edited yourself 20 or so links for buying items, this will seem old hat.

The link for pulling a SECURE page uses a different token in place of MY_URL . The CHECKOUT button on the very bottom of products.htm has this kind of token:

<a href=" SECURE_URL/page=ordrform.htm " target="_top">
<img src="/shop/cartpix/ checkout.gif " alt="Checkout" width="52" height="64" border="0" align="middle"></a>

Instead of MY_URL, it's SECURE_URL . This token will make the shopping cart program pull the next page through a SECURE link. The information that is presented and submitted will be secure and shoppers should see the "locked" icon in the bottom of their browser window. The SECURE_URL token is followed by the same page= format as all other cart-ready links. In this case the page that will be seen next is the orderform (ordrform.htm).

You can also copy the link information from this button and put it on regular HTML text.

If you wanted to use a different graphic and/or you had renamed your orderform page, you would need to edit the HTML like this:

<a href=" SECURE_URL/page=myorderform.htm " target="_top">
<img src="/shop/cartpix/ mycheckoutbutton.gif " alt="Checkout" width=" 30 " height=" 30 " border="0" align="middle"></a>

Remember, your cart-ready HTML pages must be uploaded to the shop directory, and if you are following the coding examples in our demo pages, you must upload your graphics to the shop/cartpix directory. The ordrform.htm page has more details about the special image sources in secure pages.

This one is just the same as products.htm but with different type at the top and in the title bar. This page was created so you would have an example of 2 menu links between catalog pages that would function properly. Remember that the velour.jpg photo is used as placeholder and is repeated so that we wouldn't have to include a lot of unnecessary graphics in the demo pages.

The cart page has the same cart-ready image references as all the other pages.

At the top of the page, below the Running Dude and the headline, is another token this one is called:

PUT_BUY_ INFO _HERE

This token is not a link or anything, just a regular piece of text in the page. The cart program will automatically substitute other information for this token . In this case, PUT_BUY_ INFO _HERE will be replaced with the description from field 3 of your product_list.txt database file and some nice explanatory type. What this means is that if somebody buys an item, you don't see PUT_BUY_ INFO _HERE on your cart page, you will see:

Description of item from field 2 has been added to your cart.

If the shopper has NOT added anything to their cart, like if the shopper clicks on VIEW CART before adding anything, this line will be blank. It won't say "Nothing has been added to your cart." Lastly, you must have a space before and after the token string or you may get some errors if you have styled the type (made it bold, or in a different typeface, or in a color).

You can take the PUT_BUY_ INFO _HERE token out or put it on anywhere on any cart-ready pages.

Next on the cart page is the token-within-a-form that displays your actual cart contents:

<form action=" MY_URL/page=cart.htm/recalculate=1 " method="POST">

<hr noshade>
<font face="helvetica, arial"> PUT_SHOPPING_LIST_HERE </font>
<hr noshade>

< input type="image" src="/shop/cartpix/ recalc.gif " name="Submit" width="64" height="50" border="0" align="bottom" value="Recalculate" >

< a href="SECURE_URL/page=ordrform.htm" target="_top">
<img src="/shop/cartpix/checkout.gif" alt="Checkout" width="52" height="64" border="0" align="bottom">
</a>

< a href="MY_URL/page=cart.htm/empty=1" target="_top">
<img src="/shop/cartpix/empty.gif" alt="Empty Cart" width="52" height="54" border="0" align="bottom">
</a>

</form>

The whole guts of the cart presentation are in a form. This is because the cart contents are generated by the shopping cart program and contain form elements (like the quantity fields and the tax checkbox). You can see the action on the form is like most shopping cart links and form actions, in this case the form will show you the cart page after it does a recalculation.

Within this form, is another token , this one called PUT_SHOPPING_LIST_HERE . The cart program will substitute the cart contents and form elements for this token . Remember, just like the PUT_BUY_ INFO _HERE token, you need to have a space before and after this string if you want to style it with a particular typeface, color, size and boldness. Some of the cart contents WILL display with whatever styling you put on the PUT_SHOPPING_LIST_HERE token.

The next item in the form is the recalculate button, which is used as form submit button -- recalc.gif . You can change the filename, alt and size attributes of this image to use your own recalculate button, or you can use a regular HTML button. Make sure you upload any buttons you create to your cartpix folder.

After the recalculate button is the EXACT SAME checkout button described in products.htm.

Last but not least is the EMPTY CART button. It has the same link format as all other cart links; instead of a buy variable or a color variable, it has empty=1 . This instruction tells the program to empty the cart.

The search page contains a simple form that tells the shopping cart program to search all the descriptions -- field 3 -- of the product_list.txt file, returning the results in a table with full descriptions, prices and links that add the items directly the cart.

If you use the BSI demo search.htm and results.htm pages, you will not need to edit the form, only the graphics and HTML within the pages to match the rest of your site. You can put the small search form on any cart-ready page of your site. The default setting on the form code will always call up the results.htm page after the search is submitted.

If you want to change filenames, you will need to change the form action on the search from:

<form action="MY_URL/page= results.htm " method="POST" name="query_type">

to:

<form action="MY_URL/page= yourresultspage.htm " method="POST" name="query_type">

The action of the form tells the cart which page to show the results in.

This page is nearly identical to the search.htm page, except that is has another token very similar to the tokens on the shopping cart page. The token that is near the top of the results page is

PUT_SEARCH_RESULTS_HERE

This token does just what it says it does. Don't forget about the space before and after the text if you w ant to color and style the type of the search results table.

All the links on the prices of items that show up as "hits" in a search add that item to the cart and then take the shopper to the cart page.

This page is very similar to the other cart pages with a few exceptions. The big one being that all the IMAGES have a slightly different format for inserting them into the pages. The reason of this is that YOU CAN NOT MIX SECURE AND INSECURE elements/html within the same secure page. If the form is secure, the graphics have to be secure. It is common to run NO graphics on secure pages, not even background tiles and you may want to delete all the graphics from the secure orderfrm.htm and secure thanks.htm page, especially if you have already been having substantial difficulties with the regular cart graphics.

Keep in mind also that SECURE pages ARE slower to load, as all the data has to be encrypted, a handshake established, everything sent, de-encrypted, and you get tired just thinking about it. Graphics especially can slow this process down and we definitely encourage you to keep the graphics on your secure pages to a minimum.

As we have already seen, all cart images have been following this format:

<img src="/shop/cartpix/ yourgraphic.gif ">

The SECURE pages of your cart follow a very similar format, but use an additional token that makes the graphic secure to match the page. Remember the special link that calls up the orderform securely to begin with? It's a lot like that:

<img src=" SECURE_ IMG /shop/cartpix/ yourgraphic.gif ">

The demo secure orderform graphics look just like the above format. Check out the FatCow logo at the bottom of the secure form:

< img src="SECURE_ IMG /shop/cartpix/ nwlogo_w.gif" alt="FatCow Logo" width="159" height="63" border="0" align="middle">

The only other special trick on the orderform is the action of the form, which also follows the SECURE format -- just like the checkout button:

<form action="SECURE_URL/page= thanks.htm /mail=1" method="POST">

The form action above tells the cart program to show the thanks.htm after the form is submitted. The thanks page must have secure images as well.

You can delete certain inputs from the orderform (like gift message and comments) if you want, but you can NOT add fields that are not supported by the cart. You can not change the names of fields that are used by the cart. For ultra-detailed explanations of what you can and can not do with the orderform fields, see the documentation at Hassan's documentation.

The graphics on this page follow the same secure format as the orderform graphics.

The links to browse again and back home, though, are slightly different than other links at the cart and you must edit these links . They are not ready-to-go on the installed demo pages. The links in the demo look like this:

<p>Browse <a href="http:// YOURDOMAIN.COM /cgi-local/shop.pl/page=products.htm">Products Again</a></p>

<p>Back to <a href="http:// YOURDOMAIN.COM ">Homepage</a></p>

You must edit these links to include your domain. You need the full http link so that the shopper's browser will switch off the BSI secure domain link and go back to regular http pages.

If you do not edit these links, this is what folks will see in their browser's status bar and the link won't work (is your website domain actually called "YOURDOMAIN.COM"?)

This is a simple, 2-frame frameset that you can use as basis for framed pages if your site requires them. Keep in mind that implementing the cart with framesets is not the most difficult web chore in the universe, but it does require some technical rigor and a firm grasp of how framesets function. This frameset has 2 pages inserted - mainbody.htm and navbar.htm.

Using frames with the cart is very similar to regular linked pages. Only for the frames, the FRAME SRC tag and attribute need to follow cart formats. The demo frameset pages show this:

<frame src="MY_URL/page= mainbody.htm " name=" main " noresize>

Again, just like cart-ready links and images, your frameset will not preview locally in your browser; it will only work online.

Used in the "main" frame of the frameset file.It is a version of products.htm that does not have the menu bar on the left hand side. Please realize that links within mainbody.htm will pull up regular, non-framed versions of the demo pages and you will begin to see double menus. If this lost you, and if changing the menus around on the demo pages to work with frames is beyond your skills, you should not implement the cart with frames.

Used in the "navbar" frame of frame.htm. The links follow the same exact format as the cart-ready menu links in products.htm, but with the addition of the correct frame target. Just like this:

<a href="MY_URL/page= mainbody.htm " target=" main ">
<img src="/shop/cartpix/prodct.gif" alt="Button 1" width="113" height="30" border="0" align="bottom">
</a>

Make sure you have entered actual product weights in the 5th field of your product_list.txt database file. Refresh your memory here, if you need to. The UPS charts depend on knowing the actual weight of the items in order to compute shipping costs.

If you initially configured your cart to ship with UPS rate and zone tables (during the installation... remember that?), you will need to download the zone and rate charts for your zip code from the UPS site.

Go to the UPS zone and rate page here. This link opens a NEW browser window; you can close the UPS window when you are done to get back to this tutorial.

The UPS site contains instructions for downloading the ZONE and RATE charts for your zip code. Remember to download the charts for the zip code that you SHIP FROM rather than your mailing address.

Download the files as comma-delimited text , if given the option.

Put the files wherever you want on your hard drive, but you MUST:

  • Upload both of them to your shop directory
  • Name each of the charts the same as the name you chose during your installation.

Assuming that you chose USE UPS during the installation process, the PUT_SHOPPING_LIST_HERE token on your cart page (or anywhere else for that matter) should display a zip code text input that customers fill out in order to be charged real UPS costs.

NOTE: the "use UPS shipping" method only supports regular UPS ground; the cart does not support 2nd Day and Overnight UPS tables.

Edit Email & Footers

These are the TEXT (.txt) files. These files must be downloaded and uploaded "as text" -- otherwise known as ASCII mode. If you are not sure how to do this, see our FTP help.

Open and edit these 2 files in a text editor:

header.txt

The content of this text file is automatically inserted into the top of the email receipts that are sent to the customer. Show off your ASCII art!

footer.txt

The same as the header.txt, but at the bottom of the email is the proper place to put contact info, or specials that are only sent to customers who have actually purchased from you.

Upload the files AS TEXT (ASCII) to your shop directory.

Upload

Upload all the following files to your shop directory "as text":

  • product_list.txt
  • header.txt
  • footer.txt

Upload all your HTML pages to your shop directory . Do not put into subfolders.

Upload all your pictures to the cartpix directory that is within shop.

TEST TEST TEST TEST! Check every link, every buy button, every size and color choice. Everything. Put your own email address in the orderform and see what your receipts look like.

If you have required fields in your orderform you will need to fill out those fields pro

y to test your cart.

If you are using the static credit card checking algorithm , use the credit card number 4111 1111 1111 1111 for testing.

If you are using Authorize.net, you must use your Authorize.net Control Panel (set up for you by Authorize.net) to put your account in "test" mode. Otherwise you will have to enter a valid credit card number and exp. date into the orderform to test.

Credit Card Authorization

Authorize.net -- If you are using Authorize.net, you must use your Authorize.net Control Panel (set up for you by Authorize.net) to put your account in "test" mode. Otherwise you will have to enter a valid credit card number and exp. date into the orderform to test.

If you are using the static credit card checking algorithm , use the credit card number 4111 1111 1111 1111 for testing.

Setup

There are 3 methods to change how your cart is configured. Which one you use depends on your abilities and your comfort level

    1. Use your Control Panel to reinstall your cart. Enter in ALL information again, shipping, email, everything. Change what you want to be different. Do NOT check the box for "install cart demo pages", otherwise you will potentially overwrite your own files in the shop directory

      or
    2. Use the shop.cfg generator at Hassan's documentation to create a new configuration file. The generator will ask you to save this file and upload to your CGIdirectory. After you "save as", make sure the file is named shop.cfg. Upload the file to your cgi-local directory as text (ASCII mode).

      You MUST then use an FTP program to set the PERMISSIONS on the shop.cfg file or your cart won't work. The permissions should be set just like this:



      or
    3. Download the shop.cfg file from your cgi-local directory as text . You can then open the file in a text editor and make changes to the various definitions by hand. Save as text and upload again to cgi-local as text. The documentation at Hassan's documentation has extensive notes about editing the .cfg file. There also remark in the shop.cfg file itself that can be very useful. I f you are not sure about how to edit this file, it is better to go through the trouble of filling the installer form again. Takes longer, but there is less change of error.

      You MUST then use an FTP program to set the PERMISSIONS on the shop.cfg file or your cart won't work. The permissions should be set just like this:

Suggestions

Please do not use this form for specific technical problems and questions. Use your tech support link at your Control Panel to get site-specific answers.

 
Name:
Email:
Comments & Suggestions:

 
 
   
   
BSI $99 Deal Byte Size BSI DIY Deal
Privacy Terms Of Service Acceptable Use Sitemap Contact