Remember the JavaScript objects we used in the earlier chapters? They’re back with a vengeance. Each product is treated as an object with several properties; that is, each product has the following properties:

To achieve the desired result, the product constructor function is defined as follows in lines 1-10:

function product(name, description, price, unit) {  
  this.name = name;  
  this.description = description;  
  this.price = price;  
  this.unit = unit;  
  this.plu = name.substring(0, 3).toUpperCase() +     
    parseInt(price).toString();  
  this.icon = new Image();  
  return this;  
  }

Notice that there are six properties created, but only four arguments expected. The number of properties and the number of expected arguments aren’t correlated, but consider how each property receives its value. The first four are obvious. Properties name, description, price , and unit are all assigned the values of the matching argument names.

plu is a different story, though. It’s actually a composite of the name and price properties. The uppercase of the first three characters of name plus the integer value of price make the PLU number. So a boat that cost $5501.00 has the plu property of BOA5501. Keep in mind that this is arbitrary. The products you sell probably have their own tracking numbers. I did it this way to keep things simple. The last property is icon, which for now is assigned a new Image object. There’s no need for an argument to do that.

We know that each product is really a product object. Likewise, each product category is really a category object. Just as products have properties, so do categories. Have a look at the properties of the category object:

A category constructor saves the day in lines 11-21:

function category(name, description) {
  this.name = name;
  this.description = description;
  this.prodLine = eval(name);
  var imgDir = "images/" + name.toLowerCase() + "/";
  for (var i = 0; i < this.prodLine.length; i++) {
    this.prodLine[i].icon.src = imgDir +
       this.prodLine[i].name.toLowerCase() + ".gif";
    }
  return this;
   }

Each category has three properties—a string called name, another string called description, and an array called prodLine. Properties name and description seem straightforward, but where does the array come from, and how do you get it using eval()? The answers to both will be clearer in a moment, but this is the basic strategy: whatever you name the category, the product line will be an array of the same name. For example, if you name a category stereos, then the array containing all the stereo products will be called stereos. That is, prodLine would be a copy of the variable stereo, which is an array of different stereo products.

Remember that each product has a property called icon, which is an Image object that hasn’t been assigned a source. Let’s get some more mileage from the category name. Not only does every category keep its product line in an array of the same name, but all the images for the products in that category are stored in a directory of the same name.

All the products in the Music category are kept in the music/ directory. The Hardware category has images in the hardware/ directory, and so on. That sounds logical. If this type of directory structure is in place, then we can preload all the images for the category when the category is constructed. Lines 16-19 handle the job:

var imgDir = "images/" + name.toLowerCase() + "/";
for (var i = 0; i < this.prodLine.length; i++) {
  this.prodLine[i].icon.src = imgDir +
     this.prodLine[i].name.toLowerCase() + ".gif";
  }

If you examine the directory structure in ch08, you’ll see this:

Line 17 sets the SRC property of each icon (an Image) to images/ + the product name in lowercase + / + ".gif.” This goes back to those naming conventions I’ve been talking about in several previous chapters. Each product has an image of the same name and is located in a folder with the same name as the category to which the product belongs. Here’s the formula:

Each product image URL = images/category/product_name.gif

If you browse ch08images, you’ll notice each image name corresponds with a Shopping Bag product located in a directory corresponding with a Shopping Bag category. This keeps things simple, and lets you add, remove, and keep track of products very easily.

You’ve seen the constructor functions; now let’s put them to work. The first thing to do is create the products, then the categories. Function makeProducts() does both. Here are lines 22-248. Since much of it is the same product constructor called repeatedly, this is the abbreviated version:

function makeProducts() {
  Appliances = new Array(
    new product("Dryer",
       "Stylish pastel design, contemporary two-button engineering.",
       263.37  ,
       "each"),
     new product("Hairdryer",
       "Fancy yellowish blast, and durable cord. No expense spared.",
       1.15,
       "pair"),
     new product("Oven",
       "Made in the 1850's, this coal-powered unit quickly blackens any" +
         "favorite dish.",
       865.78,
       "each"),
     new product("Radio",
       "Revolutionary one-channel technology. White noise and static" +
         "included.",
         15.43,
         "each"),
     new product("Toaster",
       "BBQ-style toaster. Only a moderate shock hazard.",
       25.78,
       "each"),
    new product("Washer",
       "Does a great job on partially everything.",
       345.61,
       "each")
     );
...
...  and so on ...
...
  categorySet = new Array(
    new category("Appliances", "Kitchen machines to make life easier"),
    new category("Buildings", "Architectural structures you can't " +
       "resist"),
    new category("Clothing", "Fashionably questionable apparel for " +
       "the 21st century"),
    new category("Electronics", "Nifty gizmos that drain your wallet"),
    new category("Food", "The best product to order over the Net"),
    new category("Hardware", "All kinds of general purpose " +
       "construction tools"),
    new category("Music", "The hottest new instruments from places " +
       "you've never heard of")
       );
  }

                  

First come the products. Variable Appliances is set to an array. Each element in the array is a product object. Each call to product carries with it the expected arguments for building a product—a name, description, price, and unit. This happens for Buildings, Clothing, Electronics, Food, Hardware, and Music.

All that’s left is coming up with the categories. Actually, the category names are already in place (Appliances, Buildings, Clothing, etc.); we just have to let Shopping Bag know that. Lines 235-248 make it happen:

categorySet = new Array(
    new category("Appliances", "Kitchen machines to make life easier"),
    new category("Buildings", "Architectural structures your can't " +
       "resist"),
    new category("Clothing", "Fashionably questionable apparel for " +
       "the 21st century"),
    new category("Electronics", "Nifty gizmos that drain your wallet"),
    new category("Food", "The best product to order over the Net"),
    new category("Hardware", "All kinds of general purpose " +
       "construction tools"),
    new category("Music", "The hottest new instruments from places " +
       "you've never heard of")
       );

Variable categorySet is also an array. Each element in the array is a category object constructed with two arguments, a name, and a description. The first argument is assigned to the name property, and the second is assigned to the description property. Take another look at line 14 of the category constructor:

this.prodLine = eval(name);

prodLine is set to the value of eval(name). So the call to category() in line 249 means prodLine equals eval("Appliances"), which equals Appliances. Now the category named Appliances knows about all its products (there in the prodLine array). Each element in categorySet represents another Shopping Bag category. This makes adding and removing them a snap.

The products have all been created. The only thing left to create during load time is . . . well . . . a shopping bag. All this shopping bag needs is a few properties to handle the payment and an array to store all the products the user selects. The Bag() constructor in manager.html defines the one and only shopping bag. Here are lines 21-31 of manager.html, shown in Example 8.4 later in the chapter:

function Bag() {
  this.taxRate   = .06;
  this.taxTotal   = 0;
  this.shipRate   = .02;
  this.shipTotal  = 0;
  this.subTotal   = 0;
  this.bagTotal   = 0;
  this.things   = new Array();
  }
shoppingBag = new Bag();

There are two variables to hold arbitrary rates, taxRate and shipRate . One is a multiple for computing state sales tax. The other, also a multiple, is used to calculate shipping charges. Your tax structure will likely differ, but you can at least see the direction here. Three other variables, taxTotal, subTotal , and shipTotal , represent the sum of the tax, the sum of all the product selections and their quantities, and the grand sum that the user must pay, respectively. The last variable is an array. things will contain all the products, including quantities that the user selects. Variable shoppingBag is then set to the value a new Bag(). Let’s shop around.