📄 product_catalog.htm

📁 Windows Web脚本开发指南/(美) Dan Heflin, Todd Ney著的源码
💻 HTM
字号:
<html>
<STYLE>
  .nav {cursor:hand }
  .persist {behavior:url(#default#userdata);}
</STYLE>
<script language="JavaScript">
var submittedToServer = false; //flag of whether the cart was sent to the server

function buildInitialMenu(){
  // Does the setup for the first page of getting the cart then builds the first page

  var transNode = catalogMenu.selectSingleNode("//category[@catID='ROOT']");

  buildNavPage(transNode);
  cart.async = false;

  persistSupplier.load("xmlStoreCart");
  persistSupplier.value= persistSupplier.getAttribute("currentCart");
 
  if (persistSupplier.value != "")
    cart.loadXML(persistSupplier.value);
  else
    cart.loadXML("<cart></cart>");

  setCartStatus('ROOT');
}
function persistData(){
  // Persists the data to the client using the userData behavior in IE

  if (submittedToServer == true)
    persistSupplier.setAttribute("currentCart", "");
  else
    persistSupplier.setAttribute("currentCart", cart.xml);
  persistSupplier.save("xmlStoreCart");
}

function buildNextPage(id){
  //Called from the click of a cateogry. Checks to see if a nav page or a catalog should be
  //displayed. Displays the navigational area
  
  var menuItem = catalogMenu.selectSingleNode("//category[@catID='" + id + "']");
  var subElement = menuItem.selectSingleNode("categories");
  var parentElement ;
  var navigatePath = "";
  var seperator="";

  if (subElement != null)
    buildNavPage(menuItem);
  else
    buildListPage(menuItem, id);    
    
  parentElement = menuItem.selectSingleNode("ancestor(category)");
  while (parentElement != null){
    navigatePath = "<td class='nav' onClick=buildNextPage('" + parentElement.getAttribute("catID") + "')><u>" + parentElement.getAttribute("products") + "</u>" + seperator + "</td>" + navigatePath;
    parentElement = parentElement.selectSingleNode("ancestor(category)");
    seperator=" :";
  }
  if (navigatePath != "")
    navigatePath = "<table><tr><td>Navigate To:</td>" + navigatePath + "<td> : " + menuItem.getAttribute("products") + "</td></tr><tr><td>&nbsp;</td></tr></table>";
  
  navArea.innerHTML = navigatePath;  
}

function buildSingle(id, catID){
  // Used to build the detail ordering section of a feature item

  var featureItem = catalogMenu.nodeFromID(id);
  var xslNode = menuTransform.selectSingleNode("//xsl:template[@match='target:item']"); 
  var result = featureItem.transformNode(xslNode);
  result += "<BR><input type='button' value='Return' onClick=buildNextPage('" + catID + "')>";
  result += "<input type='button' value='Add To Cart' onClick=addToCartSingle('" + catID + "')>";
  workArea.innerHTML = result;
}

function buildNavPage(transformStart){
  // Builds the navigation page with the categories on the left side of the page and
  // the feature items on the right

  var xslNode = menuTransform.selectSingleNode("//xsl:template[@match='categories']");
  var result = "<table><tr><td width='40%' valign='top'>";
  var transformCategories;
  var transformFeature;

  transformCategories = transformStart.selectSingleNode("categories");
  result += transformCategories.transformNode(xslNode);
  result += "</td><td width='60%'>"

  xslNode = menuTransform.selectSingleNode("//xsl:template[@match='featureItems']");
  transformFeature = transformStart.selectSingleNode("featureItems");
  result += transformFeature.transformNode(xslNode);
  result += "</td></tr></table>";
  workArea.innerHTML = result;
}
function buildListPage(transformStart, catID){
  // Used to display a subcatalog section

  var xslNode = menuTransform.selectSingleNode("//xsl:template[@match='itemList']");
  var listLocation = transformStart.getAttribute("source");
  var result;
  var transformList;

  subCatalogList.async = false;
  subCatalogList.load(listLocation);
  transformList = subCatalogList.selectSingleNode("//itemList");
  result = transformList.transformNode(xslNode);
  result += "<input type='button' value='Add To Cart' onClick=addToCartList('" + catID + "')>";
  workArea.innerHTML = result;
}

function addToCartSingle(catID){
  addToCart(catalogMenu, catID);
}
function addToCartList(catID){
  addToCart(subCatalogList, catID);
}

function addToCart(list, catID){
  //Loops throught the text elements and adds the items to the cart that have a value then 
  //calls to display the cart.

  var textElements = workArea.getElementsByTagName("input");
  var itemID;
  var newItemElement;
  var itemElement;
  var quantityElement;
  var temp;
  var controlValue;
  
  for (var count=0; count<textElements.length; count++){
     if (textElements[count].type == "text"){
       controlValue = new Number(textElements[count].value);
       if (!(isNaN(controlValue)) &&  controlValue != ""){
         itemID = textElements[count].itemID;
         itemElement = list.nodeFromID(itemID);
         quantityElement = cart.selectSingleNode("//item[@id='" + itemID + "']/quantity");
         if (quantityElement != null){
           temp = new Number(quantityElement.text);
           quantityElement.text = controlValue + temp;
         }
         else{
           newItemElement = cart.createElement("item");
           newItemElement.setAttribute("id", itemID);
           cart.documentElement.appendChild(newItemElement);
           buildXMLElement(itemElement, "shortDesc", newItemElement);
           buildXMLElement(itemElement, "price", newItemElement);
           buildXMLElement(itemElement, "longDesc", newItemElement);
           buildXMLElement(itemElement, "imagePath", newItemElement);
           newElement = cart.createElement("quantity");
           newElement.text = controlValue;
           newItemElement.appendChild(newElement);
         }
       }   
       else {
         if (isNaN(controlValue)){
           alert("Cannot add items to cart. The quantity must be numeric.");
           return;
         }
       }
     }
  }
  displayCart(catID);
  setCartStatus(catID);
}

function buildXMLElement(from, name, to){
  // Helper function to build an XML element

  var newElement = cart.createElement(name);
  newElement.text = from.selectSingleNode(name).text;
  to.appendChild(newElement);
}

function displayCart(catID){
  //Transforms the cart and displays the results in the working area

  var xslNode = menuTransform.selectSingleNode("//xsl:template[@match='cart']");
  var result = cart.documentElement.transformNode(xslNode);
  result += "<input type='button' value='Update Cart' onClick=updateCart('" + catID + "')>";  
  result += "<input type='button' value='Return' onClick=buildNextPage('" + catID + "')>";  
  result += "<input type='button' value='Checkout' onClick=goToCheckOut()>";  
  workArea.innerHTML = result;
}

function goToCheckOut(){
  // Moves the data to the hidden text field and submits the XML document to the server.
  // Also sets the flag to tell the page to clear out the persisted client side cart

  submittedToServer = true;
  document.all.sendXMLCart.value = cart.xml;
  sendCart.submit();      
}

function updateCart(catID){
  // Called by the click of the update cart button in the cart page. Loops through the text
  // elements and updates the quantity based on the new value. If there isn't a value or
  // the quantity is 0  the item is removed from the cart

  var textElements = workArea.getElementsByTagName("input");
  var itemID;
  var quantityElement;
  var item;
  var controlValue;
  
  for (var count=0; count<textElements.length; count++){
     if (textElements[count].type == "text"){
       itemID = textElements[count].itemID;
       controlValue = new Number(textElements[count].value);
       if (controlValue == "" || controlValue == 0 ){
         item = cart.selectSingleNode("//item[@id='" + itemID + "']");
         cart.documentElement.removeChild(item);
       }
       else{
         if (isNaN(controlValue)){
           alert("Cannot update items in the cart. The quantity must be numeric.");
           return;
         }
         else { 
           quantityElement = cart.selectSingleNode("//item[@id='" + itemID + "']/quantity");
           quantityElement.text = textElements[count].value;
         }
       }   
     }
  }
  displayCart(catID);
  setCartStatus(catID);
}

function setCartStatus(catID){
  // Used to display the status for the cart in the upper right hand corner of the page

  var result;
  var items = cart.selectNodes("//item");
  var item = items.nextNode();
  var total = 0;

  while (item != null){ 
      price = item.selectSingleNode("price").text;
      quantity = item.selectSingleNode("quantity").text;
      total += price * quantity; 
      item = items.nextNode();
  }
  result = "<table width='100%'><tr><td rowspan='3' align='center'><font size='5'><B>The On-Line Superstore</B></font></td>";
  result += "<td align='right'>Current Items:" + items.length + "</td></tr><tr><td align='right'>Current Total: $" + total; 
  result += "</td></tr><tr><td align='right'><input type='button' value='Go To Cart' onClick=displayCart('"; 
  result += catID + "')></td></tr></table>";
  cartStatus.innerHTML = result
}
</script>
<head>
<title>Product Catalog</title>
<base target="_self">
</head>
<xml ID="catalogMenu" async="false" src="menu.xml"></xml>
<xml ID="menuTransform" async="false" src="menu.xsl"></xml>
<xml ID="subCatalogList"></xml>
<xml ID="cart"></xml>
<body onLoad="buildInitialMenu()" onbeforeunload="persistData(false)">
<div id="cartStatus"></div>
<div id="navArea"></div>
<div id="workArea"></div>
<input type="hidden" CLASS="persist" id="persistSupplier">
<form id="sendCart" method="post" action="getXMLCart.asp">
<input type="hidden" name="sendXMLCart">
</form>
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -