JavaScript widget showing one product per page

From Wiki.zanox.com

Revision as of 12:11, 7 April 2009 by Sebastian Wallroth (Talk | contribs)

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

This is a more complex example showing how to access the zanox Product Search Web Service in JavaScript and how to display the results using CSS. See the Live example in our blog.

Screenshot

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>zanox Web Services - JavaScript widget showing one product per page</title>
<script type="text/javascript">

 var zxContainer    = document.getElementById('zxContainer');
 var applicationid  = 'BE94C4947839E8AB4D67';
 var apversion   = '2009-02-01';
 var adspace     = null;
 var region   = null;
 var programs    = '660';
 var category    = null;
 var page     = '0';
 var items    = '4';
 var minPrice    = '10';
 var maxPrice    = '100000';
 var searchString   = 'buzz';
 var NamLen   = '18';
 var DesLen   = '80';
 var pagesize    = '1';
 var maxpages    = 40;
 var wdgName     = 'zanox Web Services Product Search';
 var wdgTable;
 var wdgTbody;
 var xmlhttp;
 var productItems;
 function search_input_keydown(e){
   if (null == e)
  e = window.event ;
   if (e.keyCode == 13)  {
  searching();
   }
 }
 function searching(){
   searchString = document.getElementById('search_input').value;
   var zxAdList = document.getElementById('zxAdList');
   y=document.getElementById('Widget1');
   zxAdList.removeChild(y);
   zxContextMatch(apversion, 
    applicationid,  
    adspace,  
    region,  
    programs,  
    category,  
    minPrice,  
    maxPrice,  
    page,  
    items,  
    searchString,  
    'productSearchResponseHandler');
 }
 function addScript(url) {
  var script = document.createElement("script");
  script.src = url + '&t=' + new Date().getMinutes();
  script.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(script);
 }
 function zxContextMatch(apversion, 
  applicationid,  
  adspace,  
  region,  
  programs,  
  category,  
  minPrice,  
  maxPrice,  
  page,  
  items,  
  q,  
  callback) {
  var url = 'http://api.zanox.com/json/' + apversion + '/products?applicationid=' + applicationid;
  if (adspace) url += '&adspace=' + adspace;
  if (region) url += '&region=' + region;
  if (programs) url += '&programs=' + programs;
  if (category) url += '&category=' + category;
  if (page) url += '&page=' + page;
  if (items) url += '&items=' + items;
  if (minPrice) url += '&minPrice=' + minPrice;
  if (maxPrice) url += '&maxPrice=' + maxPrice;
  if (callback) url += '&callback=' + callback;
  if (q) url += '&q=' + q;
  addScript(url);
  var zxAdList = document.getElementById('zxAdList');
  wdgTable = document.createElement("table");
  wdgTable.id = 'Widget1';
  if (window.ActiveXObject)
  {// code for IE5, IE6
    wdgTable.style.borderCollapse="collapse";
  }
  zxAdList.appendChild(wdgTable);
  wdgTbody = document.createElement("tbody");
  wdgTbody.id = 'tbd';
  wdgTable.appendChild(wdgTbody);
  var tr1 = document.createElement("tr");
  tr1.id = 'trid2';
  var td1 = document.createElement("td");
  td1.id = 'tdid_s';
  tr1.appendChild(td1);
  var td2 = document.createElement("td");
  td2.id = 'tdid_p1';
  tr1.appendChild(td2);
  td3 = document.createElement("td");
  td3.id = 'tdid_wgdTitle';
  td3.innerHTML = wdgName;
  tr1.appendChild(td3);
  var td4 = document.createElement("td");
  td4.id = 'tdid_p1';
  tr1.appendChild(td4);
  var td5 = document.createElement("td");
  td5.id = 'tdid_s';
  tr1.appendChild(td5);
  wdgTbody.appendChild(tr1);
  var tr2 = document.createElement("tr");
  tr2.id = 'trid4';
  var td21 = document.createElement("td");
  td21.id = 'tdid_s';
  tr2.appendChild(td21);
  var td22 = document.createElement("td");
  td22.id = 'tdid_p1';
  tr2.appendChild(td22);
  td23 = document.createElement("td");
  td23.id = 'tdid_search';
  tdTable = document.createElement("table");
  td23.appendChild(tdTable);
  tdTbody = document.createElement("tbody");
  tdTbody.id = 'tbd1';
  tdTable.appendChild(tdTbody);
  tdtr = document.createElement("tr");
  tdtr.id = 'tdtr_search';
  tdtr_td1 = document.createElement("td");
  tdtr_td1.innerHTML = '<input id = "search_input" autocomplete="off" maxlength=1024 name="search_input" onkeydown = "search_input_keydown(event);" size=42 title="search" value="' + searchString +'">';
  tdtr.appendChild(tdtr_td1);
  tdtr_td2 = document.createElement("td");
  tdtr_td2.innerHTML = '<div class="lbl1" onmousedown="searching();" > &gt;&gt; </div>';
  tdtr.appendChild(tdtr_td2);
  tdtr_td3 = document.createElement("td");
  tdtr_td3.innerHTML = '<div class="lbl2" onmousedown="searching();" >Search </div>';
  tdtr.appendChild(tdtr_td3);
  tdTbody.appendChild(tdtr);
  tr2.appendChild(td23);
  var td24 = document.createElement("td");
  td24.id = 'tdid_p1';
  tr2.appendChild(td24);
  var td25 = document.createElement("td");
  td25.id = 'tdid_s';
  tr2.appendChild(td25);
  wdgTbody.appendChild(tr2);
  var tr3 = document.createElement("tr");
  tr3.id = 'trid3';
    var td31 = document.createElement("td");
    td31.id = 'tdids_line';
    var td32 = document.createElement("td");
    td32.id = 'tdid_p1';
    var td33 = document.createElement("td");
    td33.id = 'tdid_m';
    var td34 = document.createElement("td");
    td34.id = 'tdid_p1';
    var td35 = document.createElement("td");
    td35.id = 'tdids_line';
    tr3.appendChild(td31);
    tr3.appendChild(td32);
    tr3.appendChild(td33);
    tr3.appendChild(td34);
    tr3.appendChild(td35);
  wdgTbody.appendChild(tr3);
 }
 function renderLinkListItem(productItem, 
  container,  
  flag,  
  position) {
  var link = '';
  if (productItem.url.adspace instanceof Array) {
   // select tracking link related to the first Adspace
   link = productItem.url.adspace[0].$;
  }
  else {
   link = productItem.url.adspace.$;
  }
  var imgl
  try{
    imgl = productItem.image.small;
  }catch(er){
  }
  var tr = document.createElement("tr");
  tr.id = 'trid1';
  var td1 = document.createElement("td");
  td1.id = 'tdid_s';
  tr.appendChild(td1);
  var td2 = document.createElement("td");
  td2.id = 'tdid_p';
  tr.appendChild(td2);
  var td3 = document.createElement("td");
  td3.id = 'tdid';
  tr.appendChild(td3);
    var tdTable = document.createElement("table");
    td3.appendChild(tdTable);
    var tdTbody = document.createElement("tbody");
    tdTable.appendChild(tdTbody);
    var tdtr = document.createElement("tr");
    tdtr.id = 'trid11';
    tdTbody.appendChild(tdtr);
    var td4 = document.createElement("td");
    td4.id = 'tdid';
    td4.style.width='180px';
   var tdTable1 = document.createElement("table");
   td4.appendChild(tdTable1);
   var tdTbody1 = document.createElement("tbody");
   tdTable1.appendChild(tdTbody1);
     var tdtr1 = document.createElement("tr");
     tdtr1.id = 'trid11';
     tdTbody1.appendChild(tdtr1);
     var tdtr1_td = document.createElement("td");
     tdtr1_td.id = 'tdid';
     tdtr1_td.style.width='160px';
     tdtr1_td.style.height='160px';
     tdtr1_td.innerHTML = '<img src="' + imgl + '" width="160px" height="160px" />';
     tdtr1.appendChild(tdtr1_td);
     var tdtr2 = document.createElement("tr");
     tdtr2.id = 'trid11';
     tdTbody1.appendChild(tdtr2);
     var tdtr2_td = document.createElement("td");
     tdtr2_td.id = 'tdid_price';
     tdtr2_td.innerHTML = productItem.price;
     if (productItem.currency == 'EUR'){
    tdtr2_td.innerHTML = tdtr2_td.innerHTML + '&euro;';
     }else if (productItem.currency == 'GBP'){
    tdtr2_td.innerHTML = tdtr2_td.innerHTML + '&#8356';
     }else if (productItem.currency == 'USD'){
    tdtr2_td.innerHTML = tdtr2_td.innerHTML + '&#36';
     }else if (productItem.currency == 'JPY'){
    tdtr2_td.innerHTML = tdtr2_td.innerHTML + '&yen';
     }
     else{
    tdtr2_td.innerHTML = tdtr2_td.innerHTML + productItem.currency;
     }
     tdtr2.appendChild(tdtr2_td);
    tdtr.appendChild(td4);
    var td_p1 = document.createElement("td");
    td_p1.id = 'tdid_p2';
    tdtr.appendChild(td_p1);
    var td5 = document.createElement("td");
    td5.id = 'tdid_mm'
   tdTable1 = document.createElement("table");
   td5.appendChild(tdTable1);
   tdTbody1 = document.createElement("tbody");
   tdTable1.appendChild(tdTbody1);
   var tdtr1 = document.createElement("tr");
   tdtr1.id = 'trid11';
   var tdtr1_td1 = document.createElement("td");
   tdtr1_td1.id = 'tdid_name';
   var strName = new String(productItem.name);
   if (strName.length>NamLen){
     tdtr1_td1.innerHTML = '<a href="' + link + '">' + strName.substring(0,NamLen) + '...' + '</a>';
   }else{
     tdtr1_td1.innerHTML = '<a href="' + link + '">' + strName + '</a>';
   }
   tdtr1.appendChild(tdtr1_td1);
   tdTbody1.appendChild(tdtr1);
   var tdtr2 = document.createElement("tr");
   tdtr2.id = 'trid11';
   var tdtr2_td1 = document.createElement("td");
   tdtr2_td1.id = 'tdid_des';
   var strDescription = new String(productItem.description);
   if (strDescription.length>DesLen){
     tdtr2_td1.innerHTML = strDescription.substring(0,DesLen) + '...';
   }else{
     tdtr2_td1.innerHTML = strDescription;
   }
   tdtr2.appendChild(tdtr2_td1);
   tdTbody1.appendChild(tdtr2);
   var tdtr3 = document.createElement("tr");
   tdtr3.id = 'trid11';
   var tdtr3_td1 = document.createElement("td");
   tdtr3_td1.id = 'tdid_prog';
   tdtr3_td1.innerHTML = productItem.program.$ ;
   tdtr3.appendChild(tdtr3_td1);
   tdTbody1.appendChild(tdtr3);
    tdtr.appendChild(td5);
    var td_p2 = document.createElement("td");
    td_p2.id = 'tdid_p2';
    tdtr.appendChild(td_p2);
  var td6 = document.createElement("td");
  td6.id = 'tdid_p';
  tr.appendChild(td6);
  var td7 = document.createElement("td");
  td7.id = 'tdid_s';
  tr.appendChild(td7);
  container.insertBefore(tr, position);
 }
 function showpagenum(current,thereisoldone){
   var pgNum=0;
   var where = document.getElementById('trid3');
   if (thereisoldone){
  var tr_pgn = document.getElementById('trid5');
  wdgTbody.removeChild(tr_pgn);
  var x = document.getElementById("trid1");
  while(x != null){
     wdgTbody.removeChild(x);
     x = document.getElementById("trid1");
  }
   }
   var pages = parseInt((parseInt(productItems.length) + parseInt(pagesize) -1) / pagesize);
   var pageitems;
   if (productItems.length >= (pagesize * current)){
  pageitems = pagesize;
   }else{
  pageitems = productItems.length - (pagesize * (current -1 ));
   }
   for (var i = 0; i < (pageitems); i++) {
    var productItem = productItems[i + (pagesize * (current -1 ))];
    renderLinkListItem(productItem, wdgTbody, i < (pageitems -1),where );
   }
   var tr1 = document.createElement("tr");
   tr1.id = 'trid5';
   var td11 = document.createElement("td");
   td11.id = 'tdid_s';
   var td12 = document.createElement("td");
   td12.id = 'tdid_p';
   var td13 = document.createElement("td");
   td13.id = 'tdid_pagefoot';
  var tdTable = document.createElement("table");
  td13.appendChild(tdTable);
  var tdTbody = document.createElement("tbody");
  tdTable.appendChild(tdTbody);
   var tdtr = document.createElement("tr");
   for (var i = 0; i < maxpages; i++) {
  var tdtr_td = document.createElement("td");
  tdtr_td.style.width = '8px';
  if ( (i > (maxpages-pages)/2 -1) && (pgNum < (pages+2)) ){
    tdtr_td.id = 'tdid_pagenum';
    if (pgNum == current){  tdtr_td.id = 'tdid_pagenum_current';}
    if (pgNum == 0){
   if (current > 1){
     tdtr_td.innerHTML = '<div onmousedown="showpagenum('+ (current-1) +','+ 'true );" > &lt; </div>';
   }else{
     tdtr_td.innerHTML = '&lt;';
   }
    }else if (pgNum > pages){
   if (current < pages){
   tdtr_td.innerHTML = '<div onmousedown="showpagenum('+ (current+1) +','+ 'true );" > &gt; </div>';
   }else{
     tdtr_td.innerHTML = '&gt;'   ;
   }
    }else {
   tdtr_td.innerHTML = '<div  onmousedown="showpagenum('+ pgNum +','+ 'true );" >' + pgNum + '</div>';
    }
    pgNum++;
  }
  tdtr.appendChild(tdtr_td);
  if ( i > (maxpages-pages)/2  && pgNum < (pages + 1) ){
    var tdtr_td1 = document.createElement("td");
    tdtr_td1.id = 'tdid_verticalline';
    tdtr_td1.innerHTML = '\|';
    tdtr.appendChild(tdtr_td1);
  }
   }
   tdTbody.appendChild(tdtr);
   var td16 = document.createElement("td");
   td16.id = 'tdid_p';
   var td17 = document.createElement("td");
   td17.id = 'tdid_s';
   tr1.appendChild(td11);
   tr1.appendChild(td12);
   tr1.appendChild(td13);
   tr1.appendChild(td16);
   tr1.appendChild(td17);
   wdgTbody.insertBefore(tr1, where);
 }
 function productSearchResponseHandler(data) {
  if (data.productsResult) {
   productItems = data.productsResult.productItem;
   showpagenum(1,false);
  }
 }
