管理画面＞デザイン管理＞PCに「おすすめ表示管理」ページを新規作成し、表示番号を選択することで、「商品詳細ページのサブ情報」の表示パターンを変更できるようにする。「1列」「2列横並び」「スライド」の3パターンから選択する。
▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから（facebookユーザーのみ）
（1）データベースに新しいテーブルを作成する
① テーブル（mtb_detailsub_line）を作成する
【MySQL・PostgreSQL】
CREATE TABLE mtb_detailsub_line ( id smallint, name text, rank smallint NOT NULL DEFAULT 0, PRIMARY KEY (id) );
② テーブル（mtb_detailsub_line）にデータを登録する。
INSERT INTO mtb_detailsub_line (id, name, rank) VALUES (1, '1', 0); INSERT INTO mtb_detailsub_line (id, name, rank) VALUES (2, '2', 1); INSERT INTO mtb_detailsub_line (id, name, rank) VALUES (3, '3', 2)
（2）データベース「dtb_baseinfo」テーブルにカラムを追加。（ここに表示番号が登録される）
ALTER TABLE dtb_baseinfo ADD detailsub_line smallint NOT NULL DEFAULT 3
（3）管理画面用のページを新規作成
① ■html/admin/design/detailsub_line.php
<?php
// {{{ requires
require_once '../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/admin/design/LC_Page_Admin_Detailsub_Line_Ex.php';
// }}}
// {{{ generate page
$objPage = new LC_Page_Admin_Detailsub_Line_Ex();
register_shutdown_function(array($objPage, 'destroy'));
$objPage->init();
$objPage->process();
?>
② ■data/class_extends/page_extends/admin/design/LC_Page_Admin_Detailsub_Line_Ex.php.php
<?php
// {{{ requires
require_once CLASS_REALDIR . 'pages/admin/design/LC_Page_Admin_Detailsub_Line.php';
class LC_Page_Admin_Detailsub_Line_Ex extends LC_Page_Admin_Detailsub_Line {
// }}}
// {{{ functions
/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
}
/**
* Page のプロセス.
*
* @return void
*/
function process() {
parent::process();
}
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>
③ ■data/class/pages/admin/design/LC_Page_Admin_Detailsub_Line.php
<?php
// {{{ requires
require_once CLASS_EX_REALDIR . 'page_extends/admin/LC_Page_Admin_Ex.php';
class LC_Page_Admin_Detailsub_Line extends LC_Page_Admin_Ex {
// }}}
// {{{ functions
/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
$this->tpl_mainpage = 'design/detailsub_line.tpl';
$this->tpl_subno = 'detailsub_line';
$this->tpl_mainno = 'design';
$masterData = new SC_DB_MasterData_Ex();
$this->arrLine = $masterData->getMasterData('mtb_detailsub_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("商品詳細ページサブ情報表示管理", "detailsub_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;
}
}
?>
④ ■data/Smarty/templates/admin/design/detailsub_line.tpl
<form name="form1" id="form1" method="post" action="">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<input type="hidden" name="mode" value="<!--{$tpl_mode}-->" />
<div id="design" class="contents-main">
<table class="form">
<tr>
<th>表示番号</th>
<td>
<select class="top" name="detailsub_line" style="<!--{if $arrErr.line != ""}-->background-color: <!--{$smarty.const.ERR_COLOR}-->;<!--{/if}-->" >
<option value="" selected="selected">選択</option>
<!--{html_options options=$arrLine selected=$arrForm.detailsub_line}-->
</select>
</td>
</tr>
</tr>
</table>
<div class="btn-area">
<ul>
<li><a class="btn-action" href="javascript:;" onclick="fnFormModeSubmit('form1', '<!--{$tpl_mode}-->', '', ''); return false;"><span class="btn-next">この内容で登録する</span></a></li>
</ul>
</div>
<div class="image_area">
<div class="text">
<div class="red bold">【表示番号 1】</div><br />縦1列で表示。
</div>
<div class="image">
<img src="<!--{$TPL_URLPATH}-->img/design/201.png" alt="" />
</div>
<div class="clear"></div>
</div>
<div class="image_area">
<div class="text">
<div class="red bold">【表示番号 2】</div><br />縦2列で表示。
</div>
<div class="image">
<img src="<!--{$TPL_URLPATH}-->img/design/202.png" alt="" />
</div>
<div class="clear"></div>
</div>
<div class="image_area">
<div class="text">
<div class="red bold">【表示番号 3】</div><br />スライド表示。
</div>
<div class="image">
<img src="<!--{$TPL_URLPATH}-->img/design/203.png" alt="" />
</div>
<div class="clear"></div>
</div>
</div>
</form>
⑤ ■data/Smarty/templates/admin/design/subnavi.tpl←リンクを追加
<!--▼商品詳細サブ表示管理-->
<li<!--{if $tpl_subno == 'detailsub_line'}--> class="on"<!--{/if}--> id="navi-design-detailsub_line"><a href="<!--{$smarty.const.ROOT_URLPATH}--><!--{$smarty.const.ADMIN_DIR}-->design/detailsub_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/img/designフォルダを作成し、下記イメージを置く。
上から、201.png 202.png 203.png
（4）フロントページを作成する。
① jQuery caroufredselを利用する。
http://caroufredsel.frebsite.nl/
■html/js/jquery.caroufredsel（追加）
■data/Smarty/templates/default/site_frame.tpl
<!--caroufredsel-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.caroufredsel/jquery.carouFredSel-5.6.4.js"></script>
② ■data/Smarty/templates/default/detail.tpl
の箇所を書き換える。
▼▼本サイトの「faceboxからcolorboxに変更」カスタマイズを行っている場合
<!--▼サブコメント-->
<!--{assign var=detailsub_line value=$arrSiteInfo.detailsub_line|h}-->
<!-- ***** ▼表示番号1と2 ***** -->
<!--{if $detailsub_line == 1 || $detailsub_line == 0 || $detailsub_line == 2}-->
<!--{if $detailsub_line == 2}--><div id="detailsub_line2"><!--{/if}-->
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
<!--{assign var=ikey value="sub_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}-->
<div class="sub_area clearfix">
<h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3>
<!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
<!--▼サブ画像-->
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$ikey]|strlen >= 1}-->
<div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></div>
<div class="subphotoimg">
<!--{if $arrProduct[$lkey]|strlen >= 1}-->
<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="cbox" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion_on.gif', 'expansion_<!--{$lkey|h}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion.gif', 'expansion_<!--{$lkey|h}-->');" title="<!--{$arrProduct[$key]|h}-->" >
<!--{/if}-->
<!--{assign var=x value=$arrFile[$ikey].width}--><!--{assign var=y value=$arrFile[$ikey].height}-->
<!--{if $detailsub_line == 2}-->
<img src="<!--{$arrFile[$ikey].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="120" />
<!--{else}-->
<img src="<!--{$arrFile[$ikey].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="200" />
<!--{/if}-->
<!--{if $arrProduct[$lkey]|strlen >= 1}--></a><br />
<span class="mini">
<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="cbox" title="<!--{$arrProduct[$key]|h}-->">
画像を拡大する</a>
</span>
<!--{/if}-->
</div>
<!--{else}-->
<p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
<!--{/if}-->
<!--▲サブ画像-->
</div>
<!--{if $detailsub_line == 2}-->
<!--{if $smarty.section.cnt.iteration % 2 === 0}-->
<div class="clear"></div>
<!--{/if}-->
<!--{/if}-->
<!--{/if}-->
<!--{/section}-->
<!--{if $detailsub_line == 2}--></div><!--{/if}-->
<!--{/if}-->
<!-- ***** ▼表示番号3 ***** -->
<!--{if $detailsub_line == 3}-->
<script type="text/javascript">
$(function() {
$(window).bind('resize.example', function() {
$('#tabs_detailsub').carouFredSel({
circular: false,
items: 1,
auto: false,
pagination: {
container: '#pager_detailsub',
anchorBuilder: function( nr, item ) {
return '<a href="#">'+item.find('h4').text()+'</a>';
}
}
});
}).trigger('resize.example');
});
</script>
<!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}-->
<div id="detailsub_3">
<div id="pager_detailsub"></div>
<div id="tabs_detailsub">
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
<!--{assign var=ikey value="sub_image`$smarty.section.cnt.index+1`"}-->
<!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
<!--▼サブ画像-->
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$ikey]|strlen >= 1}-->
<div>
<table><tr><td>
<h4 style="display:none;"><!--★サブタイトル★--><!--{$arrProduct[$key]|mb_substr:0:10|h}--><!--{if $arrProduct[$key]|mb_strlen > 10}-->..<!--{/if}--></h4>
<h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3>
<!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}-->
</td><td class="image" width="200">
<!--{if $arrProduct[$lkey]|strlen >= 1}-->
<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="cbox" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion_on.gif', 'expansion_<!--{$lkey|h}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion.gif', 'expansion_<!--{$lkey|h}-->');" title="<!--{$arrProduct[$key]|h}-->" >
<!--{/if}-->
<img src="<!--{$arrFile[$ikey].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="200" />
<!--{if $arrProduct[$lkey]|strlen >= 1}--></a><br />
<span class="mini">
<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="cbox" title="<!--{$arrProduct[$key]|h}-->">
画像を拡大する</a>
</span>
<!--{/if}-->
</td></tr></table>
</div>
<!--{/if}-->
<!--▲サブ画像-->
<!--{/section}-->
</div>
</div>
<!--{/if}-->
<!--{/if}-->
<!--▲サブコメント-->
▼▼本サイトの「faceboxからcolorboxに変更」カスタマイズを行っていない場合は、下記（各4カ所ある）を変更する。
class="cbox"
↓
class="expansion"
title="<!--{$item.productsClass.name|h}-->"
↓
target="_blank"
③ ■html/user_data/packages/default/css/contents.css
「▼商品詳細」の部分の一番最後に追加する。
/* サブ情報
----------------------------------------------- */
/***** 共通 *****/
.sub_area .subphotoimg img {
padding:3px;
border:#CCC 1px solid;
}
/***** 表示番号1 *****/
#two_maincolumn_left div.subtext,
#two_maincolumn_right div.subtext {
width: 71%;
}
#two_maincolumn_left div.subphotoimg,
#two_maincolumn_right div.subphotoimg {
margin-right:17px;
}
#three_maincolumn div.subphotoimg {
margin-right:4px;
}
/***** 表示番号2 *****/
#two_maincolumn_left #detailsub_line2 div.subtext,
#two_maincolumn_right #detailsub_line2 div.subtext {
width: 60%;
}
#two_maincolumn_left #detailsub_line2 div.subphotoimg,
#two_maincolumn_right #detailsub_line2 div.subphotoimg {
width: 40%;
margin-right:0;
}
#three_maincolumn #detailsub_line2 div.subtext {
width: 50%;
}
#three_maincolumn #detailsub_line2 div.subphotoimg {
width: 50%;
margin-right:0;
}
#detailsub_line2 .sub_area {
width:47%;
float:left;
margin-right:3%;
}
/***** 表示番号3 *****/
#detailsub_3 table {
margin-top:0;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left:none;
border-right:none;
}
#detailsub_3 table td {
vertical-align:top;
border:none;
}
#detailsub_3 table td.image img {
padding:3px;
border:#CCC 1px solid;
}
#detailsub_3 #tabs_detailsub div {
width:760px; /*横幅を指定する必要有り*/
float: left;
overflow: hidden;
}
#three_maincolumn #detailsub_3 #tabs_detailsub div {
width:580px; /*横幅を指定する必要有り*/
}
#detailsub_3 #tabs_detailsub h3 {
line-height: 20px;
margin: 0 0 10px 0;
font-size:140%;
}
#detailsub_3 #pager_detailsub {
text-align: center;
}
#detailsub_3 #pager_detailsub a {
border: 1px solid transparent;
border-bottom: none;
border-left: none;
border-color: #ccc;
color: #999;
text-decoration: none;
display: inline-block;
padding: 10px 20px;
}
#detailsub_3 #pager_detailsub a:hover {
color: #666;
}
#detailsub_3 #pager_detailsub a:first-child {
border-left: 1px solid #ccc;
}
#detailsub_3 #pager_detailsub a.selected {
background-color: #F4F0EE;
color: #333;
}
