JavaScript Contextual Product Search with styles

From Wiki.zanox.com

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