JavaScript Contextual Product Search with styles

From Wiki.zanox.com

Revision as of 10:17, 23 April 2009 by Sebastian Wallroth (Talk | contribs)

(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)

This is an example to show how to access the zanox Product Search Web Service with JavaScript and how to use styles. View demo.

Screenshot

Code

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>zanox Web Services - Contextual Product Search</title>
 </head>
 <body>
  <div id="zxAdList"></div> <!-- // DIV HTML element to be filled with product information -->
  <script type="text/javascript" language="javascript" charset="utf-8">

 
// function to add scripts to html header
   function addScript(url) {
    var script = document.createElement('script');
// preventing caching of the Web Service call
    script.src = url + '&t=' + new Date().getMinutes();
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script);
   }
 
// function to add styles to html header
   function addCSSRule (selectorText, declarations) {
    var styleSheet;
    if (document.styleSheets) {
     if (document.styleSheets.length === 0) {
      var styleElement;
      if (document.createElement && (styleElement = document.createElement('style'))) {
       styleElement.type = "text/css";
       document.getElementsByTagName('head')[0].appendChild(styleElement);
       styleSheet = styleElement.sheet;
      }
     }
     if (document.styleSheets.length > 0) {
      styleSheet = document.styleSheets[document.styleSheets.length - 1];
      if (styleSheet.insertRule) {
       styleSheet.insertRule( selectorText + ' { ' + declarations + ' }', styleSheet.cssRules.length );
      }
      else if (styleSheet.addRule) {
       styleSheet.addRule(selectorText, declarations);
      }
     }
    }
   }
 
// function for zanox product search
   function productSearch(version, applicationid, adspace, region, programs, minPrice, maxPrice, category, page, items, q, callback) {
    var url = 'http://api.zanox.com/json/' + version + '/products?applicationid=' + applicationid;
// adspace=null returns tracking links for all adspaces
    if (adspace) url += '&adspace=' + adspace;
// sales region; e.g. de, fr, it; null means "all countries"
    if (region) url += '&region=' + region;
// program ID
    if (programs) url += '&programs=' + programs;
// zanox product category ID; null means "all categories"
    if (category) url += '&category=' + category;
// search result is paged
    if (page) url += '&page=' + page;
// number of products per page
    if (items) url += '&items=' + items;
// minimum price
    if (minPrice) url += '&minPrice=' + minPrice;
// maximum price
    if (maxPrice) url += '&maxPrice=' + maxPrice;
// handler for the search result
    if (callback) url += '&callback=' + callback;
// search term
    if (q) url += '&q=' + q;
// adding script to html header
    addScript(url);
   }
 
