shop.js

基于Ajax购物车通用核心Javascript代码

/*
  registerState transitions:
    "start": When page is loaded
    "mustSendMail": When instructions and verify password field shown
    "mustVerifySecretNumber": When email sent and user must enter secret 
      number inside email
    "verified": When user is successfully logged in.
*/
var registerState = "start";
var categoryExplores = new Array();
var isFavouriteCategoryAutomated = true;

window.onload = function() {
  ajaxCaller.getXML("categories.phtml", onAllCategoriesResponse);
  ajaxCaller.getXML("cart.phtml", onCartResponse);
  ajaxCaller.postForPlainText
    ("user.phtml", { command: 'initialise' }, onInitialiseResponse);
  $("cartClear").onclick = onCartClearClicked;
  $("cartMail").onclick = onCartMailClicked;
  onRegistrationStateChanged("start");
  $("login").onclick = onLoginClicked;
  $("register").onclick = onRegisterClicked;
  $("cancel").onclick = onCancelClicked;
  $("favouriteCategory").onclick = function() {
    isFavouriteCategoryAutomated = false;
  }
}

function onInitialiseResponse(userIdText, ignored, ignored) {
  $("userId").innerHTML = userIdText;
}

function onAllCategoriesResponse(xml, ignoredHeaders, ignoredContext) {
  var categories = xml.getElementsByTagName("category");
  var categoriesHTML = "";
  for (i=0; i<categories.length; i++) {
    var category = categories[i].firstChild.nodeValue;

    categoryExplores[category] = 0;
    favouriteCategoryOption = document.createElement("option");
    favouriteCategoryOption.text = favouriteCategoryOption.value = category;
    try {
      $("favouriteCategory").add(favouriteCategoryOption, null); // FF
    } catch(ex) {
      $("favouriteCategory").add(category); // IE
    }

    categoriesHTML +=
        "<div class='category' id='" + category + "'>"
      + "<span class='categoryName'>" + category + "</span> "
      + "<span class='explore' "
      +       "onclick=\"onExploreClicked('"+category+"')\">Explore</span>"
      + "<div class='items'></div>"
      + "</div>"
      ;
  }
  $("categoriesDiv").innerHTML = categoriesHTML;
}

function onExploreClicked(category) {

  ajaxCaller.getXML("category.phtml?name=" + category, onCategoryResponse);

  if (isFavouriteCategoryAutomated) {
    categoryExplores[category]++;
    favouriteCategory = $("favouriteCategory").value;
    favouriteCategoryExplores = categoryExplores[favouriteCategory];
    if (categoryExplores[category] > favouriteCategoryExplores) {
      $("favouriteCategory").value = category;
    }
  }

}

function onCategoryResponse(categoryXML, ignoredHeaders, ignoredContext) {
  hideAnyOpenItemsDivs();
  openItemsForCategory(categoryXML);
}


function hideAnyOpenItemsDivs() {
  var allItemsDivs = getElementsByClassName("categoryItems");
  for (i=0; i<allItemsDivs.length; i++) {
    allItemsDivs[i].style.display = "none";
  }
}

function openItemsForCategory(categoryXML) {

  var categoryName =
      categoryXML.getElementsByTagName("name")[0].firstChild.nodeValue;;
  var items = categoryXML.getElementsByTagName("item");
  var itemsHTML = "<div class='categoryItems'>";
  for (i=0; i<items.length; i++) {
    var item = items[i].firstChild.nodeValue;
    itemsHTML +=
                "<div class='item' id='" + item + "'>"
              + "<span class='add' "
              +  "onclick=\"onAddItemClicked('"+item+"')\">Add To Cart</span> "
              + "<span class='itemName'>" + item + "</span> "
              + "</div>"
  }
  itemsHTML+="</div>";

  var categoryDiv = $(categoryName);
  var categoryItems = categoryDiv.childNodes[3];
  categoryItems.innerHTML = itemsHTML;

}

function onAddItemClicked(item) {
  var vars = {
    command: 'add',
    item: item
  }
  ajaxCaller.postForXML("cart.phtml", vars, onCartResponse);
}

function onCartClearClicked() {
  var vars = {
    command: 'clear'
  }
  ajaxCaller.postForXML("cart.phtml", vars, onCartResponse);
}

