EC-CUBE 2.12 :「お客様の声」レビュー書き込みページング機能(プラグイン)

「この商品に対するお客様の声」のレビュー書き込みを5件ごと表示しページング機能をつける。
パラメータ設定のREVIEW_REGIST_MAX(フロントレビュー書き込み最大数)の値を増やしてください。(例えば100)
jquery.jsのみで動作する。

▼サンプル下記ページ「この商品に対するお客様の声」
http://www.kaiplus.com/2122v1/products/detail2.html

「お客様の声」レビュー書き込みページング機能プラグインを利用することで、下記カスタマイズを実現しています。
プラグインはこちらからダウンロード(無料)できます。

プラグインを利用しない場合は、下記の通りに修正します。

(1) ■data/Smarty/templates/default/products/detail.tpl
を削除
▼変更前

<!--{if count($arrReview) < $smarty.const.REVIEW_REGIST_MAX}-->
<!--★新規コメントを書き込む★-->
<a class="popupwindow" href="./review.php?product_id=<!--{$arrProduct.product_id}-->" rel="windowReview">
<img src="<!--{$TPL_URLPATH}-->img/button/btn_comment.jpg" alt="新規コメントを書き込む" /></a>
<!--{/if}-->

▼変更後

<!--★新規コメントを書き込む★-->
<a class="popupwindow" href="./review.php?product_id=<!--{$arrProduct.product_id}-->" rel="windowReview">
<img src="<!--{$TPL_URLPATH}-->img/button/btn_comment.jpg" alt="新規コメントを書き込む" /></a>

(2)■data/Smarty/templates/default/products/detail.tplの変更

▼変更前

<!--{if count($arrReview) > 0}--></pre>
<ul>
<ul><!--{section name=cnt loop=$arrReview}--></ul>
</ul>
<ul>
<ul>
	<li>
<!--{$arrReview[cnt].title|h}-->

<!--{$arrReview[cnt].create_date|sfDispDBDate:false}--> 投稿者:<!--{if $arrReview[cnt].reviewer_url}--><a href="<!--{$arrReview[cnt].reviewer_url}-->" target="_blank"><!--{$arrReview[cnt].reviewer_name|h}--></a><!--{else}--><!--{$arrReview[cnt].reviewer_name|h}--><!--{/if}--> おすすめレベル:<span class="&quot;recommend_level"><!--{assign var=level value=$arrReview[cnt].recommend_level}--><!--{$arrRECOMMEND[$level]|h}--></span>

<!--{$arrReview[cnt].comment|h|nl2br}--></li>
</ul>
</ul>
<ul><!--{/section}--></ul>
<pre>
<!--{/if}-->

▼変更後

<!--{if count($arrReview) > 0}-->

<script type="text/javascript">// <![CDATA[
$(function(){
$("a.tab").click(function(){
$(".activo").removeClass("activo");
$(this).addClass("activo");
$(".contenido").hide('slow');
var muestra = $(this).attr("title");
$("#"+muestra).show('slow');
});
});
// ]]></script></pre>
<div id="tab_contenedor">
<div id="titulos_waku">
<ul class="titulos">
<ul class="titulos">
	<li><a class="tab activo" title="voice1">1~5</a></li>
</ul>
</ul>
<ul class="titulos">
<ul class="titulos"><!--{foreach from=$arrReview key=myId item=i}--></ul>
</ul>
<ul class="titulos">
<ul class="titulos"><!--{assign var=rank value=$myId+1}--></ul>
</ul>
<ul class="titulos">
<ul class="titulos"><!--{if $rank > 5 && $rank%5 == 1}--></ul>
</ul>
<ul class="titulos">
<ul class="titulos">
	<li><a class="tab" title="voice<!--{$rank}-->"><!--{$rank}-->~<!--{$rank+4}--></a></li>
</ul>
</ul>
<ul class="titulos">
<ul class="titulos"><!--{/if}--></ul>
</ul>
<ul class="titulos"><!--{/foreach}--></ul>
</div>
<div id="tab_contenido">
<ul>
<ul><!--{foreach from=$arrReview key=myId item=i}--></ul>
</ul>
<ul>
<ul><!--{assign var=rank value=$myId+1}--></ul>
</ul>
<ul>
<ul><!--{if $rank%5 == 1}--></ul>
</ul>
<div id="voice<!--{$rank}-->" class="contenido"><!--★-->
<!--{/if}-->
<ul>
	<li>
<!--{$i.title|h}-->

<!--{$i.create_date|sfDispDBDate:false}--> 投稿者:<!--{if $i.reviewer_url}--><a href="<!--{$i.reviewer_url}-->" target="_blank"><!--{$i.reviewer_name|h}--></a><!--{else}--><!--{$i.reviewer_name|h}--><!--{/if}--> おすすめレベル:<span class="recommend_level"><!--{assign var=level value=$i.recommend_level}--><!--{$arrRECOMMEND[$level]|h}--></span>

<!--{$i.comment|h|nl2br}--></li>
</ul>
<!--{if $rank%5 == 0}--></div>
<ul>
<ul><!--★--></ul>
</ul>
<ul>
<ul><!--{/if}--></ul>
</ul>
<ul><!--{/foreach}--></ul>
</div>
<!--/tab_contenido--></div>
<pre>
<!--/tab_contenedor-->

<!--{/if}-->

(3)CSSに追加する
■html/user_data/packages/default/css/contents.css
お客様の声の記述箇所に追加する

div#customervoice_area #titulos_waku {
border:#999 1px solid;
border-left:#999 10px solid;
padding:5px;
background-color: #F7F7F7;
margin-bottom:15px;
}
div#customervoice_area .titulos {
}
div#customervoice_area .titulos li {
display: inline;
background: none !important;
}
div#customervoice_area .titulos a {
padding:0 4px;
border:#999 1px solid;
background-color:#FFF;
cursor:pointer;
color:#69C;
}
div#customervoice_area .titulos a:hover {
color:#F30;
}
div#customervoice_area .titulos a.activo {
background-color:#eee;
color:#000;
}