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

JavaScript Contextual Product Search Mashup with YouTube using MooTools

From Wiki.zanox.com

Jump to: navigation, search

Screenshot

Screenshot JavaScript Contextual Product Search Mashup with YouTube using MooTools

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 - A mashup with youtube using mootools class</title>
 <style id="zxStyle" type="text/css">
  .zxContainer{
  	margin:0;
 		padding:0;
 		color:#999;
  	background-color: #fff;
  	border:2px solid #999;
 		width: 520px;
			font-family: sans-serif;
  }
  .zxVideo {
  	padding:10px;
  }
  .zxVideo a {
  	color:#333;
  }
  .zxVideo img {
  	border:0px solid white;
  }
  .zxVideo table {
  	width:500px !important;
  }
  .zxVideo table td {
  	color:#999;
  	background-color:#fff;
  	padding:4px;
  }
  h2.zxAdHeader {
  	margin: 0;
  	padding: 0 0 0 10px;
  	text-align: left;
  	font-weight:normal;
  	font-size:small;
  }
  .zxAdList {
  	margin:0px;
  	padding:5px;
  	list-style:none;
  }
  .zxAdList li {
  	display:block;
  	clear:both;
  	background-color:#fff;
  	margin:0;
  	padding:5px 5px;
  	height:100px;
  	border-top: 1px solid #999;
  }
  .zxAdList a {
  	display:block;
  	text-decoration:none;
  	font-family: Arial, Verdana, sans-serif;
  	color:#666;
  	font-size:12px;
			  }
  .zxProductImage {
  	display:block;
  	float:left;
  	width:50px;
  	height:70px;
  	border:1px solid #ccc;
  	cursor:pointer;
  	margin-top:16px;
			margin-bottom:16px;
  	margin-right:5px;
  }
  .zxProductName {
  	color:#f36406;
  	font-weight:bold;
  	font-size: 12px;
			text-decoration:underline;
  	line-height:16px;
			  }
  .zxProductInfo {
  	display:block;
  	color:#333;
  	background-color:#eee;
  	height:40px;
  	padding:5px 0 0 3px;
  	font-size:11px;
  	margin:3px 0px 5px 57px;
  	overflow:hidden;
  }
  .zxProductPrice {
  	display:block;
  	font-weight:bold;
			font-size: 12px;
  }
  .zxProductPrice em {
  	color:#f36406;
  }
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"> </script>
 <script type="text/javascript">
 
 	var zxVideoAd = new Class({
 		Implements: Options,
 		options: {
 		},
 
 		initialize: function(name, options){
 			this.name = name;
 			this.container = ($(options.container)) ? $(options.container) : document.body;
 			this.container.addClass('zxContainer');
 
  		this.setOptions(options);
  		this.searchYoutube(this.options.keywords, 1, this.name+'.handleYoutube');
 		},
 		addScript: function(source, properties) {
 			properties = $extend({
					onload: $empty,
					document: document,
					check: $lambda(true)
				}, properties);
 
				var script = new Element('script', {'src': source+'&t=' + new Date().getMinutes(), 'type': 'text/javascript'});
 
				var load = properties.onload.bind(script), check = properties.check, doc = properties.document;
				delete properties.onload; delete properties.check; delete properties.document;
 
				script.addEvents({
					load: load,
					readystatechange: function(){
						if (['loaded', 'complete'].contains(this.readyState)) load();
					}
				}).setProperties(properties);
 
 
				if (Browser.Engine.webkit419) var checker = (function(){
					if (!$try(check)) return;
					$clear(checker);
					load();
				}).periodical(50);
 
				return script.inject(doc.head);
 		},
 
 		searchYoutube: function(q, items, callback) {
   	var url = 'http://gdata.youtube.com/feeds/base/videos?client=ytapi-youtube-search&alt=json-in-script&v=2';
   	if (items) url += '&max-results=' + items;
   	if (callback) url += '&callback=' + callback;
   	if (q) url += '&q=' + q;
   	this.addScript(url);
  	},
 
  	handleYoutube: function(data) {
  		var zxVideo = new Element('div', {
  			'class': 'zxVideo'
  		}).injectInside(this.container);
   	var item = data.feed.entry[0];
   	zxVideo.set('html', item.content.$t);
   	var q = item.title.$t;
 
  		var version = '2009-02-01';
  		var adspace = null;
  		var region = 'de';
  		var programs = '660';
  		var category = null;
  		var page = '0';
  		var items = '10';
  		var minPrice = '0';
  		var maxPrice = '100000';
 
   	this.zxContextMatch(version, this.options.appId, adspace, region, programs, category, minPrice, maxPrice, 0, items, q, this.name+'.handleAds');
  	},
 
  	handleAds: function(data) {
  		if (data.productsResult) {
  			var h2_ads = new Element('h2', {
  				'class':'zxAdHeader'
  			}).set('text', 'Advertisement').injectInside(this.container);
    	var productItems = data.productsResult.productItem;
    	var zxAdList = new Element('ul', {
    		'class': 'zxAdList'
    	});
					var products_with_image = 0;
    	for (var i = 0; i < productItems.length; i++) {
    		if(products_with_image==Number(this.options.items)) {
    			break;
    		}
     	var productItem = productItems[i];
     	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 content = productItem.name + ' bei ' + productItem.program.$ + ' für ' + productItem.price + ' ' + productItem.currency;
 
     	var li = new Element('li').injectInside(zxAdList);
     	var a = new Element('a', {
     		'href': link
     	}).injectInside(li);
     	var span_name = new Element('span', {
     		'class': 'zxProductName'
     	}).set('text', productItem.name);
     	var span_info = new Element('span', {
     		'class': 'zxProductInfo'
     	}).set('text', productItem.description);
     	var span_price = new Element('span', {
     		'class': 'zxProductPrice'
     	}).set('html', 'Price: '+'<em>'+productItem.currency + ' ' + productItem.price);
     	var image_url = (productItem.image.small) ? productItem.image.small : (productItem.image.medium) ? productItem.image.medium : '';
     	if(image_url!='') {
     		products_with_image++;
     		var image = new Element('span', {
     			'class': 'zxProductImage',
     			'styles': {
	     			'background': 'url('+image_url+') center'
 	    		}
  	   	}).injectInside(a);
   	  	a.adopt(span_name).adopt(span_info).adopt(span_price);
     	}
 
     	//alert(productItem.image.small);
    	}
    	zxAdList.injectInside(this.container);
   	}
  	},
 
  	zxContextMatch: function(version, applicationid, adspace, region, programs, category, minPrice, maxPrice, page, items, q, callback) {
   	var url = 'http://api.zanox.com/json/' + version + '/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;
   	this.addScript(url);
  	}
 
		});
 
 	window.addEvent('domready', function(){
 		myVideoAd = new zxVideoAd('myVideoAd', {
 			'appId': 'BE94C4947839E8AB4D67',
 			'container': 'video1',
 			'keywords': 'javascript widget',
 			'items': '3'
 		})
 	});
 </script>
</head>
<body>
 <h1>zanox Web Services - A mashup with youtube using mootools class</h1>
 <div id="video1"></div>
</body>
</html>
 
Retrieved from "http://wiki.zanox.com/en/JavaScript_Contextual_Product_Search_Mashup_with_YouTube_using_MooTools"
Personal tools