// function for computing the search result
   function handler(data) {
    if (data.productsResult) {
     var productItems = data.productsResult.productItem;
// accessing the existing div element with the ID "zxAdList"
     var zxAdList = document.getElementById('zxAdList');
// looping through the product results
     for (var i = 0; i < productItems.length; i++) {
      var productItem = productItems[i];
      var link = '';
      if (productItem.url.adspace instanceof Array) {
// selecting tracking link related to the first adspace
      link = productItem.url.adspace[0].$;
      }
      else {
       link = productItem.url.adspace.$;
      }
// creating <div class="item"></div>
      var item = document.createElement("div");
      item.setAttribute("class","item");
      item.className = "item";
// creating <a href="product url" class="itemLink"></a>
      var itemLink = document.createElement("a");
      itemLink.setAttribute("href",link);
      itemLink.setAttribute("class","itemLink");
      itemLink.className = "itemLink";
// creating <div class="itemBox"></div>
      var itemBox = document.createElement("div");
      itemBox.setAttribute("class","itemBox");
      itemBox.className = "itemBox";
// creating <div class="itemImageBox">Image loading ...</div>
      var itemImageBox = document.createElement("div");
      itemImageBox.setAttribute("class","itemImageBox");
      itemImageBox.className = "itemImageBox";
// creating <img src="product image url" class="itemImage" alt="product name"/> 
      var itemImage = document.createElement("img");
// "No Image" image source
      var noImageSrc = "http://zac.zanox.com/images/no_image_carrousel.gif";
// testing if images source exists and is not empty
      try { 
       if (productItem.image.small && productItem.image.small != "undefined") {
        itemImage.setAttribute("src",productItem.image.small);
       } else {
        itemImage.setAttribute("src",noImageSrc);
       }
      } catch(e) { 
       itemImage.setAttribute("src",noImageSrc); 
      }
      itemImage.setAttribute("alt",productItem.name + " " + productItem.price.toFixed(2) + " " + productItem.currency);
      itemImage.setAttribute("title",productItem.name + " " + productItem.price.toFixed(2) + " " + productItem.currency);
      itemImage.setAttribute("id","itemImage"+i);
      itemImage.setAttribute("class","itemImage");
      itemImage.className = "itemImage";
// creating <span class="itemText"></span>
      var itemText = document.createElement("span");
      itemText.setAttribute("class","itemText");
      itemText.className = "itemText";
// creating <div class="itemName">product name</div>
      var itemName = document.createElement("div");
      itemName.innerHTML = productItem.name;
      itemName.setAttribute("class","itemName");
      itemName.className = "itemName";
// creating <div class="itemProgram">merchant name</div>
      var itemProgram = document.createElement("div");
      itemProgram.innerHTML = productItem.program.$;
      itemProgram.setAttribute("class","itemProgram");
      itemProgram.className = "itemProgram";
// creating <div class="itemPrice">amount currency</div>
      var itemPrice = document.createElement("div");
      itemPrice.innerHTML = productItem.price.toFixed(2) + "&nbsp;" + productItem.currency;
      itemPrice.setAttribute("class","itemPrice");
      itemPrice.className = "itemPrice";
// putting product information into container
      itemLink.appendChild(itemName);
      itemText.appendChild(itemLink);
      itemText.appendChild(itemProgram);
      itemText.appendChild(itemPrice);
      itemImageBox.appendChild(itemImage);
      itemBox.appendChild(itemImageBox);
      itemBox.appendChild(itemText);
      item.appendChild(itemBox);
      zxAdList.appendChild(item);
     }
    }
   }
 
// function to resize product images
   function imageResizeAfterLoading(n) {
    var itemImageID = "itemImage"+n;
// creating an image object to access dimensions
    thisItemImage = new Image();
// checking wether image is loaded or not
    if (document.getElementById(itemImageID) && document.getElementById(itemImageID).src) {
// transfering image source to our image object
     thisItemImage.src = document.getElementById(itemImageID).src;
// getting width and height
     var thisHeight = thisItemImage.height;
     var thisWidth = thisItemImage.width;
// checking wether image loading is finished or not
     if (thisHeight == 0 || thisWidth == 0) {
// recalling image resize function if image is not loaded yet
      window.setTimeout(function() { imageResizeAfterLoading(n); }, 10); 
     }
     var wmax = 57; // max width of image
     var hmax = 80; // max height of image
// computing ratio between real image size and maximum values
     var wrel = thisWidth / wmax;
     var hrel = thisHeight / hmax;
     if(thisItemImage.width > wmax || thisItemImage.height > wmax) {
      if(wrel > hrel) {
       thisrel = wrel;
      } else {
       thisrel = hrel;
      }
// resizing image
      document.getElementById(itemImageID).width = thisItemImage.width / thisrel;
      document.getElementById(itemImageID).height = thisItemImage.height / thisrel;
     }
    } else { 
    window.setTimeout(function() { imageResizeAfterLoading(n); }, 10);
    }
   }
 
