EC-CUBE：「おすすめ商品情報」の表示パターン

管理画面＞デザイン管理＞PCに「おすすめ表示管理」ページを新規作成し、表示番号を選択することで、「おすすめ商品情報」の表示パターンを変更できるようにする。

↓

（1）　データベースに新しいテーブルを作成する
①　マスターテーブルに追加
名前：mtb_line
フィールド数：3
↓
○フィールド：id　種別：smallint　NULL：not null
○フィールド：name　種別：text　デフォルト値：NULL　NULL：チェック
○フィールド：rank　種別：smallint　NULL：not null

②　管理画面＞システム設定＞マスターデータ管理＞mtb_line
以下を登録する。
ID：1　値：1
ID：2　値：2
ID：3　値：3
ID：4　値：4
ID：5　値：5

（2）「dtb_baseinfo」テーブルにフィールドを追加
フィールド：recommend_line
種別：SMALLINT
デフォルト値：0

（3）管理画面用のページを新規作成
①　■html/admin/design/recommend_line.php
②　■data/class_extends/page_extends/admin/design/LC_Page_Admin_Recommend_Line_Ex.php
③　■data/class/pages/admin/design/LC_Page_Admin_Recommend_Line.php
④　■data/Smarty/templates/admin/design/recommend_line.tpl

⑤　■data/Smarty/templates/admin/design/subnavi.tpl←リンクを追加

 <li<!--{if $tpl_subno == 'recommend_line'}--> class="on"<!--{/if}--> id="navi-design-recommend_line"><a href="<!--{$smarty.const.ROOT_URLPATH}--><!--{$smarty.const.ADMIN_DIR}-->design/recommend_line.php"><span>おすすめ表示管理</span></a></li>

⑥　■html/user_data/packages/admin/css/admin_contents.css
1205行あたり　「デザイン管理」の箇所に追加

 /*おすすめ表示管理・商品一覧ページ表示管理*/
 #design .image_area {
 clear:both;
 border:#CCC 1px solid;
 padding:10px;
 margin-bottom:15px;
 font-size:150%;
 }
 #design .image_area .text {
 float:left;
 width:150px;
 margin-right:10px;
 }
 #design .image_area .image {
 float:right;
 }
 .clear {
 clear:both;
 }

⑦　管理画面用のイメージを追加
■html/user_data/packages/admin/css/img/designフォルダを作成し、下記イメージを置く。
001.png　002.png　003.png　004.png　005.png

（4）■data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Recommend.phpに追加
「var $arrSiteInfo;」と「$this->arrSiteInfo = SC_Helper_DB_Ex::sfGetBasisData();」

 /** 店舗基本情報 */
     var $arrSiteInfo;

function init() {
 parent::init();
 $this->arrSiteInfo = SC_Helper_DB_Ex::sfGetBasisData();
 }

（5）■data/Smarty/templates/default/frontparts/bloc/recommend.tplを変更

（6）■html/user_data/packages/default/css/bloc.css
①　100行目あたり

 /* タイトルの背景 オレンジ */
 #recommend_area h2 ,
 ↓
 /* タイトルの背景 オレンジ */
 #recommend_area0 h2 ,#recommend_area1 h2 ,#recommend_area2 h2 ,#recommend_area3 h2 ,#recommend_area4 h2 ,#recommend_area5 h2 ,

②　「▼おすすめ商品」の箇所をすべて以下に書き換え（「商品詳細ページの関連商品」部分を切り離しcontents.cssに移動）
こちら

（7）■html/user_data/packages/default/css/contents.css
bloc.cssの「商品詳細ページの関連商品」部分を切り離しcontents.cssに移動する。「関連商品」の箇所を下記に書き換える。

 /* 関連商品
 ----------------------------------------------- */
 div#whobought_area {
 clear: both;
 padding: 35px 0 0 0;
 }

div#whobought_area h2 {
 border-top: solid 1px #f90;
 background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom;
 padding: 5px 0 8px 10px;
 font-size: 14px;
 }

#whobought_area .whobought_bloc {
 margin-bottom: 10px;
 padding: 10px 0 10px;
 border: none;
 background: url("../img/background/line_dot_01.gif") repeat-x bottom;
 }

#whobought_area .whobought_bloc p {
 margin: 0 0 5px 0;
 }

#whobought .whobought_bloc img {
 margin: 0 5px 0 0;
 }

#whobought_area .whobought_bloc h3 {
 font-size: 100%;
 font-weight: normal;
 }

/* 画像 */
 #whobought_area .whobought_bloc .productImage {
 margin-bottom: 10px;
 float: left;
 width: 90px;
 }

/* 左右の振り分け */
 #whobought_area .whobought_bloc .whobought_left {
 float: left;
 width: 47.5%;
 }
 #whobought_area .whobought_bloc .whobought_right {
 float: right;
 width: 47.5%;
 }

/* 商品説明テキスト メインカラム用 2カラム時 */
 #two_maincolumn_right #whobought_area .whobought_bloc .productContents ,
 #two_maincolumn_left #whobought_area .whobought_bloc .productContents {
 float: right;
 width: 74%;
 }

/* 商品説明テキスト メインカラム用 3カラム時 */
 #three_maincolumn #whobought_area .whobought_bloc .productContents {
 float: right;
 width: 67%;
 }