If you have any question left, please drop a note with the discussion link of this page.

JavaScript Contextual Product Search

From Wiki.zanox.com

Jump to: navigation, search

This is a simple example to show how to access the zanox Product Search Web Service with JavaScript. See Demo.

Screenshot

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>
  <h1>zanox Web Services - Contextual Product Search</h1>
  <div id="zxAdList"></div> <!-- // DIV HTML element to be filled with product information -->
  <script type="text/javascript">
// function to add scripts to html header 
   function addScript(url) { 
    var script = document.createElement('script');
// preventing caching of the Web Service call by adding timestamp
    script.src = url + '&t=' + new Date().getMinutes(); 
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script);
   }
 
// function for zanox product search  
// for detailed parameter description see 
// http://wiki.zanox.com/en/Products_Resource#GET:_Contextual_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 of the search result 
   function handler(data) {
    if (data.productsResult) {
     var productItems = data.productsResult.productItem;
// accessing the existing div element with the ID "zxAdList" 
     var theList = document.getElementById('theList');
// 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 a list item <li><a href="PRODUCT LINK">PRODUCT NAME at ADVERTISER only PRODUCT PRICE</a></li>
      var item = document.createElement("li");
      item.innerHTML = "<a href='" + link + "'>" + productItem.name + " at " + productItem.program.$ + " only " + productItem.price.toFixed(2) + "&nbsp;" + productItem.currency + "</a>";
// appending item to theList
      theList.appendChild(item);
     }
    }
   }
 
// creating an unordered list <ul id="theList"></ul> 
   var theList = document.createElement("ul");
   theList.setAttribute("id","theList");
// accessing the existing div element with the ID "zxAdList" 
   var zxAdList = document.getElementById('zxAdList');
// adding theList to zxAdList
   zxAdList.appendChild(theList);
 
// performing the zanox search 
   productSearch('2009-02-01', 'BE94C4947839E8AB4D67', null, null, '660', 0, 1000, null, 0, 5, 'red towel', 'handler');
</script>
 </body>
</html>
 
Personal tools