// creating styles
  var zxAdList="";
  zxAdList +="margin:0 !important;";
  zxAdList +="padding:0px !important;";
  zxAdList +="border:0 !important;";
  zxAdList +="outline:0 !important;";
  zxAdList +="font-weight:inherit !important;";
  zxAdList +="font-style:inherit !important;";
  zxAdList +="vertical-align:baseline !important;";
  zxAdList +="text-decoration:none !important;";
  zxAdList +="color:#000000 !important;";
  zxAdList +="font-family:sans-serif !important;";
  zxAdList +="font-size:normal !important;";
  zxAdList +="width:220px !important;";
  zxAdList +="background-color:#dee4e8 !important;";
  zxAdList +="border:1px solid #999 !important;";
  zxAdList +="list-style:none !important;";
  addCSSRule(".zxAdList", zxAdList);
 
  var zxHeadline="";
  zxHeadline+="margin:0 !important;";
  zxHeadline+="padding:5px 5px 5px 5px !important;";
  zxHeadline+="border:0 !important;";
  zxHeadline+="outline:0 !important;";
  zxHeadline+="font-weight:inherit !important;";
  zxHeadline+="font-style:inherit !important;";
  zxHeadline+="vertical-align:baseline !important;";
  zxHeadline+="text-decoration:none;"
  zxHeadline+="color:#666;"
  zxHeadline+="font-family:Verdana !important;";
  zxHeadline+="font-size:middle !important;";
  zxHeadline+="font-weight:bold !important;";
  zxHeadline+="background:url(http://zac.zanox.com/images/contextsearch_bg.gif) !important;";
  zxHeadline+="background-repeat: no-repeat !important;";
  zxHeadline+="height:40px !important;";
  zxHeadline+="position:relative !important;";
  addCSSRule(".zxHeadline", zxHeadline)
 
  var itemLink="";
  itemLink+="margin:0 !important;";
  itemLink+="padding:0 !important;";
  itemLink+="border:0 !important;";
  itemLink+="outline:0 !important;";
  itemLink+="font-weight:inherit !important;";
  itemLink+="font-style:inherit !important;";
  itemLink+="vertical-align:baseline !important;";
  itemLink+="text-decoration:none !important;";
  itemLink+="color:#000000 !important;";
  itemLink+="font-family:sans-serif !important;";
  itemLink+="font-size:small !important;";
  itemLink+="position:relative !important;";
  addCSSRule(".itemLink", itemLink);
 
  var itemImageBox="";
  itemImageBox+="margin:5px !important;";
  itemImageBox+="padding:0 !important;";
  itemImageBox+="border:0 !important;";
  itemImageBox+="outline:0 !important;";
  itemImageBox+="font-weight:inherit !important;";
  itemImageBox+="font-style:inherit !important;";
  itemImageBox+="vertical-align:baseline !important;";
  itemImageBox+="text-decoration:none !important;";
  itemImageBox+="color:#000000 !important;";
  itemImageBox+="font-family:sans-serif !important;";
  itemImageBox+="font-size:small !important;";
  itemImageBox+="overflow:hidden !important;";
  itemImageBox+="width:57px !important;";
  itemImageBox+="height:80px !important;";
  itemImageBox+="position:relative !important;";
  addCSSRule(".itemImageBox", itemImageBox);
 
  var itemImage="";
  itemImage+="margin:0 !important;";
  itemImage+="padding:0 !important;";
  itemImage+="border:0 !important;";
  itemImage+="outline:0 !important;";
  itemImage+="overflow:hidden !important;";
  itemImage+="clip:rect(auto 57px 80px auto) !important;";
  itemImage+="position:absolute !important;";
  addCSSRule(".itemImage", itemImage);
 
  var itemText="";
  itemText+="margin:5px !important;";
  itemText+="padding:0 !important;";
  itemText+="border:0 !important;";
  itemText+="outline:0 !important;";
  itemText+="font-weight:inherit !important;";
  itemText+="font-style:inherit !important;";
  itemText+="vertical-align:baseline !important;";
  itemText+="text-decoration:none !important;";
  itemText+="color:#000000 !important;";
  itemText+="font-family:sans-serif !important;";
  itemText+="font-size:small !important;";
  itemText+="position:absolute !important;";
  itemText+="top:0px !important;";
  itemText+="left:62px !important;";
  itemText+="width:135px !important;";
  itemText+="background-color:#FFFFFF !important;";
  addCSSRule(".itemText", itemText);
 
  var itemName="";
  itemName+="margin:0 !important;";
  itemName+="padding:0 !important;";
  itemName+="border:0 !important;";
  itemName+="outline:0 !important;";
  itemName+="font-weight:inherit !important;";
  itemName+="font-style:inherit !important;";
  itemName+="vertical-align:baseline !important;";
  itemName+="text-decoration:underline !important;";
  itemName+="color:#ff9900 !important;";
  itemName+="font-family:sans-serif !important;";
  itemName+="font-size:small !important;";
  itemName+="position:relative !important;";
  addCSSRule(".itemName", itemName);
 
  var itemProgram="";
  itemProgram+="margin:0 !important;";
  itemProgram+="padding:5px 5px 5px 0px !important;";
  itemProgram+="border:0 !important;";
  itemProgram+="outline:0 !important;";
  itemProgram+="font-weight:inherit !important;";
  itemProgram+="font-style:inherit !important;";
  itemProgram+="vertical-align:baseline !important;";
  itemProgram+="text-decoration:none !important;";
  itemProgram+="color:#666 !important;";
  itemProgram+="font-family:sans-serif !important;";
  itemProgram+="font-size:smaller !important;";
  itemProgram+="position:relative !important;";
  addCSSRule(".itemProgram", itemProgram);
 
  var itemPrice="";
  itemPrice+="margin:0 !important;";
  itemPrice+="padding:0 !important;";
  itemPrice+="border:0 !important;";
  itemPrice+="outline:0 !important;";
  itemPrice+="font-weight:bold !important;";
  itemPrice+="font-style:inherit !important;";
  itemPrice+="vertical-align:baseline !important;";
  itemPrice+="text-decoration:none !important;";
  itemPrice+="color:#000000 !important;";
  itemPrice+="font-family:sans-serif !important;";
  itemPrice+="font-size:small !important;";
  itemPrice+="position:relative !important;";
  addCSSRule(".itemPrice", itemPrice);
 
  var item="";
  item+="margin:0px 5px 5px 5px !important;";
  item+="padding:0 !important;";
  item+="border:1px solid #999 !important;";
  item+="outline:0 !important;";
  item+="font-weight:inherit !important;";
  item+="font-style:inherit !important;";
  item+="vertical-align:baseline !important;";
  item+="text-decoration:none !important;";
  item+="color:#000000 !important;";
  item+="font-family:sans-serif !important;";
  item+="font-size:small !important;";
  item+="background-color:#FFFFFF !important;";
  item+="overflow:hidden !important;";
  item+="list-style: none !important;";
  item+="position:relative !important;";
  addCSSRule(".item", item);
 
  var itemBox="";
  itemBox+="margin:0 !important;";
  itemBox+="padding:0 !important;";
  itemBox+="border:0 !important;";
  itemBox+="outline:0 !important;";
  itemBox+="font-weight:inherit !important;";
  itemBox+="font-style:inherit !important;";
  itemBox+="vertical-align:baseline !important;";
  itemBox+="text-decoration:none !important;";
  itemBox+="color:#000000 !important;";
  itemBox+="font-family:sans-serif !important;";
  itemBox+="font-size:small !important;";
  itemBox+="background-color:#FFFFFF !important;";
  itemBox+="border-style:none !important;";
  itemBox+="overflow:hidden !important;";
  itemBox+="width:208px !important;";
  itemBox+="height:90px !important;";
  addCSSRule(".itemBox", itemBox);
 
  var ie7Fix="";
  ie7Fix+="margin:0 0 5px -6px;"
  addCSSRule("*+html .item", ie7Fix);
 
