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

JavaScript Product Carrousel

From Wiki.zanox.com

Jump to: navigation, search

This is a more complex example to show how to access the zanox Product Search Web Services and how to present the results. See the Live example in our blog.

Screenshot

Screenshot - Product Carrousel

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 Product Carrousel</title>
<script type="text/javascript">
var zxContainer       = document.getElementById('zxContainer');
var applicationid     = 'BE94C4947839E8AB4D67';
var apversion         = '2009-02-01';
var adspace           = null;
var region            = 'de';
var programs          = '660';
var category          = '20000' // http://wiki.zanox.com/en/ProductCategories;
var page              = '0';
var items             = '10';
var minPrice          = '10';
var maxPrice          = '100000';
var searchString      = "When someone thinks of 80’s fashion, they usually conjure up images of big hair, puffy Tutu dresses and members-only jackets. Those styles don’t seem to be cool anymore, but Jeremy Ridgeway wants you to see 80’s fashion in a new and fresh way.";
var NamLen            = '66';
var DesLen            = '160';
var pagesize          = '1';
var wdgName           = 'zanox Product Carrousel';
var wdgTable;
var wdgTbody;
var xmlhttp;
var productItems;
var a                 = 0;
var f_w               = 370;
var f_h               = 100;
var f_cx              = 0;
var f_cy              = 0;
var r                 = 100;
var ry                = 0.0;
var init_i      	  = 0;
var to_draw      	  = 0;
var to_rec      	  = 0;
var bMouseDown        = 0;
var img_w             = 80;
var img_h             = 60;
var stre              = 0.0;
var alpha0            = 0.0;
var intervalHandler;
var tmp = navigator.appName == 'Microsoft Internet Explorer' && navigator.userAgent.indexOf('Opera') < 1 ? 1 : 0;
    if(tmp) var isIE = document.namespaces ? 1 : 0;
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_p1x';
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_p1x';
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_p';
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_p';
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 frame_onmousemove(e){
  if (to_rec == 1){
var minx = f_w;
  if (null == e)
 e = window.event ;
  td_pics_onmouseup(e);
 to_rec = 0;
}
  }
function td_pics_onmousemove(e){
  if (null == e)
 e = window.event ;
  a = e.clientX - f_cx ;
  to_draw = 1;
  }
function draw_pics( )
{
 if (to_draw == 0) return;
 if (a>r){ a = r;}
 else if (a<-r){
a = -r;
 }
 alpha0 = alpha0 + 0.01;
 var alpha = alpha0;
 for (var i = 0; i < productItems.length ; i++){
if (bMouseDown == 0) {
 alpha = alpha + Math.PI * 2 /productItems.length;
}else{
 alpha = (parseInt(i) * Math.PI * 2 /productItems.length ) + Math.asin(a/r);
}
x = r * Math.sin(alpha) + f_cx;
  y = ry * Math.cos(alpha) + f_cy;
  if (bMouseDown == 0) {j = i; }
  else{
j = ( init_i + i ) % productItems.length;
  }
  s = document.getElementById('pic' + j).style;
  s1 = document.getElementById('img' + j);
  s.left = Math.round(x) + 'px';
  s.top  = Math.round(y) - parseInt(img_h)/2 + 'px';
  s1.height = img_h * (1 - (f_cy + ry - y)/(2*ry) * 0.4);
  s1.width  = img_w * (1 - (f_cy + ry - y)/(2*ry) * 0.4);
  s.zIndex = Math.round(y) ;
 }
 to_rec = 1;
}
function showinfo(Name, link, Des, Prog, Price){
  var x = document.getElementById("tdid_name");
  x.innerHTML = '<a href="' + link + '">' + Name + '</a>';
  x = document.getElementById("tdid_des");
  x.innerHTML = (Des!='undefined') ? Des : '';
  x = document.getElementById("tdid_prog");
  x.innerHTML = Prog;
  x = document.getElementById("tdid_price");
  x.innerHTML = Price;
}
function td_pics_onmousedown(e){
  bMouseDown = 1;
  var minx = f_w;
if (null == e)
 e = window.event ;
  for (var i = 0; i < productItems.length ; i++){
var t;
s = document.getElementById('pic' + i);
t =  s.offsetLeft - e.clientX ;
t = Math.abs(t);
if ( t < minx ){
minx = t ;
init_i = i;
  }
}
}
function td_pics_onmouseup(e){
  bMouseDown = 0;
  s = document.getElementById('pic0');
  alpha0 = Math.asin((s.offsetLeft - f_cx)/r);
  if ( s.offsetTop < f_cy ){
alpha0 = Math.PI - alpha0;
  }
}
 
