流れるレビュー

流れるレビューを作成してみましょう。
サンプルページ
※5秒程度でレビューが流れ始めます。

レビューに動きを持たせることで、売れている感を演出できます。

準備

jquery.jsが必要です。site_frame.tpl内に下記の記述がない場合は追記してください。
すでにsite_frame.tpl内に記述がある場合は不要です。

<script type="text/javascript" src="<!--{$smarty.const.URL_DIR}-->js/main.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.URL_DIR}-->js/jquery.js"></script>
※main.jsはjavascriptの高速化用です。jsの先頭に記述して下さい。先頭以外に設置すると不具合が起こる場合があります。
site_frame.tplは以下の場所にあります。
【PCの場合】　pc > templates > 使用中のテンプレート名 > site_frame.tpl
【スマホの場合】　smp > templates > 使用中のテンプレート名 > site_frame.tpl

cssファイルに追記

【PCの場合】　pc/templates/使用中のテンプレート名/css/main.css
【スマホの場合】　smp/templates/使用中のテンプレート名/colorvariation/使用中のカラー/css/main.css
の最終行に以下の記述を追加します。
/* review_pop */
#review_pop{height:351px;overflow:hidden;position:relative;}/* 表示個数 x 117px */
#review_pop .box{background: #fff;border: 1px solid #ccc; margin-bottom:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
#review_pop .box_body{padding:10px;}
#review_pop .img{float:left;width:90px;height:90px;}
#review_pop .txt{float:left;width:280px;height:90px;position: relative;line-height:1.2;}
#review_pop .user{position:absolute;bottom:0;right:0;font-size:10px;color:#999;}

ブロックを作成

表示方法は新着順とランダム表示の2種類が選べます。
以下のいずれかのソースを記述してください。

▼新着順