// accessing the existing div element with the ID "zxAdList"
  var zxAdList = document.getElementById('zxAdList');
// giving zxAdList a class for styling access
  zxAdList.setAttribute("class","zxAdList");
// IE Fix
  zxAdList.className = "zxAdList";
// creating <div class="zxHeadline">Headline</div>
  var zxHeadline = document.createElement("div");
  zxHeadline.setAttribute("class","zxHeadline");
  zxHeadline.className = "zxHeadline";
  zxHeadline.innerHTML = "zanox Web Services - Product Search";
  zxAdList.appendChild(zxHeadline);
 
// setting the search parameters
  myVersion=        '2009-02-01';
  myApplicationID=  'BE94C4947839E8AB4D67';
  myAdspace=        null;
  myRegion=         null;
  myPrograms=       null;
  myMinPrice=       null;
  myMaxPrice=       null;
  myCategory=       null;
  myPage=           0;
  myItems=          5;
  myQuery=          'wrangler';
  myCallback=       'handler';
 
// performing the zanox search
  productSearch(myVersion, myApplicationID, myAdspace, myRegion, myPrograms, myMinPrice, myMaxPrice, myCategory, myPage, myItems, myQuery, myCallback);
 
// resizing images of necessary
  for (var i=0;i<myItems;i++) {
   imageResizeAfterLoading(i);
  }

 </script>
</body>
</html>

JavaScript Contextual Product Search with styles

From Wiki.zanox.com

Screenshot

Code

Views

Personal tools

Navigation

Search

Toolbox