function showpagenum(current,thereisoldone){
  var pgNum=0;
  var where = document.getElementById('trid3');
  var tr1 = document.createElement("tr");
  tr1.id = 'trid1';
  var td11 = document.createElement("td");
  td11.id = 'tdid_s';
  var td12 = document.createElement("td");
  td12.id = 'tdid_p';
  td12.onmousemove = frame_onmousemove;
  var td15 = document.createElement("td");
  td15.id = 'tdid_pics_c';
  td15.onmousemove = td_pics_onmousemove;
  td15.onmousedown = td_pics_onmousedown;
  td15.onmouseup   = td_pics_onmouseup;
  var td16 = document.createElement("td");
  td16.id = 'tdid_p';
  td16.onmousemove = frame_onmousemove;
  var td17 = document.createElement("td");
  td17.id = 'tdid_s';
  tr1.appendChild(td11);
  tr1.appendChild(td12);
  tr1.appendChild(td15);
  tr1.appendChild(td16);
  tr1.appendChild(td17);
  wdgTbody.insertBefore(tr1, where);
  f_w = td15.offsetWidth - img_w;
  f_h = td15.offsetHeight - img_h;
  f_cx = td15.offsetLeft + parseInt(td15.offsetWidth)/2;
  f_cy = td15.offsetTop + parseInt(td15.offsetHeight)/2;
  r = f_w /2 ;
  stre = f_h / f_w;
  ry = r * stre * 0.5;
  for (var i = 0; i < productItems.length; i++) {
var productItem = productItems[i];
var link = '';
if (productItem.url.adspace instanceof Array) {
 link = productItem.url.adspace[0].$;
}
else {
 link = productItem.url.adspace.$;
}
var imgl
try{
  imgl = productItem.image.small;
}catch(er){
}
div1 = document.createElement("div");
div1.id = 'pic' + i;
div1.style.position = "absolute";
var strLink = new String(link);
var strName = new String(productItem.name);
if (strName.length>NamLen){
strName = strName.substring(0,NamLen);
}
var strDes = new String(productItem.description);
if (strDes.length > DesLen){
strDes = strDes.substring(0,DesLen);
}
var strProg = new String(productItem.program.$);
var strPrice = new String(productItem.price.toFixed(2));
  if (productItem.currency == 'EUR'){
 strPrice = strPrice + '&euro;';
  }else if (productItem.currency == 'GBP'){
 strPrice = strPrice + '&#8356';
  }else if (productItem.currency == 'USD'){
 strPrice = strPrice + '&#36';
  }else if (productItem.currency == 'JPY'){
 strPrice = strPrice + '&yen';
  }
  else{
 strPrice = strPrice + productItem.currency;
  }
div1.innerHTML = '<a href="' + link + '"><img border=0 bordercolor="#0000ff" id ="img' + i + '" src="' + imgl + '" width="' + img_w + '" height="' + img_h + '" onmouseout="this.border = 0;" onerror="this.src=\'http://zac.zanox.com/images/no_image_carrousel.gif\';" onmouseover="this.border = 1; showinfo(\'' + strName + '\',\'' + strLink + '\',\'' + strDes + '\',\'' + strProg + '\',\'' + strPrice +'\');" /> </a>';
  td15.appendChild(div1);
 
  }
  to_draw = 1;
  bMouseDown = 1;
  draw_pics();
  bMouseDown = 0;
  var tr2 = document.createElement("tr");
  tr2.id = 'trid5';
  var td21 = document.createElement("td");
  td21.id = 'tdid_s';
  var td22 = document.createElement("td");
  td22.id = 'tdid_p';
  var td25 = document.createElement("td");
  td25.id = 'tdid';
tdTable1 = document.createElement("table");
td25.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_detail';
  tdTable2 = document.createElement("table");
  tdtr1_td1.appendChild(tdTable2);
  tdTbody2 = document.createElement("tbody");
  tdTable2.appendChild(tdTbody2);
  var tr_name = document.createElement("tr");
  tr_name.id = 'trid_name';
  var td_name = document.createElement("td");
  td_name.id = 'tdid_name';
  tr_name.appendChild(td_name);
  tdTbody2.appendChild(tr_name);
  var tr_des = document.createElement("tr");
  tr_des.id = 'trid_des';
  var td_des = document.createElement("td");
  td_des.id = 'tdid_des';
  tr_des.appendChild(td_des);
  tdTbody2.appendChild(tr_des);
  var tr_prog = document.createElement("tr");
  tr_prog.id = 'trid_prog';
  var td_prog = document.createElement("td");
  td_prog.id = 'tdid_prog';
  tr_prog.appendChild(td_prog);
  tdTbody2.appendChild(tr_prog);
  tdtr1_td1.appendChild(tdTable2);
tdtr1.appendChild(tdtr1_td1);
var tdtr1_td2 = document.createElement("td");
tdtr1_td2.id = 'tdid_price';
tdtr1.appendChild(tdtr1_td2);
tdTbody1.appendChild(tdtr1);
td25.appendChild(tdTable1);
  var td26 = document.createElement("td");
  td26.id = 'tdid_p';
  var td27 = document.createElement("td");
  td27.id = 'tdid_s';
  tr2.appendChild(td21);
  tr2.appendChild(td22);
  tr2.appendChild(td25);
  tr2.appendChild(td26);
  tr2.appendChild(td27);
  wdgTbody.insertBefore(tr2, where);
  clearInterval(intervalHandler);
  intervalHandler = setInterval('draw_pics()', 20);
}
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: #ffffff;
  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: 240px;
}
#trid11
/*item */
{
 background-color: #FFFFFF;
 margin: 5px;
 border-style: none;
 border-width: 1px;
}
#trid2
/*widget title*/
{
  background-image:url(background3.jpg);
  background-color: #fff;
  border-style: none;
  border-width: 0px;
 height: 45px;
 font-weight: bold;
}
#trid3
/*buttom line*/
{
  color: #ff8000;
  border-style: none;
  border-width: 1px;
 height: 2px;
 width: 400px;
}
#trid4
/*search line */
{
 background-color: #FFffff;
 /*margin: 5px;*/
 border-style: none;
 border-width: 0px;
 height: 30px;
}
#tdtr_search
{
  height: 30px;
}
#trid5
{
 background-color: #FFFFFF;
 margin: 5px;
 height: 80px;
 border-style: none;
 border-width: 1px;
}
#trid_name
{
  height: 20px;
}
#trid_des
{
  height: 40px;
}
#trid_prog
{
  height: 20px;
}
#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;
 background:url(http://zac.zanox.com/images/carrousel_bg.gif);
}
#tdid
{
  background-color: #ffffff;
  padding: 0px;
  width: 366px;
}
#tdid_search
{
  background-color: #ffffff;
  padding: 0px;
  width: 366px;
}
#tdid_name
{
  font-size: small;
  font-weight: bold;
}
#tdid_des
{
  font-size: small;
  color: #333;
}
#tdid_prog
{
  font-size: xx-small;
  color: #ff8000;
}
#tdid_price
{
  font-size: large;
  font-style: normal;
  font-weight: bold;
  color: #333;
  /*width:80px;*/
  width: 20%;
  vertical-align: top;
  text-align: center;
}
#tdid_pics_c
{
  width: 366px;
  text-align: center;
  margin-bottom: 50px;
}
#tdid_mm
{
  width:50%;
}
#tdid_detail
{
  width:80%;
}
#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_p1x, div.tdp1
{
  border-style: none;
 border-width: 0px;
  padding: 0px;
  background:url(http://zac.zanox.com/images/carrousel_bg.gif);
  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-family:sans-serif;
  letter-spacing: -2px;
  font-size: 7pt;
  font-weight: regular;
  font-style: normal;
  color:#666;
  margin-left: 4px;
  vertical-align: bottom;
}
div.lbl2
{
  cursor: pointer;
  font-size: small;
  color:#666;
  font-weight: bold;
  font-style:normal;
  color:#0;
}
.w_back_img
{
  background-image:url('magnify.jpg');
}
</style>
</head>
<body  onload = "zxContextMatch(apversion, applicationid, adspace, region, programs, category, minPrice, maxPrice, page, items, searchString, 'productSearchResponseHandler');">
 <ul id="zxAdList"></ul>
</body>
</html>
 
Retrieved from "http://wiki.zanox.com/en/JavaScript_Product_Carrousel"
Personal tools