Copyright (c) 1999 - 2000; Microburst Technologies, Inc. All Rights Reserved.
1. Introduction uCatalogTM is a shopping system created by Microburst Technologies, Inc. and designed specifically for creating interactive catalogs on CD-ROM. uCatalogTM consists of a series of Java applets and JavaScripts that run locally on the customer's browser and do not require any interaction with a web server....thus making it the ideal system for putting interactive catalogs on CD-ROM. 2. Features Practical features of uCatalogTM include:
3. System Requirements The system requirements of uCatalogTM are as follows: 1. System Requirements of the Store Owner/Web Developer
4. Steps In Creating A CD-ROM Catalog Creation of an interactive CD-ROM catalog with uCatalogTM consists of the following steps:
5. Setting Up Directory Structure Typically, the root directory on the interactive CD-ROM will consist of nothing more than an "index.html" file, a main "store" directory, and possibly an additional directory for non-store related information. By keeping the contents of this root directory simple, it is easier for customers to get started by locating and opening the "index.html" file in their browser. Once they get the "index.html" file opened in their browser, you can link them to any directory/subdirectory on the CD-ROM that you want. This is illustrated in the figure below.
Figure 5.1 The Root Directory Of The CD-ROM Furthermore, because uCatalogTM is Java-based and because various browsers handle caching Java Applets differently, there is a specific directory structure that should be used for your interactive CD-ROM catalog. This recommended directory structure is based on experience in dealing with Java and the various browser differences and is illustrated in the figure below.
Figure 5.2 The Store Directory Structure Note: You can make as many "html" directories for your store as you like, however, it is important that they are all on the same directory level. That is, put all "html" directories on the same directory level as your "classes" directory. So to sum up what you need to do to create the necessary directory structure for your CD-ROM store, on your development computer:
6. Setting Up Catalog Pages/Applets Upon setting up your directory structure on your local computer, you can begin creating your catalog pages. This process simply involves using any text or HTML editor to create your product pages. The pages should be standard HTML pages (located in any of your "html" directories) and can utilize any multimedia capabilities that are supported by the browsers you intend to support. The beauty of a CD-ROM catalog is that you don't really have to worry about file sizes and download time because everything will be read locally from the CD-ROM....So don't be afraid to utilized images, sounds files, animations, movies, and any other multimedia capabilities to enhance your products pages and the customer's interactive shopping experience. In addition to putting product descriptions and multimedia capabilities on your catalog's HTML pages, you will also need to have a way to allow customers to select items that they want to purchase and add them to their virtual shopping cart. This is done via the use of uCatalog's Input Applets and Input JavaScripts. The uCatalogTM Input Applets and JavaScripts are described in the following two sections. 6.1 Input Applets uCatalogTM comes with a variety of Input Applets that can be used to "Add" or "Input" items into the shopping cart. These applets have been designed to plug easily onto any web page, thus giving you almost total creative freedom when designing your web pages. That is, you can put any product descriptions, images and/or sounds on your pages - using regular HTML - and then add any of the various uCatalogTM Input Applets onto the pages as the means for adding the items to the shopping cart. The uCatalogTM applets are added to your HTML pages via the standard <APPLET> HTML tags and configured via some easy-to-use parameters. The figure below shows an example applet and the HTML used to create the applet.
Figure 6.1.1 Example Applet and HTML Note: If you have never used Java applets before and/or would like to see how to utilize the uCatalogTM applets, it is recommended that you try the uCatalogTM Tutorial. Need To Create Your Own Custom Input Applets? In order to further increase uCatalog's flexibility, we have released the Java API for the uCatalogTM Input Applets. This allows you to create your own custom Input Applets. See the uCatalogTM Programmer's Guide for more information about creating your own custom Input Applets. An Important Note About The "codebase" Parameter When adding the uCatalog applets to your store pages, you must use the special "codebase" parameter to specify where the Java "class" files are located. As was shown in Figure 6.1.1 above, the "codebase" parameter is specified on the same line as the <APPLET> tag. The value of this parameter should be the relative path to your "classes" directory and must be set to the exact same value for all of your uCatalog applets. So in other words, just remember to set the codebase of ALL of your applets to codebase="../classes/". 6.2 JavaScripts uCatalogTM has also provided a special JavaScript Interface Applet and an "Add Product" API (Application Program Interface) that allows you to create your own JavaScripts to interface with uCatalogTM. Like the uCatalogTM Input Applets, the JavaScripts can plug onto any web page. Observe the example in the figure below.
Figure 6.2.1 Example Input JavaScript One Important Note to remember about using any of uCatalog's JavaScript functions/API, is that you must add the special uCatalogTM JavaScript Interface Applet to any page that will be using the JavaScript API. This uCatalogJSI applet is a special JavaScript Interface Applet that provides the means by which JavaScripts can call Java functions. Only one instance of this applet needs to be added to each page that will be using the uCatalogTM JavaScript API, And typically, the applet is added at the very bottom of the page (just before the closing </BODY> tag) with a WIDTH of 2 and HEIGHT of 2 ... to make it virtually invisible. The HTML to add this applet to your pages is shown in the figure below.
Figure 6.2.2 Example HTML For The JavaScript Interface Applet 7. Special Applets In addition to the various Input Applets that were described in the previous section, uCatalogTM also provides a variety of other applets that can be used for configuring general store preferences (such as tax and shipping calculations), displaying the contents of the shopping cart, performing searches, and initiating the order process. A brief overview of these applets is provided in the following sections. For a complete description of all of uCatalog's applets, see the uCatalogTM Applet Reference. 7.1 Initialize Applet The uCatalogInitialize applet provides the means by which you can configure tax rates, shipping rates, handling fees, and many other general settings for your store. In addition, it handles reading in your order template files and loading some of the fundamental uCatalogTM class files. Although not required, ideally this applet should be placed on one of your store's main entrance pages (Similar to what we have done for the uCatalogTM Demonstration Store). By putting this applet on one of the initial HTML pages of your store, it ensures that all of the general settings are applied as soon as possible. Furthermore, it gets time consuming initialization operations such as reading the order template file and loading the foundation uCatalogTM class files, over with immediately. This allows the rest of the shopping experience to be uninterrupted and perform better. To find out more about the parameters of the uCatalogInitialize applet, see the uCatalogTM Applet Reference. Note that setting up tax, shipping and handling preferences with the uCatalogInitialize applet will be discussed further below in the sections on setting up the order form and setting up the tax, shipping and handling. 7.2 Shopping Cart Applets The uCatalogCart applets provide the means by which you can allow customers to view/modify the current contents of their virtual shopping cart. uCatalogTM currently has three different "Cart" applets that provide options ranging from showing the full details of each item that has been added to the shopping cart - down to an option to just show the current quantity, subtotal, or total of items in the shopping cart. When setting up your CD-ROM catalog/store, it is recommended that you create at least one HTML page that can be used as a "View Cart" page. On this page, you should put a large version of the uCatalogCart1 applet so that customers can go to this page at anytime to view the full details of the items currently in his/her virtual shopping cart. If using a "FRAMES" layout for your CD-ROM catalog/store, you may also want to put a smaller version of the cart - perhaps the uCatalogCart2 applet - in one of the frames. This way, customers can immediately see items get added to their shopping cart when they press the product's "Add" button. See the uCatalogTM Demonstration Store for a working example of a main "View Cart" page and a working example of a small cart applet in a navigation frame. To find out more about the uCatalogCart applets and their parameters, see the uCatalogTM Applet Reference. 7.3 Search/Browse Applets As an alternative to adding all of your store products to static HTML pages, uCatalog provides several "search" and "browse" applets that read the product information from flat-text files and then dynamically generate the product pages. For complete descriptions of these applets and their parameters, see the uCatalogTM Applet Reference. For specific examples of how each applet is intended to be used, see uCatalogSearch1, uCatalogSearch2, uCatalogBrowse1, and uCatalogBrowse2. The sections below focus on describing the format of the data files used by these applets and on how to create templates for the product pages that are dynamically generated by these applets. 7.3.1 Format Of Data Files The data files used by the uCatalogSearch and uCatalogBrowse applets are standard bar-delimited text files. Each product in the file is listed on a separate line and each line in the file is separated into 15 bar-delimited fields. The table below describes each of the 15 fields associated with each product in the file.
Table 7.3.1 Product Data File Fields To see an example data file, Click Here. 7.3.2 Product HTML Template The format of the product pages that are dynamically generated by the uCatalogTM "search" and "browse" applets is controlled by the "ucatalog_product.html" file (located in the "classes" directory). This file is nothing more than a standard HTML file with some special keywords used to indicate where the product fields will be inserted. Feel free to modify the "ucatalog_product.html" file to satisfy your preferences. To assist, a table describing the 6 keywords has been provided below.
Table 7.3.2 Product Template Keywords 7.4 Order Button Applets The uCatalogOrderButton1 or uCatalogOrderButton2 applets are used to configure such order process preferences as the ordering instructions, whether to provide a print order option, whether you want to provide a save order option, and whether to provide an online order option. In addition, the uCatalogOrderButton applets provide the means by which the customer can initiate the order process. It is recommended that this applet (a.k.a. "Order Button") be placed on a "Place Order" page - possibly with instructions on how the order process works. As an example, see the "Place Order" page in the uCatalogTM Demonstration Store. (In that demo, the uCatalogOrderButton1 applet is actually configured to be displayed as the "Step 1" image.) To find out more about the parameters of the uCatalogInitialize applet, see the uCatalogTM Applet Reference. 8. Setting Up Order Form Setting up the order form for your CD-ROM catalog consists of nothing more than creating a standard HTML form with some pre-defined field names. That is, you can make your order form look however you like and contain any fields that you like by simply creating a standard HTML form and naming the fields of the form after some predefined uCatalogTM order form field names. The table below contains a complete list of the predefined order form field names. For each of the fields in the table, there is also an indication of the type of <FORM> element each field can be - such as a "text" form element, a "textarea" form element, or a "selection" form element. Note that all of the fields in the table do not have to be used on your order form - just use the one's you want.
Table 8.1 Order Form Field Names/Types In addition to creating a <FORM> with the field names listed in Table 8.1, there are also a few special tags that you must add to your order form page. These special tags are listed/described in the table below.
Table 8.2 Special Order Form Tags Additional Notes About Setting Up The Order Form
A Note About Gathering Payment Information On The Order Form There are two philosophies when it comes to collecting payment information from the customer. One philosophy is that the customer should fill in all order information at one time...including the payment details. This means that all of the necessary information has been collected and is available by the time the customer chooses to "print" the order or "place the order online". The other philosophy is that if the customer plans on placing the order online, he or she would not want to enter the payment information until after he or she has been transferred to the server and can see the indication that the server is secure. Both of these philosophies result in a secure online transaction, therefore, uCatalogTM has been designed to handle both. That is, the ucatalog.pl script that has been included with uCatalogTM will perform a check whenever it processes an online order. If at the time of the online order, the payment information has not already been collected, it will create forms for accepting the credit card or electronic payment information online. Otherwise, if the ucatalog.pl script detects that the order information was already collected, then it simply processes the order. The ucatalog.pl script will be discussed further in Section 12. 9. Setting Up Tax Rates The uCatalogInitialize applet has 6 parameters that are used to setup the tax rates/preferences for your store. Each of these parameters is described in the table below:
Table 9.1 Tax Rate Parameters 10. Setting Up Shipping Various shipping calculations can be setup via the uCatalogInitialize applet's "shipping_table" parameter. The format of this parameter is:
Where the SHIPPING NAME is the name of the shipping method, CALCULATION TYPE is the method by which the shipping charge will be calculated, and VALUE is the value (or values) that correspond to the calculation type. 10.1 FLAT_FEE Shipping Calculation The FLAT_FEE shipping calculation type allows you to setup the shipping charge as a flat fee. To charge a flat fee, simply set the VALUE to the fee that you want to charge. For example, if you want to charge a $5.00 fee for shipping, then set the shipping parameter to: "My Shipping Name,FLAT_FEE,$5.00" Or if you want shipping to be free (i.e., a charge of $0.00), then set the parameter to: "My Shipping Name,FLAT_FEE,$0.00" 10.2 SUBTOTAL_LOOKUP Shipping Calculation The SUBTOTAL_LOOKUP shipping calculation type allows you to setup the shipping charge to be based on a subtotal lookup table. The subtotal lookup table should be a series of subtotal=charge ranges with a format such as "subtotal1=charge1,subtotal2=charge2,subtotal3=charge3,subtotal4=charge4,...." and so on.... where the subtotal=charge combinations are interpreted as: if (subtotal1 <= ORDER SUBTOTAL) and (ORDER SUBTOTAL < subtotal2), then SHIPPING = charge1 if (subtotal2 <= ORDER SUBTOTAL) and (ORDER SUBTOTAL < subtotal3), then SHIPPING = charge2 if (subtotal3 <= ORDER SUBTOTAL) and (ORDER SUBTOTAL < subtotal4), then SHIPPING = charge3 if (subtotal4 <= ORDER SUBTOTAL), then SHIPPING = charge4 Note that you can list as many subtotal=charge combinations as you like - each one separated by a comma. Note also that the subtotal=charge combinations should be in increasing subtotal order - with the first subtotal being zero. As an example, suppose you wanted to charge shipping based on the following table: SUBTOTAL SHIPPING CHARGE $0 - $49.99 $10.00 $50 - $99.99 $8.00 $100 - $199.99 $5.00 $200 and over $0.00Then you would set the shipping parameter to: "My Shipping Name, SUBTOTAL_LOOKUP,$0=$10.00,$50=$8.00,$100=$5.00,$200=$0.00" 10.3 SUBTOTAL_FORMULA Shipping Calculation The SUBTOTAL_FORMULA shipping calculation type allows you to setup the shipping charge to be based on the formula: So as an example, if you wanted to charge $0.25 for each dollar of the subtotal, then you would set the shipping parameter to: "My Shipping Name,SUBTOTAL_FORMULA,$0.25" 10.4 WEIGHT_LOOKUP Shipping Calculation The WEIGHT_LOOKUP shipping calculation type allows you to setup the shipping charge to be based on a weight lookup table. The weight lookup table should be a series of weight=charge ranges with a format such as "weight1=charge1,weight2=charge2,weight3=charge3,weight4=charge4,...." and so on.... where the weight=charge combinations are interpreted as: if (weight1 <= ORDER WEIGHT) and (ORDER WEIGHT < weight2), then SHIPPING = charge1 if (weight2 <= ORDER WEIGHT) and (ORDER WEIGHT < weight3), then SHIPPING = charge2 if (weight3 <= ORDER WEIGHT) and (ORDER WEIGHT < weight4), then SHIPPING = charge3 if (weight4 <= ORDER WEIGHT), then SHIPPING = charge4 Note that you can list as many weight=charge combinations as you like - each one separated by a comma. Note also that the weight=charge combinations should be in increasing weight order - with the first weight being zero. As an example, suppose you wanted to charge shipping based on the following table: WEIGHT SHIPPING CHARGE 0 - 9.999 $5.00 10 - 19.999 $6.00 20 - 29.999 $7.00 30 and over $9.00Then you would set the shipping parameter to: "My Shipping Name,WEIGHT_LOOKUP,0=$5.00,10=$6.00,20=$7.00,30=$9.00" 10.5 WEIGHT_FORMULA Shipping Calculation The WEIGHT_FORMULA shipping calculation type allows you to setup the shipping charge to be based on the formula: So as an example, if you wanted to charge $1.00 for each pound an order weights, then you would set the shipping parameter to: "My Shipping Name,WEIGHT_FORMULA,$1.00" 10.6 QUANTITY_LOOKUP Shipping Calculation The QUANTITY_LOOKUP shipping calculation type allows you to setup the shipping charge to be based on a quantity lookup table. The quantity lookup table should be a series of quantity=charge ranges with a format such as "quantity1=charge1,quantity2=charge2,quantity3=charge3,quantity4=charge4,...." and so on.... where the quantity=charge combinations are interpreted as: if (quantity1 <= ORDER QUANTITY) and (ORDER QUANTITY < quantity2), then SHIPPING = charge1 if (quantity2 <= ORDER QUANTITY) and (ORDER QUANTITY < quantity3), then SHIPPING = charge2 if (quantity3 <= ORDER QUANTITY) and (ORDER QUANTITY < quantity4), then SHIPPING = charge3 if (quantity4 <= ORDER QUANTITY), then SHIPPING = charge4 Note that you can list as many quantity=charge combinations as you like - each one separated by a comma. Note also that the quantity=charge combinations should be in increasing quantity order - with the first quantity being zero. As an example, suppose you wanted to charge shipping based on the following table: QUANTITY SHIPPING CHARGE 1 - 4 $6.00 5 - 9 $8.00 10 - 19 $10.00 20 and over $15.00Then you would set the shipping parameter to: "My Shipping Name,QUANTITY_LOOKUP,0=$6.00,5=$8.00,10=$10.00,20=$15.00" 10.7 QUANTITY_FORMULA Shipping Calculation The QUANTITY_FORMULA shipping calculation type allows you to setup the shipping charge to be based on the formula: So as an example, if you wanted to charge $0.50 for each item, then you would set the shipping parameter to: "My Shipping Name,QUANTITY_FORMULA,$0.50" 10.8 CUSTOM Shipping Calculation If none of the above shipping tables/formulas fit your shipping calculation needs, we have provided a "CUSTOM" shipping option in which you can actually modify the JavaScript in the ucatalog_javascript.js file in order to manually program your specific shipping calculation. To do this, first set the shipping parameter to something like: "My Shipping Name,CUSTOM,$0.00" And then use any text editor to open up the "ucatalog_javascript.js" file that is located in your "classes" directory. *Note that this shipping method is for advanced users only and thus some knowledge of JavaScript programming is assumed. The very first function in the "ucatalog_javascript.js" file is called "calculateShipping" and is currently set to just call the "validateShipping()" method - which is the method that calculates/sets the shipping charge by using one of the pre-defined shipping calculations described above. The code for that function looks like this:
function calculateShipping()
{
// This function can be over-ridden for your own custom needs.
// See the uCatalog Programmer's Guide for more information.
return document.uCatalogJSI.validateShipping();
}
To use your own custom shipping calculation here, you will want to rewrite this function to perform your own calculation and set the shipping charge yourself via the setShipping() function. Other useful functions that may come in handy for programming your own shipping calculations are: getShippingMethodName() - which returns the name of the currently selected shipping option. getSubtotal() - which returns the current subtotal of the order. getTotalWeight() - which returns the current total weight of the order. getTotalQuantity() - which returns the current total quantity of the order. Note also that upon a successful calculation of the shipping charge, the calculateShipping() method should return the string "VALID" - indicating that the shipping was successfully calculated. So putting all of this together, lets give an example. Say we wanted to override the calculate shipping function so that for each item we charge $1.00 for shipping...but if the quantity is 10 or greater, then the shipping is free. To do this, the code for the calculateShipping() function would be something like this:
function calculateShipping()
{
var currentShippingName = document.uCatalogJSI.getShippingMethodName();
if (currentShippingName == "My Custom Shipping")
{
var currentQuantity = document.uCatalogJSI.getTotalQuantity();
var customShippingCharge = currentQuantity * 1.00;
if (currentQuantity >= 10)
{
customShippingCharge = 0.0;
}
document.uCatalogJSI.setShipping("" + customShippingCharge);
return "VALID";
}
else
{
// The shipping type selected was one of the standard methods.
return document.uCatalogJSI.validateShipping();
}
}
10.9 NONE Shipping Calculation One final shipping calculation that is available is the "NONE" calculation type. This can be used if you don't want to use shipping at all. To set shipping to NONE, set the shipping parameter to something like: "NONE,NONE,$0.00" Or since this is the default value, don't specify the shipping parameter at all. 11. Setting Up Handling The uCatalogInitialize applet has 3 parameters that are used to setup the handling fees/preferences for your store. Each of these parameters is described in the table below:
Table 11.1 Handling Fee Parameters 12. Installing/Customizing The CGI Script The ucatalog.pl script is a basic Perl Script that included with uCatalogTM. It is designed to provide only the basic functionality needed to securely process and read online orders. Since most companies have their own database/payment processing system for processing orders, the main purpose of the ucatalog.pl script is to serve as a "how to" illustration of how to access the data that gets passed to the script from the uCatalogTM CD-ROM store. Feel free to modify the ucatalog.pl script - or use it as a model for your own script - in order to handle your specific database/payment processing system needs. Installing The ucatalog.pl Script Below are some brief instructions on how to configure and install the ucatalog.pl script on your server. Note that it is assumed that you have some knowledge of installing/executing Perl CGI scripts on your server.
http://www.uburst.com/uCatalog/reference.html 13. Testing Throughout the development of your CD-ROM catalog - and especially before you start burning CD-ROMs for your catalog - it is very important to test out your CD-ROM store. Try adding items to the cart and then try placing test orders. Check that your order form is functioning properly and that the tax, shipping, and handling calculations are performing as you expect. Also, check your CD-ROM catalog pages with different browsers. There are slight differences in the way different browsers display Java applets so make sure their appearance is acceptable on the various browsers that you intend to support. If you run into any problems, refer to the troubleshooting section on our online reference site: http://www.uburst.com/uCatalog/reference.html 14. Troubleshooting In order to keep the troubleshooting tips as up to date as possible, we have moved the troubleshooting section to our online reference site at: http://www.uburst.com/uCatalog/reference.html 15. Creating CD-ROMs After you have sufficiently tested your catalog/store by running it directly off of your development computer, you are ready to put your catalog on CD-ROM. Putting your catalog actually on a CD-ROM, does not take much. Simply use the standard software that came with your Writable CD-ROM drive to transfer the same directory structure (and files) from your development computer onto the CD-ROM. As shown in the figure below, you may want to come up with your own "index.html" page that will be located in the root directory of your CD-ROM and which will handle linking customers to your store directory.
Figure 15.1 The Root Directory Of The CD-ROM
And once they get the index.html file open in their browser, browsing the rest of the CD/Catalog will be as easy as surfing the web. 16. Internationalization All of uCatalog's language specific settings (such as default button labels, messages, currency symbols, etc.) have been centralized into one uCatalogInternational class file. This means that you can create catalogs to support various countries/languages by simply replacing the uCatalogInternational module with the one for the language that you want to support. We are currently working on uCatalogInternational modules for Danish, Dutch, Finnish, French, German, Italian, Norwegian, Portuguese, Spanish, and Swedish. Contact us for details. 17. Creating Your Own Java Applets In case you can't find the applet you need in the uCatalogTM Applet Reference, we have released the Java API for the uCatalogTM Input Applets. This allows you to create your own custom Input Applets. See the uCatalogTM Programmer's Guide for more information about creating your own custom Input Applets. 18. Creating Your Own JavaScripts To further increase uCatalog's flexibility, we have provided the means by which you can create your own JavaScripts to interface with uCatalogTM. See the uCatalogTM Programmer's Guide for more information about creating your own custom JavaScripts. 19. Other References Additional references and resources can be found at:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||