<h3>みんなのコメント</h3>
<div id="review_pop"></div>
<a href="#" id="more_pop">もっと見る</a>
<script>
$(function(){
	var box_height = 117;
	var view_count = 3;	/* 初期表示個数 */
	var sec = 15000;		/* 表示間隔(1000＝1秒) */
	var more_con = 3;	/* もっと見る読み込み数 */
	var req_con = 0;	/* 読み込みカウント */
	var max_id = 50;	/* idがこの値以上になったら消していく */
	
	/* load */
	$(window).load(function(){
		pop_set(true, false);
	});
	
	/* more */
	$('#more_pop').click(function(){
		var next_height = $('#review_pop').height() + (more_con * box_height);
		if(next_height > $('#review_pop .box:visible').length * box_height){
			pop_set(false, true);
		}
		$('#review_pop').animate({'height':next_height+'px'}, 500);
		return false;
	});
	
	/* data get */
	var page_no = 1;
	var stop_flg = false;
	var pop_set = function(load_flg, more){
		var d = {'jb':'api-review', 'page':page_no, 'view':'20'};
		if(more){ d = {'jb':'api-review', 'random':'1', 'view':more_con};}
		$.ajax({
			type: 'post',
			url: '<!--{$smarty.const.SITE_URL}-->api/',
			data: d,
			success: function(res){
				req_con++;
				page_no++;
				var obj = res.result;
				if(obj.length==0) { if(!stop_flg){page_no=1;pop_set(false, false);return false;}else{return false;} }
				
				for(var v in obj){
					var o = obj[v];
					var html = '';
					html += '<div class="box" id="box_req_count_'+req_con+'_'+v+'" style="display:none;"><div class="box_body">';
					html += '	<div class="img"><a href="<!--{$smarty.const.SITE_URL}-->product/detail/'+o.product_id+'"><img src="<!--{$smarty.const.SITE_URL}-->resize_image4.php?width=80&height=80&image='+o.main_list_image+'" /></a></div>';
					html += '	<div class="txt">';
					html += '		<div><b>'+o.title.substr(0,25)+'</b></div>';
					html += '		<div>'+o.comment.substr(0,50)+'</div>';
					html += '		<div><a href="<!--{$smarty.const.SITE_URL}-->product/detail/'+o.product_id+'">'+o.product_name+'(★'+o.recommend_level+')</a></div>';
					html += '		<div>¥'+o.price02_min+'～</div>';
					html += '		<div class="user">'+o.reviewer_name+'-'+o.review_date+'</div>';
					html += '	</div><br clear="all">';
					html += '</div></div>';
					if(more){$('#review_pop').append(html);}
					else{$('#review_pop').prepend(html);}
				}
				
				var con = obj.length;
				if(more){
					$('#review_pop .box').each(function(i){
						$(this).fadeIn(1000);
					});
				}else{
					$('#review_pop div[id^=box_req_count_'+req_con+']').each(function(i){
						if(load_flg){
							if(view_count > (con - i)){
								$(this).fadeIn(1000);
							}else{
								$(this).delay((con - i - view_count) * sec).animate({height: "toggle", opacity: "toggle"},1000);
							}
						}else{
							$(this).delay((con - i) * sec).animate({height: "toggle", opacity: "toggle"},1000);
						}
					});
					
					var timer = setInterval(function(){
						pop_set(false, false);
						clearInterval(timer);
					}, ((load_flg)? ((con-view_count) * sec) : (con * sec)));
				}
				
				if(req_con >= max_id){
					var del_id = req_con - max_id;
					$('#review_pop div[id^=box_req_count_'+del_id+']').remove();
				}
			}
		});
	};
	
});
</script>
<!-- ▲POPレビュー（新着）ここまで▲ -->
▼ランダム表示
<!-- ▼POPレビュー（ランダム）ここから▼ -->
<h3>みんなのコメント</h3>
<div id="review_pop"></div>
<a href="#" id="more_pop">もっと見る</a>
<script>
$(function(){
	var box_height = 117;
	var view_count = 3;	/* 初期表示個数 */
	var sec = 15000;		/* 表示間隔(1000＝1秒) */
	var more_con = 3;	/* もっと見る読み込み数 */
	var req_con = 0;	/* 読み込みカウント */
	var max_id = 50;	/* idがこの値以上になったら消していく */
	
	/* load */
	$(window).load(function(){
		pop_set(true, false);
	});
	
	/* more */
	$('#more_pop').click(function(){
		var next_height = $('#review_pop').height() + (more_con * box_height);
		if(next_height > $('#review_pop .box:visible').length * box_height){
			pop_set(false, true);
		}
		$('#review_pop').animate({'height':next_height+'px'}, 500);
		return false;
	});
	
	/* data get */
	var pop_set = function(load_flg, more){
		var d = {'jb':'api-review', 'random':'1'};
		if(more){ d = {'jb':'api-review', 'random':'1', 'view':more_con};}
		$.ajax({
			type: 'post',
			url: '<!--{$smarty.const.SITE_URL}-->api/',
			data: d,
			success: function(res){
				req_con++;
				var obj = res.result;
				for(var v in obj){
					var o = obj[v];
					var html = '';
					html += '<div class="box" id="box_req_count_'+req_con+'_'+v+'" style="display:none;"><div class="box_body">';
					html += '	<div class="img"><a href="<!--{$smarty.const.SITE_URL}-->product/detail/'+o.product_id+'"><img src="<!--{$smarty.const.SITE_URL}-->resize_image4.php?width=80&height=80&image='+o.main_list_image+'" /></a></div>';
					html += '	<div class="txt">';
					html += '		<div><b>'+o.title.substr(0,25)+'</b></div>';
					html += '		<div>'+o.comment.substr(0,50)+'</div>';
					html += '		<div><a href="<!--{$smarty.const.SITE_URL}-->product/detail/'+o.product_id+'">'+o.product_name+'(★'+o.recommend_level+')</a></div>';
					html += '		<div>¥'+o.price02_min+'～</div>';
					html += '		<div class="user">'+o.reviewer_name+'-'+o.review_date+'</div>';
					html += '	</div><br clear="all">';
					html += '</div></div>';
					if(more){$('#review_pop').append(html);}
					else{$('#review_pop').prepend(html);}
				}
				
				var con = obj.length;
				if(more){
					$('#review_pop .box').each(function(i){
						$(this).fadeIn(1000);
					});
				}else{
					$('#review_pop div[id^=box_req_count_'+req_con+']').each(function(i){
						if(load_flg){
							if(view_count > (con - i)){
								$(this).fadeIn(1000);
							}else{
								$(this).delay((con - i - view_count) * sec).animate({height: "toggle", opacity: "toggle"},1000);
							}
						}else{
							$(this).delay((con - i) * sec).animate({height: "toggle", opacity: "toggle"},1000);
						}
					});
					
					var timer = setInterval(function(){
						pop_set(false, false);
						clearInterval(timer);
					}, ((load_flg)? ((con-view_count) * sec) : (con * sec)));
				}
				
				if(req_con >= max_id){
					var del_id = req_con - max_id;
					$('#review_pop div[id^=box_req_count_'+del_id+']').remove();
				}
			}
		});
	};
	
});
</script>
<!-- ▲POPレビュー（ランダム）ここまで▲ -->
本ソースは自由にご利用いただけますが、サポートの対象外となっております。
正しく動作しない等のお問い合わせをいただいてもご回答できかねます。

また弊社のテスト環境では動作確認を行っておりますが、お客様のサイト上での正しい動作を保証するものではございませんので、
導入の際はご確認の上自己責任にてご実装ください。

▲ PAGE TOP