2012年10月8日カテゴリー:

EC-CUBE2.12:「商品詳細ページその他のオススメ商品」の表示パターンを管理画面から変更する

管理画面>デザイン管理>PCに「おすすめ表示管理」ページを新規作成し、表示番号を選択することで、「その他のオススメ商品」の表示パターンを変更できるようにする。
「自動スライド」「縦2列横並び」「縦3列横並び」「縦4列横並び」の4パターンから選択できる。

▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから(facebookユーザーのみ)


(1)データベースに新しいテーブルを作成する

 テーブル(mtb_detailsonota_line)を作成する

【MySQL・PostgreSQL】

[php]
CREATE TABLE mtb_detailsonota_line (
id smallint,
name text,
rank smallint NOT NULL DEFAULT 0,
PRIMARY KEY (id)
);
[/php]

 テーブル(mtb_detailsonota_line)にデータを登録する。

[php]
INSERT INTO mtb_detailsonota_line (id, name, rank) VALUES (1, ‘1’, 0);
INSERT INTO mtb_detailsonota_line (id, name, rank) VALUES (2, ‘2’, 1);
INSERT INTO mtb_detailsonota_line (id, name, rank) VALUES (3, ‘3’, 2);
INSERT INTO mtb_detailsonota_line (id, name, rank) VALUES (4, ‘4’, 3)
[/php]

(2)データベース「dtb_baseinfo」テーブルにカラムを追加。

[php]
ALTER TABLE dtb_baseinfo ADD detailsonota_line smallint NOT NULL DEFAULT 2
[/php]

(3)管理画面用のページを新規作成

 ■html/admin/design/detailsonota_line.php

[php]
init();
$objPage->process();
?>
[/php]

 ■data/class_extends/page_extends/admin/design/LC_Page_Admin_Detailsub_Line_Ex.php.php

[php]

[/php]

 ■data/class/pages/admin/design/LC_Page_Admin_Detailsub_Line.php

[php]
tpl_mainpage = ‘design/detailsonota_line.tpl’;
$this->tpl_subno = ‘detailsonota_line’;
$this->tpl_mainno = ‘design’;
$masterData = new SC_DB_MasterData_Ex();
$this->arrLine = $masterData->getMasterData(‘mtb_detailsonota_line’);
$this->tpl_maintitle = ‘デザイン管理’;
$this->tpl_subtitle = ‘PC>商品詳細その他オススメ表示’;
}

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

/**
* Page のアクション.
*
* @return void
*/
function action() {
$objDb = new SC_Helper_DB_Ex();

$objFormParam = new SC_FormParam_Ex();
$this->lfInitParam($objFormParam);
$objFormParam->setParam($_POST);

$cnt = $objDb->sfGetBasisCount();
if ($cnt > 0) {
$this->tpl_mode = ‘update’;
} else {
$this->tpl_mode = ‘insert’;
}

if(!empty($_POST)) {
// 入力値の変換
$objFormParam->convParam();
$this->arrErr = $this->lfCheckError($objFormParam);

if(count($this->arrErr) == 0) {
switch($this->getMode()) {
case ‘update’:
$this->lfUpdateData($objFormParam->getHashArray()); // 既存編集
break;
case ‘insert’:
$this->lfInsertData($objFormParam->getHashArray()); // 新規作成
break;
default:
break;
}
// 再表示
$this->tpl_onload = “window.alert(‘商品詳細その他オススメ表示設定が完了しました。’);”;
}
} else {
$arrCol = $objFormParam->getKeyList(); // キー名一覧を取得
$col    = SC_Utils_Ex::sfGetCommaList($arrCol);
$arrRet = $objDb->sfGetBasisData(true, $col);
$objFormParam->setParam($arrRet);
}
$this->arrForm = $objFormParam->getFormParamList();
}

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

/* パラメーター情報の初期化 */
function lfInitParam(&$objFormParam) {
$objFormParam->addParam(“商品詳細その他オススメ表示”, “detailsonota_line”, INT_LEN, ‘n’, array(“MAX_LENGTH_CHECK”));
}

