前回、レビュー一覧を作成したので
ブロックでトップページに表示できるようにしました。
トップページに一覧表示されると
見やすくなるしユーザーにも気付きやすいですからね。
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表示のみで作成しているので
他のデバイスのことは考えていませんでした。
管理画面のページレイアウトでブロックを表示させたいところに追加する。
最後に管理画面でブロックを追加するだけです。
EC CUEB(2.11.4)にレビュー一覧ブロック作成のまとめ
パソコンのサイドバーでの表示のため
今回はCSSの設定をしています。
将来的にCSSは幅600ｐｘで考えていますので、
環境によって調整してください。
これで、トップページにレビューが表示させることができるようになったので
ファーストビューでお客さんの反応が見せられますね。
今回も下記のサイトを参考にさせて頂きました。
[EC-CUBE 2.11.4] レビュー一覧ブロック作成
リンク
リンク
