[/php]
(7)システム管理→マスターデータ管理
「mtb_status_image」の拡張子を、.gifから.pngに変更する。
(8)■html/user_data/packages/default/css/contents.css
▼商品一覧の箇所の一番最後に追加する。
[css]
/* 「商品一覧ページ」の表示パターンを管理画面から変更する
———————————————– */
/* 表示番号1~5共通 */
.list_area_1,
.list_area_2,
.list_area_3,
.list_area_4,
.list_area_5 {
position:relative;
}
.list_area_1 .listphoto .photo,
.list_area_2 .listphoto .photo,
.list_area_3 .listphoto .photo,
.list_area_4 .listphoto .photo,
.list_area_5 .listphoto .photo {
margin-bottom:5px;
}
.list_area_1 .listphoto .photo img,
.list_area_2 .listphoto .photo img,
.list_area_3 .listphoto .photo img,
.list_area_4 .listphoto .photo img,
.list_area_5 .listphoto .photo img {
border:#CCC 1px solid;
padding:3px;
}
.list_area_1 .listphoto h3.left,
.list_area_2 .listphoto h3.left,
.list_area_3 .listphoto h3.left,
.list_area_4 .listphoto h3.left,
.list_area_5 .listphoto h3.left {
padding:0 5px;
}
.list_area_1 .listphoto .detail_btn,
.list_area_2 .listphoto .detail_btn,
.list_area_3 .listphoto .detail_btn,
.list_area_4 .listphoto .detail_btn,
.list_area_5 .listphoto .detail_btn {
text-align:center;
padding:5px 0;
}
/*「販売価格(税込): 」という文言の表示・非表示*/
.list_area_1 .sale_price .title {
display:inline; /*「販売価格(税込): 」表示→display:inline; 非表示→display:none; */
}
.list_area_2 .sale_price .title {
display:inline; /*「販売価格(税込): 」表示→display:inline; 非表示→display:none; */
}
.list_area_3 .sale_price .title {
display:none; /*「販売価格(税込): 」表示→display:inline; 非表示→display:none; */
}
.list_area_4 .sale_price .title {
display:none; /*「販売価格(税込): 」表示→display:inline; 非表示→display:none; */
}
.list_area_5 .sale_price .title {
display:none; /*「販売価格(税込): 」表示→display:inline; 非表示→display:none; */
}
/* 商品コメントの表示・非表示 */
.list_area_1 .listcomment {
display:block; /*商品コメント 表示→display:block; 非表示→display:none; */
}
.list_area_2 .listcomment {
display:block; /*商品コメント 表示→display:block; 非表示→display:none; */
}
.list_area_3 .listcomment {
display:block; /*商品コメント 表示→display:block; 非表示→display:none; */
}
.list_area_4 .listcomment {
display:block; /*商品コメント 表示→display:block; 非表示→display:none; */
}
.list_area_5 .listcomment {
display:none; /*商品コメント 表示→display:block; 非表示→display:none; */
}
.list_area_itembottom {
border-bottom:#eee 1px solid;
margin-bottom:20px;
}
/***** 表示番号1 *****/
.list_area_1 {
margin-bottom:20px;
}
.list_area_1 h3.left {
display:none;
}
.list_area_1 div.listphoto {
float: left;
}
/* メインカラム用 1カラム時*/
#one_maincolumn .list_area_1 div.listrightbloc {
float: right;
width: 74%;
}
/* メインカラム用 2カラム時*/
#two_maincolumn_right .list_area_1 div.listrightbloc,
#two_maincolumn_left .list_area_1 div.listrightbloc {
float: right;
width: 75%;
}
/* メインカラム用 3カラム時*/
#three_maincolumn .list_area_1 div.listrightbloc {
float: right;
width: 68%;
}
/* カゴに入れる */
.list_area_1 div.listrightbloc .cartin {
margin: 0;
float :none;
}
.list_area_1 div.listrightbloc .cartin .quantity {
padding: 3px 10px 0 0;
width: 45%;
float :left;
text-align: right;
}
.list_area_1 div.listrightbloc .cartin .quantity .box {
width: 70px;
}
.list_area_1 div.listrightbloc .cartin_btn {
width: 110px;
float :left;
}
/***** 表示番号2 *****/
.list_area_2 {
margin-bottom:20px;
width:45%;
float:left;
margin-right:5%;
}
.list_area_2 h3.right {
display:none;
}
/* メインカラム用 1カラム時*/
#one_maincolumn .list_area_2 div.listrightbloc {
float: right;
width: 55%;
}
/* メインカラム用 2カラム時*/
.list_area_2 div.listphoto {
float: left;
width:40%
}
#two_maincolumn_right .list_area_2 div.listrightbloc,
#two_maincolumn_left .list_area_2 div.listrightbloc {
float: right;
width: 55%;
}
/* メインカラム用 3カラム時*/
#three_maincolumn .list_area_2 div.listrightbloc {
float: right;
width: 44%;
}
/* 価格 */
.list_area_2 .price_left {
display:none;
}
/* カゴに入れる */
.list_area_2 div.listrightbloc .cartin {
margin: 0;
float :none;
}
.list_area_2 div.listrightbloc .cartin .quantity {
padding: 3px 10px 5px 0;
width: 100%;
float:none;
text-align:center;
}
.list_area_2 div.listrightbloc .cartin .quantity .box {
width: 70px;
}
.list_area_2 div.listrightbloc .cartin_btn {
width: 110px;
float:none;
margin:0 auto;
}
/***** 表示番号3 *****/
.list_area_3 {
margin-bottom:20px;
width:30%;
float:left;
margin-right:3%;
}
.list_area_3 .status_icon {
position:absolute;
top:8px;
left:8px;
}
.list_area_3 .status_icon li {
margin-bottom:3px;
}
.list_area_3 div.listphoto {
float: none;
width:100%;
}
.list_area_3 h3.right {
display:none;
}
/* メインカラム用 1カラム時*/
#one_maincolumn .list_area_3 div.listrightbloc {
float: none;
width: 100%;
}
/* メインカラム用 2カラム時*/
#two_maincolumn_right .list_area_3 div.listrightbloc,
#two_maincolumn_left .list_area_3 div.listrightbloc {
float: none;
width: 100%;
}
/* メインカラム用 3カラム時*/
#three_maincolumn .list_area_3 div.listrightbloc {
float: none;
width: 100%;
}
#three_maincolumn .list_area_3 .listphoto .photo img {
width:167px;
}
/* 価格 */
.list_area_3 .price_left {
text-align:right;
}
.list_area_3 .price_right {
display:none;
}
/* 買い物かご */
.list_area_3 div.listrightbloc .cart_area {
width: 90%;
}
/* カゴに入れる */
.list_area_3 div.listrightbloc .cartin {
margin: 0;
float :none;
}
.list_area_3 div.listrightbloc .cartin .quantity {
padding: 3px 10px 5px 0;
width: 100%;
float:none;
text-align:center;
}
.list_area_3 div.listrightbloc .cartin .quantity .box {
width: 70px;
}
.list_area_3 div.listrightbloc .cartin_btn {
width: 110px;
float:none;
margin:0 auto;
}
/***** 表示番号4 *****/
.list_area_4 {
margin-bottom:20px;
width:22%;
float:left;
margin-right:3%;
}
.list_area_4 .status_icon {
position:absolute;
top:8px;
left:8px;
}
.list_area_4 .status_icon li {
margin-bottom:3px;
}
.list_area_4 div.listphoto {
float: none;
width:100%;
}
.list_area_4 h3.right {
display:none;
}
/* メインカラム用 1カラム時*/
#one_maincolumn .list_area_4 div.listrightbloc {
float: none;
width: 100%;
}
/* メインカラム用 2カラム時*/
#two_maincolumn_right .list_area_4 div.listrightbloc,
#two_maincolumn_left .list_area_4 div.listrightbloc {
float: none;
width: 100%;
}
/* メインカラム用 3カラム時*/
#three_maincolumn .list_area_4 div.listrightbloc {
float: none;
width: 100%;
}
#three_maincolumn .list_area_4 .listphoto .photo img {
width:120px;
}
/* 価格 */
.list_area_4 .price_left {
text-align:right;
}
.list_area_4 .price_right {
display:none;
}
/* 買い物かご */
.list_area_4 div.listrightbloc .cart_area {
width: 88%;
}
/* カゴに入れる */
.list_area_4 div.listrightbloc .cartin {
margin: 0;
float :none;
}
.list_area_4 div.listrightbloc .cartin .quantity {
padding: 3px 10px 5px 0;
width: 100%;
float:none;
text-align:center;
}
.list_area_4 div.listrightbloc .cartin .quantity .box {
width: 70px;
}
.list_area_4 div.listrightbloc .cartin_btn {
width: 110px;
float:none;
margin:0 auto;
}
/***** 表示番号5 *****/
.list_area_5 {
margin-bottom:20px;
width:17%;
float:left;
margin-right:3%;
padding:0;
}
.list_area_5 .status_icon {
position:absolute;
top:8px;
left:8px;
}
.list_area_5 .status_icon li {
margin-bottom:3px;
}
.list_area_5 div.listphoto {
float: none;
width:100%;
}
.list_area_5 h3.right {
display:none;
}
/* メインカラム用 1カラム時*/
#one_maincolumn .list_area_5 div.listrightbloc {
float: none;
width: 100%;
}
/* メインカラム用 2カラム時*/
.list_area_5 div.listphoto {
float: none;
width:100%;
}
#two_maincolumn_right .list_area_5 div.listrightbloc,
#two_maincolumn_left .list_area_5 div.listrightbloc {
float: none;
width: 100%;
}
/* メインカラム用 3カラム時*/
#three_maincolumn .list_area_5 div.listrightbloc {
float: none;
width: 100%;
}
#three_maincolumn .list_area_5 .listphoto .photo img {
width:100px;
}
/* 価格 */
.list_area_5 .price_left {
text-align:right;
}
.list_area_5 .price_right {
display:none;
}
/* 買い物かご */
.list_area_5 div.listrightbloc .cart_area {
width: 84%;
}
#three_maincolumn .list_area_5 div.listrightbloc .cart_area {
display:none;
}
/* カゴに入れる */
.list_area_5 div.listrightbloc .cartin {
margin: 0;
float :none;
}
.list_area_5 div.listrightbloc .cartin .quantity {
padding: 3px 10px 5px 0;
width: 100%;
float:none;
text-align:center;
}
.list_area_5 div.listrightbloc .cartin .quantity .box {
width: 70px;
}
.list_area_5 div.listrightbloc .cartin_btn {
width: 110px;
float:none;
margin:0 auto;
}
[/css]
管理画面>デザイン管理>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]