</script>

<style id="zxStyle" type="text/css">
#zxContainer
{
 background-color: #FAFAFA;
 border-bottom-color: Black;
 border-style: solid;
 border-width: 1px;
 width: 400px;
}
#zxAdList
{
 margin-top: 0px;
 margin-bottom: 0px;
 font-style: normal;
}
a:link {color: black; text-decoration: underline}
#Widget1
{
 background-color: #ff8000;
 border-spacing: 0px;
 border-style: none;
 border-width: 0px;
 border-color: #0000ff;
 margin-bottom: 20px;
 padding: 0px;
 width: 400px;
 font-family: San Serife, Verdana ;
}
#tbd
{
  background-color: #00ff00;
  border-spacing: 0px;
  border-style: none;
  border-width: 0px;
  border-color: #000000;
  margin-bottom: 20px;
  padding: 0px;
  width: 400px;	
}
#tbd1
{
  background-color: #ff8000;
  border-spacing: 0px;
  border-style: none;
  border-width: 0px;
  border-color: #000000;
  padding: 0px;
}
#trid1, tr.item1
/*item */
{
 background-color: #FFFFFF;		
 margin: 5px;
 border-style: solid;	
 border-width: 1px;	
 height: 200px;	
}
#trid11
/*item */
{
 background-color: #FFFFFF;		
 margin: 5px;
 border-style: none;	
 border-width: 1px;
}
#trid2
/*widget title*/
{
  background-color: #ff8000;
  border-style: none;	
  border-width: 0px;
	height: 50px;		
	font-weight: bold;
}
#trid3
/*buttom line*/
{
  color: #ff8000;
  border-style: none;	
  border-width: 1px;
  height: 2px;	
  width: 400px;		
}
#trid4
/*search line */
{
 background-color: #FF8000;		
 /*margin: 5px;*/
 border-style: none;	
 border-width: 0px;
 height: 30px;
}
#tdtr_search
{
  height: 30px;
}
#trid5
/*pagenum */
{
 background-color: #FFFFFF;		
 margin: 5px;
 border-style: none;	
 border-width: 1px;
}
#trid6
/*itemline */
{
 background-color: #FFFFFF;		
 margin: 5px;
 border-style: none;	
 border-width: 1px;	
 height:1px;
}
#tdid_wgdTitle
{
 border-style: none;	
 border-width: 0px;
 padding: 0px;
 color: #ffffff;
 font-size: large;
 width: 366px;
}
#tdid
{	
  background-color: #ffffff;
  padding: 0px;
  width: 366px;
}
#tdid_search
{	
  background-color: #ff8000;
  padding: 0px;
  width: 366px;
}
#tdid_name
{	
 font-size: small;
 font-weight: bold;
}
#tdid_des
{
 font-size: small;
}
#tdid_prog
{
  font-size: xx-small;
  color: #ff8000;
}
#tdid_price
{	
  font-size: large;
  font-style: normal;
  font-weight: bold;
  /*width:80px;*/
  vertical-align: bottom;
  text-align: center;
}
#tdid_pagefoot
{
  width: 366px;	
  text-align: center;
}
#tdid_mm
{
  width:50%;
}
#tdid_pagenum
{
  font-size: small;
  cursor: pointer;
  color: #ff8000;
}
#tdid_pagenum_current
{
  font-size: small;
  color: #000000;
}
#tdid_verticalline
{
  padding: 1px;
  background-color: #ffffff;
  color: #ff8000;
  font-size: small;
  width: 0px;
}
#tdid_s, div.tds
{
  padding: 0px;
  border-style: none;	
	border-width: 0px;
  background-color: #ff8000;
  width: 2px;	
}
#tdids_line, div.tds_line
{
  padding: 0px;
  border-style: none;	
	border-width: 0px;
  background-color: #ff8000;
  height: 1px;
  width: 2px;	
}
#tdid_p, div.tdp
{
 background-color: #ffffff;
 border-style: none;	
 border-width: 0px;
 padding: 0px;
 width: 15px;		
}
#tdid_p1, div.tdp1
{
 border-style: none;	
 border-width: 0px;
 padding: 0px;
 background-color: #ff8000;
 width: 15px;		
}
#tdid_p2
{
 border-style: none;	
 border-width: 0px;
 padding: 0px;
 width: 32px;		
}
#tdid_m
/*draw line*/
{
  background-color: #ff8000;
  height: 1px;	
  width: 366px;	
}
div.lbl1
{
  cursor: pointer;
  font-size: xx-small;
  font-weight: bold;
  font-style: normal;
  color:#ffffff;
  margin-left: 12px;
  vertical-align: bottom;
}
div.lbl2
{
  cursor: pointer;
  font-size: small;
  font-weight: bold;
  font-style:normal;
  color:#ffffff;
}

</style>
</head>
<body  
 onload = "zxContextMatch(apversion, 
  applicationid, 
  adspace, 
  region,  
  programs,  
  category,  
  minPrice,  
  maxPrice,  
  page,  
  items,  
  searchString,  
  'productSearchResponseHandler');">
<ul id="zxAdList"></ul>
</body>
</html>

JavaScript widget showing one product per page

From Wiki.zanox.com

Screenshot

Code

Views

Personal tools

Navigation

Search

Toolbox