EC-CUBE で amazon のカスタマレビューっぽい表示をやってみた。

EC-CUBEには商品の詳細ページに
「この商品に対するお客様の声」を表示する部分がある。

ここでは、お客様の声を投稿したり、表示することができるのだが
ちょっと物足りない。というか寂しい。

ということで、今回はamazonのカスタマレビューに表示されている
統計情報を表示してみることにしてみました。

参考にするのはこの部分。

で、実際に表示するのはこんな感じ。

グラフ表示については、できるだけ画像を使わない方法を採用しました。
なので、配色の変更などはCSSをいじるだけでOK。

編集したファイル

/data/class/pages/products/LC_Page_Products_Detail.php
/html/user_data/packages/default/detail.tpl
/html/user_data/packages/default/css/products.css

※今回の改造では、モバイルへの対応は行っていません。

/data/class/pages/products/LC_Page_Products_Detail.php

お客様の声の統計情報を取得する関数を追加。
場所は、lfGetReviewData関数の下。

/*
 *	レビュー情報の統計を取得する。
 */
function lfGetReviewInfoData($arrReview) {
	$arrReviewInfo = array();
	
	$arrReviewInfo['count'] = count($arrReview);	// レビュー数
	$arrReviewInfo['level'] = array();
	$offset = 5;
	for ($i=0; $i < 5; $i++) {
		$tmp = array();
		$tmp['name'] = $offset - $i;
		$tmp['value'] = 0;
		array_push($arrReviewInfo['level'], $tmp);
	}
	
	$sum = 0;
	foreach ($arrReview as $item) {
		$arrReviewInfo['level'][$offset-$item['recommend_level']]['value']++;	// レベルごとの合計
		$sum += $item['recommend_level'];
	}
	
	$avg = $sum / $arrReviewInfo['count'];
	$arrReviewInfo['average'] = round($avg, 1);	// 平均(小数点第1位)
	
	return $arrReviewInfo;
}

追加した関数をprocess内で呼び出す。
240行目くらい。

// 入力情報を渡す
$this->arrForm = $this->objFormParam->getFormParamList();
// レビュー情報の取得
$this->arrReview = $this->lfGetReviewData($tmp_id);
// レビュー統計情報の取得
$this->arrReviewInfo = $this->lfGetReviewInfoData($this->arrReview); //←これを追加

/html/user_data/packages/default/detail.tpl

お客様の声を表示する先頭部分に追加する。

<!--{* レビュー統計情報 ここから *}-->
<div id="customervoiceinfoarea">
	<div class="info">
		<span class="infol">評価数：<!--{$arrReviewInfo.count}-->人</span>
		<span class="infor">おすすめ度：<!--{$arrReviewInfo.average|string_format:"%.1f"}--></span>
	</div>
	<div class="chart">
	<!--{foreach name=cnt from=$arrReviewInfo.level item=item}-->
		<!--{math equation="(x / y) * z" x=$item.value y=$arrReviewInfo.count z=100 assign=value}-->
		<dl>
			<dt><!--{$arrRECOMMEND[$item.name]|escape}--></dt>
			<!--{if 0 < $value}-->
				<dd><p style="width:<!--{$value|round:0}-->px;"><span><!--{$item.value}-->人</span></p></dd>
			<!--{else}-->
				<dd><p class="isnull"><span>&nbsp;</span></p></dd>
			<!--{/if}-->
		</dl>
	<!--{/foreach}-->
	</div>
</div>
<!--{* レビュー統計情報 ここまで *}-->

/html/user_data/packages/default/css/products.css

お客様の声が書かれているところに追記。

/* レビュー統計情報
----------------------------------------------- */
div#customervoiceinfoarea { border:1px #ccc solid; width:210px; float:left;}

div#customervoiceinfoarea .title {background-color:#73be1e; color:white; padding:0px 10px; line-height:2em; text-align:center;}

div#customervoiceinfoarea .info {padding:0 5px; line-height:2em; border-bottom:1px #ccc solid; height:2em;}
div#customervoiceinfoarea .infol {float:left; text-align:left;}
div#customervoiceinfoarea .infor {float:right; text-align:right;}

div#customervoiceinfoarea .chart {background:#d5ebbb; padding:10px 10px 22px; margin:0 0 0px 0; }
div#customervoiceinfoarea .chart dl         {clear:both; padding:0; margin:0 0 2px 0; display:block;}
div#customervoiceinfoarea .chart dl dt      {float:left; padding:0; margin:0; display:block; color:#ff7500; font:normal 10px Verdana; width:60px;  text-align:right;}
div#customervoiceinfoarea .chart dl dd      {float:left; padding:0; margin:0 0 1px 10px; display:block; text-align:left; background:white; width:110px;}
div#customervoiceinfoarea .chart dl dd p    {margin:0; padding:0 5px; display:block; background:#73be1e; text-align:right;}
div#customervoiceinfoarea .chart dl dd span    {margin:0; padding:0; color:#fff !important; font:bold 10px Verdana; position:relative; text-decoration:none; display:block; cursor:default;}

div#customervoiceinfoarea .chart dl dd p.isnull    {margin:0; padding:0 5px; display:block; background:white; text-align:right;}