「この商品に対するお客様の声」のレビュー書き込みを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=""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; }