Step 3: Showing All the Categories

Choosing “Show All Categories” is another way to navigate through the products. Function showStore() is readily equipped to handle this task, as lines 33-47 show:

function showStore() {
  gimmeControl = false;
  var header = '<HTML><TITLE>Category</TITLE><BODY BGCOLOR=FFFFFF>';
  var intro = '<H2>Shopping Bag Product Categories</H2><B>';
  var footer = '</DL></BLOCKQUOTE></BODY></HTML>';
  var storeStr = '<BLOCKQUOTE><DL>';
  for (var i = 0; i < categorySet.length; i++) {
    storeStr += '<DT><A HREF="javascript: parent.frames[1].reCall(' + i +
       ', 0);">' + categorySet[i].name + '</A><DD>' +
       categorySet[i].description + '<BR><BR>';
    }
  infoStr = header + intro + storeStr + footer;
  parent.frames[0].location.replace('javascript:
     parent.frames[1].infoStr');
  }

Displaying the First Product

Of course, Rule 1 imposes that the first (and only first) time the user displays a product must come from either “Show All Categories” or “Product Search.” The “Product Search” feature is discussed shortly. Let’s look at “Show All Categories” now. Showing all categories is fairly easy. showStore() simply iterates through all the elements in categorySet, generating a linked list with the name and description of each. After the last category, this linked list string (a.k.a., infoStr) is set as the href property of the top frame. Notice the code provided in each HREF tag is equal to:

javascript: parent.frames[1].reCall(' + i + ', 0)

Clicking any of the category ...

Get JavaScript Application Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.