function onCartMailClicked() {
  email = $("email").value;
  if (email=="") {
    alert("This demo really *will* mail all items in your cart\n"
       +  "to your email address, so please fill in the address\n"
       +  "in the profile area first.");
  } else {
    ok = confirm("This demo really *will* mail all items in your cart\n"
              +  "to " + email + ".\n"
              + "Proceed?");
    if (ok) {
      // ajaxCaller.postForXML("cart.phtml", {command: email}, function() {});
      vars = {
        command: "mailCart",
        email: email
      }
      ajaxCaller.postForPlainText("cart.phtml", vars, function() {});
    }
  }
}

function onCartResponse(cartXML, ignoredHeaders, ignoredContext) {
  // Redraw it
  var cartHTML = "";
  var itemNames = cartXML.getElementsByTagName("name");
  var itemAmounts = cartXML.getElementsByTagName("amount");
  for (i=0; i<itemNames.length; i++) {
    var name = itemNames[i].firstChild.nodeValue;
    var amount = itemAmounts[i].firstChild.nodeValue;
    cartHTML += "<div class='cartItem'>"
              + "<div class='spacer'>&nbsp;</div>"
              + "<div class='cartItemName'>"+name+"</div>"
              + "<div class='cartItemAmount'>"+amount+"</div>"
              + "<div class='spacer'>&nbsp;</div>"
              + "</div>";
  }
  $("cartContent").innerHTML = cartHTML;
}

function onCancelClicked() {
  registerState = "start";
  onRegistrationStateChanged();
}

function onRegisterClicked() {
  if (registerState=="start") {
    registerState = "mustSendMail";
  } else if (registerState=="mustSendMail") {
    var submissionOK = sendMail();
    if (submissionOK) {
      registerState = "mustVerifySecretNumber";
    } else {
      return;
    }
  } else if (registerState=="mustVerifySecretNumber") {
    verifySecretNumber();
  } 
  onRegistrationStateChanged();
}

function onRegistrationStateChanged() {
  if (registerState=="start") {
    $("userForm").reset();
    $("login").style.display = "inline";
    $("verifyPasswordInfo").style.display = "none";
    $("secretNumberInfo").style.display = "none";
    $("verifiedInfo").style.display="none";
    $("cancel").style.display = "none";
    $("register").value="Register";
  } else if (registerState=="mustSendMail") {
    $("login").style.display = "none";
    $("cancel").style.display = "inline";
    $("verifyPasswordInfo").style.display = "block";
    $("register").value="Send Email";
  } else if (registerState=="mustVerifySecretNumber") {
    $("secretNumberInfo").style.display = "block";
    $("register").value="Verify";
  } else if (registerState=="verified") {
    alert("verified email");
    $("verifiedInfo").style.display="block";
    $("passwordInfo").style.display="none";
    $("verifyPasswordInfo").style.display="none";
    $("secretNumberInfo").style.display="none";
    $("email").style.borderStyle="none";
    $("email").style.fontWeight="bold";
    $("password").style.display="none";
    $("register").style.display="none";
    $("cancel").style.display="none";
  }
}

function sendMail() {
  if (($("password").value!=$("verifyPassword").value)
      || $("password").length == 0) {
    $("password").className="errorField";
    $("verifyPassword").className="errorField";
    return false;
  } else {
    $("password").className="validField";
    $("verifyPassword").className="validField";
  }
  vars = {
    email: $("email").value,
    password: $("password").value,
    command: 'sendMail'
  }
  ajaxCaller.postForPlainText('user.phtml', vars, function() {});
  return true;
}

function verifySecretNumber() {
  vars = {
    command: 'verifySecretNumber',
    secretNumber: $("secretNumber").value
  }
  ajaxCaller.postForPlainText("user.phtml", vars, onSecretNumberVerified);
}

function onSecretNumberVerified(result, ignored, ignored) {
  if (result=="ok") {
    registerState = "verified";
    onRegistrationStateChanged();
  } else {
    alert( "Secret number was incorrect. \n"
         + "Try again or 'Cancel' to start registration again. \n"
         + "Note: Although this is just a demo, it does send a real email "
         + " to the address specified. The secret number is in there.");
  }
}

function onLoginClicked() {
}