2012年10月7日カテゴリー:未分類

EC-CUBE2.12:「商品一覧ページ」の表示パターンを管理画面から変更する

管理画面>デザイン管理>PCに「商品一覧ページ表示管理」ページを新規作成し、表示番号を選択することで、「商品一覧ページ」の表示パターンを変更できるようにする。
「縦1列」から「縦5列横並び」までの5パターンから選択できる。

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

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

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

【MySQL・PostgreSQL】
[php]
CREATE TABLE mtb_list_line (
id smallint,
name text,
rank smallint NOT NULL DEFAULT 0,
PRIMARY KEY (id)
);
[/php]

 テーブル(mtb_list_line)にデータを登録する。
[php]
INSERT INTO mtb_list_line (id, name, rank) VALUES (1, ‘1’, 0);
INSERT INTO mtb_list_line (id, name, rank) VALUES (2, ‘2’, 1);
INSERT INTO mtb_list_line (id, name, rank) VALUES (3, ‘3’, 2);
INSERT INTO mtb_list_line (id, name, rank) VALUES (4, ‘4’, 3);
INSERT INTO mtb_list_line (id, name, rank) VALUES (5, ‘5’, 4)
[/php]

(2)データベース「dtb_baseinfo」テーブルにカラムを追加。(ここに表示番号が登録される)
[php]
ALTER TABLE dtb_baseinfo ADD listpage_line smallint NOT NULL DEFAULT 4
[/php]

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

 ■html/admin/design/listpage_line.php
[php]
init();
$objPage->process();
?>
[/php]

 ■data/class_extends/page_extends/admin/design/LC_Page_Admin_Listpage_Line_Ex.php
[php]

[/php]

 ■data/class/pages/admin/design/LC_Page_Admin_Listpage_Line.php
[php]
tpl_mainpage = ‘design/listpage_line.tpl’;
$this->tpl_subno = ‘listpage_line’;
$this->tpl_mainno = ‘design’;
$masterData = new SC_DB_MasterData_Ex();
$this->arrLine = $masterData->getMasterData(‘mtb_list_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(“商品一覧ページ表示管理”, “listpage_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/listpage_line.tpl
[php]

表示番号 background-color: ;” >
【表示番号 1】

縦1列で表示。

【表示番号 2】

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

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

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

縦5列で表示。

[/php]

 ■data/Smarty/templates/admin/design/subnavi.tpl←リンクを追加
[php]
 class=”on” id=”navi-design-listpage_line”>⑥ ■html/user_data/packages/admin/css/admin_contents.css
「デザイン管理」の箇所に追加
[css]
/*おすすめ表示管理・商品一覧ページ表示管理*/
#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;
}
[/css]

 管理画面用のイメージを追加
■html/user_data/packages/admin/css/img/designフォルダを作成し、下記イメージを置く。
上から、101.png 102.png 103.png 104.png 105.png

(4)「カゴに入れる」「商品詳細を見る」ボタンを新規作成する(110px×30px)
横並びの列数が増えると、列の幅が狭くなるため、ボタンの幅も狭くする必要がある。
■html/user_data/packages/default/img/button
左から、btn_cartin_mini.jpg btn_cartin_mini_on.jpg btn_detail_mini.jpg btn_detail_mini_on.jpg

   

(5)ステータスアイコンを変更する。
列の狭さに対応するため、商品画像と重ねることを考え、透過PNGで作成する。
■html/user_data/packages/default/img/icon
左から、ico_01.png ico_02.png ico_03.png ico_04.png ico_05.png

    

★アイコンのサイズを変更するので、detail.tplのサイズ指定を削除する。
[php]
(6)■data/Smarty/templates/default/products/list.tplを変更
ボタンをminiに変更
「商品名」のh3タグにclass=”right”を指定
「商品名」を画像の下にコピーして、class=”left”に変更。(class=”listphoto”要素内)
「商品詳細を見る」ボタンを③の商品名の下に移動。
「画像」を、要素で囲む。
「価格」に、class=”price_right”要素を追加。
「価格」を商品名(class=”left”)の下にコピーして、class=”price_left”に変更。
「商品ステータス」のimgタグから、 width=”60″ height=”17″を削除し、.gifを.pngに変更(マスターデータ)。
「横並びコード」を追加

[php]









  • 商品カテゴリ:
  • メーカー:
  • 商品名:




価格順

価格順
 

新着順

新着順

表示件数



件の商品がございます。

” action=”?” onsubmit=”return false;”>
_ clearfix”>
(税込):

“>



  • (税込):

    “>



    を入力して下さい。

    数量:


    申し訳ございませんが、只今品切れ中です。