EC-CUBEでオススメ商品を3D回転させる！！

変更ファイル
\data\Smarty\templates\default\bloc\best5.tpl
\html\user_data\packages\default\css\index.css
追加ファイル
\html\user_data\packages\default\js\ mootools-1.2.4-core-nc.js
\html\user_data\packages\default\js\mooVRotatingMenu.js

１． mooVRotatingMenu.jsはmootoolsのプラグインで、mootools.jsが必要です。mooVRotatingMenu.jsとmootools-1.2.4-core-nc.jsをダウンロードします。

mootools.jsダウンロード
mooVRotatingMenu.jsダウン ロード

２． ダウンロードしたファイルを\html\user_data\packages\default\js\のフォルダへ追加します。

３． 次にオススメ商品のブロック(\data\Smarty\templates\default\bloc\best5.tpl)をのコードを以下のように変更します。

<!-- 画像回転用 -->
<script src="<!--{$TPL_DIR}-->js/mootools-1.2.4-core-nc.js" type="text/javascript"></script>
<script src="<!--{$TPL_DIR}-->js/mooVRotatingMenu.js" type="text/javascript"></script>
<!-- END -->
<!--{if count($arrBestProducts) > 0}-->
<div id="centerarea">
<div id="recomend_titlearea">
<h2>推荐信息</h2>
</div>
<div id="recomendarea">
<!-- 画像回転用 -->
<script type="text/javascript">
window.addEvent('domready', function(){
//menu horizontal
var myHorizontalToto = new mooVRotatingMenu($('rotatingMenu'), $$('.mooRotate'), {
maxWidth: 125,
maxHeight: 125
});
});
</script>
<!-- END -->
<ul id="rotatingMenu">
<!--{section name=cnt loop=$arrBestProducts}-->
<li class="mooRotate">
<!--{if $arrBestProducts[cnt].main_list_image != ""}-->
<!--{assign var=image_path value="`$arrBestProducts[cnt].main_list_image`"}-->
<!--{else}-->
<!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}-->
<!--{/if}-->
<a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[cnt].product_id}-->">
<img src="<!--{$smarty.const.SITE_URL}-->resize_image.php?image=<!--{$image_path
sfRmDupSlash}-->&width=125&height=125" alt="<!--{$arrBestProducts[cnt].name
escape}-->" title="<!--{$arrBestProducts[cnt].name
escape}-->
<!--{assign var=price01 value=`$arrBestProducts[cnt].price01_min`}-->
<!--{assign var=price02 value=`$arrBestProducts[cnt].price02_min`}-->
<!--{if $price02 == ""}-->
<!--{$price01
sfPreTax:$arrInfo.tax:$arrInfo.tax_rule
number_format}-->
<!--{else}-->
<!--{$price02
sfPreTax:$arrInfo.tax:$arrInfo.tax_rule
number_format}-->
<!--{/if}-->元

" />
</a>
</li>
<!--{/section}-->
</ul>
</div>
</div>
<!--{/if}-->

４． 次に\html\user_data\packages\default\css\index.cssに以下のようにスタイルを設定します。

/*お気に入り商品3D回転
----------------------------------------------- */
#rotatingMenu {
width: 550px;
height: 200px;
position: relative;
}
#rotatingMenu .mooRotate a {
display: block;
width: 125px;
height: 125px;
}
/* recomendarea
----------------------------------------------- */
div#recomendarea {
margin: 0 auto;
font-size: 80%;
float: left;
width: 550px;
height:470px;
padding: 10px 10px 10px 10px;
border-right:solid 1px #ccc;
border-left:solid 1px #ccc;
border-bottom:solid 1px #ccc;
background-image: url(../image/best5_back.jpg);
}

div#recomend_titlearea{
width: 570px;
height:auto;
background: url("../image/titleback.gif") repeat-x;
border-top: solid 1px #ccc;
border-right:solid 1px #ccc;
border-left:solid 1px #ccc;
border-bottom:solid 1px #999999;
margin-top:15px;
}
div#recomend_titlearea h2{
padding: 0 0 0 15px;
}

以上でオススメ商品が３Ｄ回転します。