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

「この商品に対するお客様の声」のレビュー書き込みの最大数の設定をはずし、5件ごとにページング機能をつける。
jquery.min.jsのみで動作するので、新規ファイルは必要なし。

(1)フロントレビュー書き込み最大数を設定しないようにする。管理画面「システム設定>パラメーター設定」のREVIEW_REGIST_MAX(フロントレビュー書き込み最大数)を無視する。
 ■data/class/pages/products/LC_Page_Products_Detail.php

 「LIMIT   . REVIEW_REGIST_MAX;」←削除

//商品ごとのレビュー情報を取得する

$where = "del_flg = 0 AND status = 1 AND product_id = ? ORDER BY create_date DESC LIMIT " . REVIEW_REGIST_MAX;
↓
$where = "del_flg = 0 AND status = 1 AND product_id = ? ORDER BY create_date DESC ";

 ■data/Smarty/templates/default/products/detail.tpl
下記コードを削除

<!--{if count($arrReview) < $smarty.const.REVIEW_REGIST_MAX}-->
・
・
・
<!--{/if}-->

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

▼変更前

<!--{if count($arrReview) > 0}-->
<ul>
<!--{section name=cnt loop=$arrReview}-->
<li>
<p class="voicetitle"><!--{$arrReview[cnt].title|h}--></p>
<p class="voicetitle"><!--{$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><!--{assign var=level value=$arrReview[cnt].recommend_level}--><!--{$arrRECOMMEND[$level]|h}--></span></p>
<p class="voicetitle"><!--{$arrReview[cnt].comment|h|nl2br}--></p>
</li>
<!--{/section}-->
</ul>
<!--{/if}-->

▼変更後

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

<script type="text/javascript">
 $(function(){
 $("a.tab").click(function(){
 $(".activo").removeClass("activo");
 $(this).addClass("activo");
 $(".contenido").hide('slow');
 var muestra = $(this).attr("title");
 $("#"+muestra).show('slow');
 });
 });
 </script>

<div id="tab_contenedor">

<div id="titulos_waku">
 <ul class="titulos">
 <li><a title="voice1" class="tab activo">1~5</a></li>
 <!--{foreach from=$arrReview key=myId item=i}-->
 <!--{assign var=rank value=$myId+1}-->
 <!--{if $rank > 5 && $rank%5 == 1}-->
 <li><a title="voice<!--{$rank}-->" class="tab"><!--{$rank}-->~<!--{$rank+4}--></a></li>
 <!--{/if}-->
 <!--{/foreach}-->
 </ul>
 </div>

<style TYPE="text/css">
 <!--
 <!--{foreach from=$arrReview key=myId item=i}-->
 <!--{assign var=rank value=$myId+1}-->
 <!--{if $rank > 5 && $rank%5 == 1}-->
 #voice<!--{$rank}--> {display:none;}
 <!--{/if}-->
 <!--{/foreach}-->
 -->
 </style>

<div id="tab_contenido">

<ul>
 <!--{foreach from=$arrReview key=myId item=i}-->
 <!--{assign var=rank value=$myId+1}-->
 <!--{if $rank%5 == 1}-->
 <div id="voice<!--{$rank}-->" class="contenido"><!--★-->
 <!--{/if}-->
 <li>
 <p class="voicetitle"><!--{$i.title|h}--></p>
 <p class="voicedate"><!--{$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></p>
 <p class="voicecomment"><!--{$i.comment|h|nl2br}--></p>
 </li>
 <!--{if $rank%5 == 0}-->
 </div><!--★-->
 <!--{/if}-->
 <!--{/foreach}-->
 </ul>

</div><!--/tab_contenido-->
 </div><!--/tab_contenedor-->

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

(3)CSSを書き換える
■html/user_data/packages/default/css/contents.css
お客様の声の記述箇所をすべて下記に変更する。


/* お客様の声
 ----------------------------------------------- */

div#customervoice_area {
 clear: both;
 padding: 0 0 0 0;
 }

div#customervoice_area h2 {
 border-top: solid 1px #f90;
 background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom;
 padding: 5px 0 8px 10px;
 font-size: 14px;
 margin-bottom:10px;
 }

div#customervoice_area .review_bloc {
 margin-bottom: 20px;
 padding: 10px;
 background:url(../img/background/review_bloc_bg.png);
 border: #999 1px solid;
 }

div#customervoice_area .review_bloc p {
 padding-top: 3px;
 margin-right: 10px;
 float: left;
 }

div#customervoice_area review_bloc .review_btn {
 float: right;
 width: 160px;
 }

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;
 }

div#customervoice_area ul li{
 padding-bottom: 15px;
 margin-bottom: 15px;
 background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
 }

div#customervoice_area .voicetitle {
 margin-bottom: 5px;
 color: #333;
 font-weight: bold;
 }

div#customervoice_area .voicedate {
 margin-bottom: 10px;
 }