EC CUEB(2.11.4)にレビュー一覧を追加

スポンサードリンク

商品につくレビュー（お客様の声）の一覧を表示させるページを作成しました。

レビュー（お客様の声）を表示させたいという

要望があったので、

カスタマイズしてみました。

スポンサードリンク

商品につくレビュー（お客様の声）の一覧の作成方法

レビュー用のファイルを準備

まず、管理画面にログインして、デザイン管理>PC>レイアウト設定 から、ページを新規入力します。

ファイル名を review_list.php とします。

作成したreview_list.tplに表示部分のコードを貼り付け

<div id="review_voice_area">
<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_product_voice.jpg" alt="この商品に対するお客様の声" /></h2>
<!--{if count($arrReview) > 0}-->
<!--{section name=cnt loop=$arrReview}-->
<div>
<div>
<img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrReview[cnt].main_list_image|h}-->" alt="<!--{$arrReview[cnt].name}-->" />
</div>
<div>
<p><!--{$arrReview[cnt].name|h}--></p>
<p>
<span>
<!--{strip}-->
<!--{assign var=level value=$arrReview[cnt].recommend_level}--><!--{$arrRECOMMEND[$level]|h}-->
<!--{math equation="x-y" x=5 y=$level assign=sa}-->
<!--{section name=i loop=$sa}-->
☆
<!--{/section}-->
<!--{/strip}-->
</span>
：<span><!--{$arrReview[cnt].title|h}--></span>
</p>
<p><span>投稿者：<!--{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><span>(<!--{$arrReview[cnt].create_date|sfDispDBDate:false}-->)</span></p>
<p><!--{$arrReview[cnt].comment|h|nl2br}--></p>
</div>
</div>
<p><a href="#review_voice_area">トップへ戻る</a></p>
<!--{/section}-->
</div>
<!--{/if}-->
</div>

そのままだと星の数が登録の分だけしか表示されないので

５個までを最大にして星の数を表示させています。

登録されていない星の分は白抜きの星で表示させています。

html/user_data/review_list.phpを修正する

<?php
require_once '../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/LC_Page_Ex.php';

/**
 * ユーザーカスタマイズ用のページクラス
 *
 * 管理画面から自動生成される
 *
 * @package Page
 */
class LC_Page_User extends LC_Page_Ex {

/** おすすめレベル */
 var $arrRECOMMEND;

/**
 * Page を初期化する.
 *
 * @return void
 */
 function init() {
 parent::init();
 $masterData = new SC_DB_MasterData_Ex();
 $this->arrRECOMMEND = $masterData->getMasterData("mtb_recommend");
 }

/**
 * Page のプロセス.
 *
 * @return void
 */
 function process() {
 parent::process();
 $this->action();
 $this->sendResponse();
 }

/**
 * Page のアクション.
 *
 * @return void
 */
 function action() {

//レビュー情報の取得
 $this->arrReview = $this->lfGetReviewData();
 }

/**
 * デストラクタ.
 *
 * @return void
 */
 function destroy() {
 parent::destroy();
 }

//商品ごとのレビュー情報を取得する
 function lfGetReviewData() {
 $objQuery =& SC_Query_Ex::getSingletonInstance();
 //商品ごとのレビュー情報を取得する
 $col = "r.create_date, r.reviewer_url, r.reviewer_name, r.recommend_level, r.title, r.comment, p.name, p.main_list_image";
 $from = " dtb_review AS r, dtb_products AS p";
 $where = " r.product_id = p.product_id AND r.del_flg = 0 AND r.status = 1 ORDER BY r.create_date DESC";
 $arrReview = $objQuery->select($col, $from, $where, $arrval);
 return $arrReview;
 }
}

$objPage = new LC_Page_User();
register_shutdown_function(array($objPage, 'destroy'));
$objPage->init();
$objPage->process();

今回は商品画像と商品名を表示させたいので

SQL文はdtb_productと連結して呼び出してます。

CSSでスタイルを調整する

</pre>
.item_image {
 width: 180px;
 text-align: center;
 float: left;
}

.voice_box {
 width: 390px;
 float: left;
}

.coment_title {
 color: #40220f;
 font-size: 16px;
 font-weight: bold;
}

.coment_men {
 font-size: 12px;
 color: #666;
}

.coment_date {
 font-size: 10px;
 color: #666;
}

.voice_comment {
 font-size: 14px;
}

.review_border {
 width: 570px;
 margin-top: 5px;
 margin-bottom: 5px;
 margin-left: 10px;
 padding-bottom: 10px;
 border-bottom: 1px dotted #666;
}

.review_back {
 text-align: right;
}

3カラムで作成しているサイトなので

レビューのボックスサイズは600pxで考えています。

CSSは環境によって変更してください。

あとは、html/user_data/review_list.php をブラウザから確認してみてください。

スポンサードリンク