EC CUEB(2.11.4)にレビュー一覧ブロック作成｜日々の覚書…日常のことも少しだけ

スポンサードリンク

前回、レビュー一覧を作成したので

ブロックでトップページに表示できるようにしました。

トップページに一覧表示されると

見やすくなるしユーザーにも気付きやすいですからね。

スポンサードリンク

html/frontparts/bloc/review.php を新規作成

【html/frontparts/bloc】の場所に【review.php】を作成します。

中身は下記の内容です。

// {{{ requires
require_once realpath(dirname(__FILE__)) . '/../../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Review_Ex.php';

// }}}
// {{{ generate page

$objPage = new LC_Page_FrontParts_BLoc_Review_Ex();
$objPage->blocItems = $params['items'];
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>

data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Review_Ex.php を新規作成

次に【data/class_extends/page_extends/frontparts/bloc】の場所に

【LC_Page_FrontParts_Bloc_Review_Ex.php】を作成します。

中身は下記の内容です。

// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Review.php';

/**
 * Review のページクラス(拡張).
 *
 * LC_Page_FrontParts_Bloc_Review をカスタマイズする場合はこのクラスを編集する.
 *
 * @package Page
 */
class LC_Page_FrontParts_Bloc_Review_Ex extends LC_Page_FrontParts_Bloc_Review {

// }}}
 // {{{ functions

/**
 * Page を初期化する.
 *
 * @return void
 */
 function init() {
 parent::init();
 }

/**
 * Page のプロセス.
 *
 * @return void
 */
 function process() {
 parent::process();
 }

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

スポンサードリンク

data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Review.php を新規作成

// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php';

/**
 * Review のページクラス.
 *
 * @package Page
 */
class LC_Page_FrontParts_Bloc_Review extends LC_Page_FrontParts_Bloc {

// }}}
 // {{{ functions

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

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

/**
 * Page のアクション.
 *
 * @return void
 */
 function action() {
 //レビュー情報の取得
 $this->arrReview = $this->lfGetReviewData();
 }
 /**
 * デストラクタ.
 *
 * @return void
 */
 function destroy() {
 parent::destroy();
 }

/**
 * レビュー検索.
 *
 * @return array $arrReview 検索結果配列
 */
 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 LIMIT 0,5";
 $arrReview = $objQuery->select($col, $from, $where);
 return $arrReview;
 }
}

今回はトップページに表示させるので

レビューを全件も表示しても見にくいだけなので

LIMITを使い5件のみの表示にしました。

data/Smarty/templates/default/frontparts/bloc/review.tpl を新規作成

そして【data/Smarty/templates/default/frontparts/bloc】の場所に

【review.tpl】を作成します。

中身は下記の内容です。

<div id="review_voice_area">
<pre><h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_product_voice.jpg" alt="この商品に対するお客様の声" /></h2></pre>
<div id="voice_box">
 <!--{if count($arrReview) > 0}-->
 <!--{section name=cnt loop=$arrReview}-->
 <div class="review_border clearfix">
 <div class="item_image">
 <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrReview[cnt].main_list_image|h}-->" alt="<!--{$arrReview[cnt].name}-->" />
 </div>
 <div class="voice_box">
 <p class="item_name"><!--{$arrReview[cnt].name|h}--></p>
 <p>
 <span class="recommend_level">
 <!--{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 class="coment_title"><!--{$arrReview[cnt].title|h}--></span>
 </p>
 <p><span class="coment_men">投稿者：<!--{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 class="coment_date">(<!--{$arrReview[cnt].create_date|sfDispDBDate:false}-->)</span></p>
 <p class="voice_comment"><!--{$arrReview[cnt].comment|h|nl2br}--></p>
 </div>
 </div>
 <!--{/section}-->
 <!--{/if}-->
 </div>
</div>

スポンサードリンク

review.cssファイルを作成

スタイル用に【review.css】を作成します。

中身は下記の内容です。

※スタイルは環境によって違うのでカスタマイズしてください。

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

データベースに新規ブロックを登録します

【dtb_bloc】テーブル内にデータを入れます。

device_type_id 10(←PCは10)

bloc_id 12(←ブロックidで開いている番号)
bloc_name レビュー
tpl_path review.tpl
filename review
create_date now()
update_date now()
php_path frontparts/bloc/review.php
deletable_flg 0(管理画面で削除できないようにするため。削除可能にするなら1)

PC表示のみで作成しているので

他のデバイスのことは考えていませんでした。

スポンサードリンク