function lfUpdateData($sqlval) {
$sqlval[‘update_date’] = ‘CURRENT_TIMESTAMP’;
$objQuery =& SC_Query_Ex::getSingletonInstance();
// UPDATEの実行
$ret = $objQuery->update(“dtb_baseinfo”, $sqlval);
}

function lfInsertData($sqlval) {
$sqlval[‘update_date’] = ‘CURRENT_TIMESTAMP’;
$objQuery =& SC_Query_Ex::getSingletonInstance();
// INSERTの実行
$ret = $objQuery->insert(“dtb_baseinfo”, $sqlval);
}

/* 入力内容のチェック */
function lfCheckError(&$objFormParam) {
// 入力データを渡す。
$arrRet =  $objFormParam->getHashArray();
$objErr = new SC_CheckError_Ex($arrRet);
$objErr->arrErr = $objFormParam->checkError();

return $objErr->arrErr;
}
}
?>
[/php]

 ■data/Smarty/templates/admin/design/detailsonota_line.tpl

[php]

表示番号 background-color: ;” >
  • この内容で登録する
【表示番号 1】

スライド表示。

【表示番号 2】

縦2列で表示。 【表示番号 3】

縦3列で表示。 【表示番号 4】

縦4列で表示。

[/php]

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

[php]
 class=”on” id=”navi-design-detailsonota_line”>⑥ ■html/user_data/packages/admin/css/admin_contents.css
1205行あたり 「デザイン管理」の箇所に追加

[php]
/*おすすめ表示管理・商品一覧ページ表示管理・商品詳細ページサブ情報表示管理・商品詳細その他オススメ表示*/
#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;
}
[/php]

 管理画面用のイメージを追加
■html/user_data/packages/admin/img/designフォルダを作成し、下記イメージを置く。
上から、301.png 302.png 303.png 304.png


(4)フロントページを作成する。

 jQuery caroufredselを利用する。
http://caroufredsel.frebsite.nl/

■html/js/jquery.caroufredsel(追加)

■data/Smarty/templates/default/site_frame.tpl

[php]


[/php]

 ■data/Smarty/templates/default/detail.tpl

[php]


$(function() {

$('#carousel_detailsonota').carouFredSel({ align: false, items: 5, scroll: { items: 1, duration: 2000, pauseDuration: 0, easing: 'linear', pauseOnHover: 'immediate' } });

var $w = $(window); $w.bind('resize.example', function() { var nw = $w.width(); if (nw < 990) { nw = 990; } $('#carousel_detailsonota').width(nw * 3); $('#carousel_detailsonota').parent().width(nw); }).trigger('resize.example'); });



(税込):







[/php]

 ■html/user_data/packages/default/css/contents.css
商品部分はbloc.cssのおすすめ商品から切り離してあります。

に変更しているので、関連商品に関わるプラグインを導入した場合、動作しない可能性があります。

「関連商品」の部分をすべて書き換える。

[css]

/* 関連商品(商品部分はbloc.cssのおすすめ商品から切り離し、ここでの設定が反映されます。)
----------------------------------------------- */
/* 共通
----------------------------------------------- */
#relation_area {
clear: both;
padding: 35px 0 0 0;
}
#relation_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;
}
#relation_area .clear {
padding-top:10px;
margin-bottom:10px;
border-bottom:#eee 1px solid;
}
#relation_area .product_item h3 {
font-size: 100%;
font-weight: normal;
}
#relation_1,
#relation_2,
#relation_3,
#relation_4 {
padding-top:15px;
}
#relation_area .product_item .productImage img {
padding:3px;
border:#CCC 1px solid;
}

/*「販売価格(税込): 」という文言の表示・非表示*/
#relation_1 .sale_price .title {
display:none; /*「販売価格(税込): 」表示→display:inline; 非表示→display:none; */
}
#relation_2 .sale_price .title {
display:inline; /*「販売価格(税込): 」表示→display:inline; 非表示→display:none; */
}
#relation_3 .sale_price .title {
display:none; /*「販売価格(税込): 」表示→display:inline; 非表示→display:none; */
}
#relation_4 .sale_price .title {
display:none; /*「販売価格(税込): 」表示→display:inline; 非表示→display:none; */
}

/* 商品コメントの表示・非表示 */
#relation_1 .productContents .mini {
display:block; /*商品コメント 表示→display:block; 非表示→display:none; */
}
#relation_2 .productContents .mini {
display:block; /*商品コメント 表示→display:block; 非表示→display:none; */
}
#relation_3 .productContents .mini {
display:block; /*商品コメント 表示→display:block; 非表示→display:none; */
}
#relation_4 .productContents .mini {
display:none; /*商品コメント 表示→display:block; 非表示→display:none; */
}

/* 表示番号1 by jQuery.carouFredSel
----------------------------------------------- */
#relation_1 {
width:100%;
overflow:hidden;
}
#relation_1 #carousel_detailsonota div {
text-align: center;
width: 160px;
float: left;
position: relative;
}
#two_maincolumn_left #relation_1 #carousel_detailsonota div,
#two_maincolumn_right #relation_1 #carousel_detailsonota div {
width: 160px;
}
#one_maincolumn #relation_1 #carousel_detailsonota div,
#one_maincolumn #relation_1 #carousel_detailsonota div {
width: 156px;
}
#relation_1 #carousel_detailsonota div img {
padding:3px;
border:#CCC 1px solid;
}
#relation_1 #carousel_detailsonota div span {
display: none;
}
#relation_1 #carousel_detailsonota div:hover span {
background-color: #fff;
border:1px solid #999;
color: #333;
font-size: 11px;
display: inline-block;
width: 90px;
padding: 2px;
margin: 0 0 0 -50px;
position: absolute;
top:5px;
left: 50%;
border-radius: 3px;
}

/***** 表示番号2 *****/
#relation_2 .product_item {
float: left;
width: 46%;
margin-right:4%;
}
/* メインカラム用 2カラム時*/
#two_maincolumn_right #relation_2 .product_item .productImage,
#two_maincolumn_left #relation_2 .product_item .productImage {
float: left;
width: 20%;
}
#two_maincolumn_right #relation_2 .productContents,
#two_maincolumn_left #relation_2 .productContents {
float: right;
width: 75%;
}
/* メインカラム用 3カラム時*/
#three_maincolumn #relation_2 .product_item .productImage {
float: left;
width: 25%;
}
#three_maincolumn #relation_2 .productContents {
float: right;
width: 70%;
}

/***** 表示番号3 *****/
#relation_3 .product_item {
float: left;
width: 31%;
margin-right:2%;
}
/* メインカラム用 2カラム時*/
#two_maincolumn_right #relation_3 .product_item .productImage,
#two_maincolumn_left #relation_3 .product_item .productImage {
float: left;
width: 33%;
}
#two_maincolumn_right #relation_3 .productContents,
#two_maincolumn_left #relation_3 .productContents {
float: right;
width: 65%;
}
/* メインカラム用 3カラム時*/
#three_maincolumn #relation_3 .product_item .productImage {
float: left;
width: 40%;
}
#three_maincolumn #relation_3 .productContents {
float: right;
width: 55%;
}

/***** 表示番号4 *****/
#relation_4 .product_item {
float: left;
width: 23%;
margin-right:2%;
}
/* メインカラム用 2カラム時*/
#two_maincolumn_right #relation_4 .product_item .productImage,
#two_maincolumn_left #relation_4 .product_item .productImage {
float: left;
width: 45%;
}
#two_maincolumn_right #relation_4 .productContents,
#two_maincolumn_left #relation_4 .productContents {
float: right;
width: 53%;
}
/* メインカラム用 3カラム時*/
#three_maincolumn #relation_4 .product_item .productImage {
float: left;
width: 50%;
}
#three_maincolumn #relation_4 .productContents {
float: right;
width: 42%;
}
[/css]