管理画面＞デザイン管理＞PCに「おすすめ表示管理」ページを新規作成し、表示番号を選択することで、「おすすめ商品情報」の表示パターンを変更できるようにする。自動スライドから縦5列並びまでの5パターンから選択。2カラム、3カラム対応。
▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから（facebookユーザーのみ）
（1）データベースに新しいテーブルを作成する
① テーブル（mtb_recommend_line）を作成する
【MySQL・PostgreSQL】
CREATE TABLE mtb_recommend_line ( id smallint, name text, rank smallint NOT NULL DEFAULT 0, PRIMARY KEY (id) );
② テーブル（mtb_recommend_line）にデータを登録する。
INSERT INTO mtb_recommend_line (id, name, rank) VALUES (1, '1', 0); INSERT INTO mtb_recommend_line (id, name, rank) VALUES (2, '2', 1); INSERT INTO mtb_recommend_line (id, name, rank) VALUES (3, '3', 2); INSERT INTO mtb_recommend_line (id, name, rank) VALUES (4, '4', 3); INSERT INTO mtb_recommend_line (id, name, rank) VALUES (5, '5', 4)
（2）データベース「dtb_baseinfo」テーブルにカラムを追加。（ここに表示番号が登録される）
ALTER TABLE dtb_baseinfo ADD recommend_line smallint NOT NULL DEFAULT 2
（3）管理画面用のページを新規作成
① ■html/admin/design/recommend_line.php
<?php
// {{{ requires
require_once '../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/admin/design/LC_Page_Admin_Recommend_Line_Ex.php';
// }}}
// {{{ generate page
$objPage = new LC_Page_Admin_Recommend_Line_Ex();
register_shutdown_function(array($objPage, 'destroy'));
$objPage->init();
$objPage->process();
?>
② ■data/class_extends/page_extends/admin/design/LC_Page_Admin_Recommend_Line_Ex.php
<?php
// {{{ requires
require_once CLASS_REALDIR . 'pages/admin/design/LC_Page_Admin_Recommend_Line.php';
class LC_Page_Admin_Recommend_Line_Ex extends LC_Page_Admin_Recommend_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_Recommend_Line.php
<?php
// {{{ requires
require_once CLASS_EX_REALDIR . 'page_extends/admin/LC_Page_Admin_Ex.php';
class LC_Page_Admin_Recommend_Line extends LC_Page_Admin_Ex {
// }}}
// {{{ functions
/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
$this->tpl_mainpage = 'design/recommend_line.tpl';
$this->tpl_subno = 'recommend_line';
$this->tpl_mainno = 'design';
$masterData = new SC_DB_MasterData_Ex();
$this->arrLine = $masterData->getMasterData('mtb_recommend_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("おすすめ表示管理", "recommend_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/recommend_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="recommend_line" style="<!--{if $arrErr.line != ""}-->background-color: <!--{$smarty.const.ERR_COLOR}-->;<!--{/if}-->" >
<option value="" selected="selected">選択</option>
<!--{html_options options=$arrLine selected=$arrForm.recommend_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/001.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/002.png" alt="" />
</div>
<div class="clear"></div>
</div>
<div class="image_area">
<div class="text">
<div class="red bold">【表示番号 3】</div><br />縦3列で表示。
</div>
<div class="image">
<img src="<!--{$TPL_URLPATH}-->img/design/003.png" alt="" />
</div>
<div class="clear"></div>
</div>
<div class="image_area">
<div class="text">
<div class="red bold">【表示番号 4】</div><br />縦4列で表示。
</div>
<div class="image">
<img src="<!--{$TPL_URLPATH}-->img/design/004.png" alt="" />
</div>
<div class="clear"></div>
</div>
<div class="image_area">
<div class="text">
<div class="red bold">【表示番号 5】</div><br />縦5列で表示。
</div>
<div class="image">
<img src="<!--{$TPL_URLPATH}-->img/design/005.png" alt="" />
</div>
<div class="clear"></div>
</div>
</div>
</form>
⑤ ■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/img/designフォルダを作成し、下記イメージを置く。
上から、001.png 002.png 003.png 004.png 005.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>
（5）dtb_baseinfoから、表示番号を読み込めるようにする。
■data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Recommend.phpに追加
「Page を初期化する」の箇所を変更
▼変更前
function init() {
parent::init();
}
▼変更後
/** 店舗基本情報 */
var $arrSiteInfo;
function init() {
parent::init();
$this->arrSiteInfo = SC_Helper_DB_Ex::sfGetBasisData();
}
（6）■data/Smarty/templates/default/frontparts/bloc/recommend.tplを書き換え
<!--{if count($arrBestProducts) > 0}-->
<!--▼表示番号1のとき-->
<!--{if $arrSiteInfo.recommend_line == 1 || $arrSiteInfo.recommend_line == 0}-->
<script type="text/javascript">
$(function() {
$('#carousel_recommend').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_recommend').width(nw * 3);
$('#carousel_recommend').parent().width(nw);
}).trigger('resize.example');
});
</script>
<!--{/if}-->
<div class="block_outer clearfix">
<div id="recommend_area">
<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_recommend.jpg" alt="*" class="title_icon" /></h2>
<div class="block_body clearfix">
<!--▼表示番号1-->
<!--{if $arrSiteInfo.recommend_line == 1 || $arrSiteInfo.recommend_line == 0}-->
<div id="wrapper">
<div id="carousel_recommend">
<!--{foreach from=$arrBestProducts item=arrProduct name="recommend_products"}-->
<div>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}--><!--{if $smarty.const.STATIC_URL == true}-->.html<!--{/if}-->">
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->&width=100&height=100" alt="<!--{$arrProduct.name|h}-->" />
<span><!--{$arrProduct.name|h}--><br /><!--{$arrProduct.price02_min_inctax|number_format}--> 円</span>
</a>
</div>
<!--{/foreach}-->
</div>
</div>
<!--▼表示番号2～5-->
<!--{else}-->
<!--{foreach from=$arrBestProducts item=arrProduct name="recommend_products"}-->
<!--{assign var=key value=$arrSiteInfo.recommend_line}-->
<div class="pattern_<!--{$key}--> ">
<div class="product_item clearfix">
<div class="productImage">
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}--><!--{if $smarty.const.STATIC_URL == true}-->.html<!--{/if}-->">
<!--{if $key == 2}-->
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->&width=100&height=100" alt="<!--{$arrProduct.name|h}-->" />
<!--{elseif $key == 3}-->
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_image|sfNoImageMainList|h}-->&width=160&height=160" alt="<!--{$arrProduct.name|h}-->" />
<!--{elseif $key == 4}-->
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->&width=125&height=125" alt="<!--{$arrProduct.name|h}-->" />
<!--{elseif $key == 5}-->
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->&width=100&height=100" alt="<!--{$arrProduct.name|h}-->" />
<!--{/if}-->
</a>
</div>
<div class="productContents">
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}--><!--{if $smarty.const.STATIC_URL == true}-->.html<!--{/if}-->"><!--{$arrProduct.name|h}--></a>
</h3>
<p class="sale_price">
<span class="title"><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)： </span><span class="price"><!--{$arrProduct.price02_min_inctax|number_format}--> 円</span>
</p>
<p class="mini comment"><!--{$arrProduct.comment|h|nl2br}--></p>
</div>
</div>
</div>
<!--{if $smarty.foreach.recommend_products.iteration % $key === 0}-->
<div class="clear"></div>
<!--{/if}-->
<!--{/foreach}-->
<!--{/if}-->
</div>
</div>
</div>
<div class="clear"></div>
<!--{/if}-->
（7）■html/user_data/packages/default/css/bloc.css
「▼おすすめ商品」の箇所（最下部）に追加
/* ▼「おすすめ商品情報」の表示パターンを管理画面から変更する
----------------------------------------------- */
/* 表示番号1 by jQuery.carouFredSel
----------------------------------------------- */
#recommend_area #wrapper {
width:100%;
overflow:hidden;
}
#recommend_area #carousel_recommend div {
text-align: center;
width: 116px;
float: left;
position: relative;
}
#two_maincolumn_left #recommend_area #carousel_recommend div,
#two_maincolumn_right #recommend_area #carousel_recommend div {
width: 152px;
}
#one_maincolumn #recommend_area #carousel_recommend div,
#one_maincolumn #recommend_area #carousel_recommend div {
width: 156px;
}
#recommend_area #carousel_recommend div img {
border: none;
}
#recommend_area #carousel_recommend div span {
display: none;
}
#recommend_area #carousel_recommend 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～5共通
----------------------------------------------- */
#recommend_area .block_body .productImage img {
border:#CCC 1px solid;
padding:3px;
}
#recommend_area .pattern_2 .sale_price .title {
display:inherit; /*「販売価格(税込)： 」表示→display:inherit; 非表示→display:none; */
}
#recommend_area .pattern_3 .sale_price .title {
display:none; /*「販売価格(税込)： 」表示→display:inherit; 非表示→display:none; */
}
#recommend_area .pattern_4 .sale_price .title {
display:none; /*「販売価格(税込)： 」表示→display:inherit; 非表示→display:none; */
}
#recommend_area .pattern_5 .sale_price .title {
display:none; /*「販売価格(税込)： 」表示→display:inherit; 非表示→display:none; */
}
#recommend_area .pattern_2 p.comment {
display:inherit; /*商品コメント 表示→display:inherit; 非表示→display:none; */
}
#recommend_area .pattern_3 p.comment {
display:inherit; /*商品コメント 表示→display:inherit; 非表示→display:none; */
}
#recommend_area .pattern_4 p.comment {
display:inherit; /*商品コメント 表示→display:inherit; 非表示→display:none; */
}
#recommend_area .pattern_5 p.comment {
display:inherit; /*商品コメント 表示→display:inherit; 非表示→display:none; */
}
/* 表示番号2
----------------------------------------------- */
#one_maincolumn #recommend_area .block_body .pattern_2 .productContents {
width: 68%;
}
#two_maincolumn_right #recommend_area .block_body .pattern_2 .productContents,
#two_maincolumn_left #recommend_area .block_body .pattern_2 .productContents {
width: 68%;
}
#three_maincolumn #recommend_area .block_body .pattern_2 .productContents {
width: 58%;
}
/* 表示番号3
----------------------------------------------- */
#three_maincolumn #recommend_area .block_body .pattern_3 .productImage,
#recommend_area .block_body .pattern_3 .productImage,
#two_maincolumn_left #recommend_area .block_body .pattern_3 .productImage,
#two_maincolumn_right #recommend_area .block_body .pattern_3 .productImage,
#one_maincolumn #recommend_area .block_body .pattern_3 .productImage {
margin-bottom:5px;
}
#three_maincolumn #recommend_area .block_body .pattern_3 .productImage,
#three_maincolumn #recommend_area .block_body .pattern_3 .productContents,
#two_maincolumn_left #recommend_area .block_body .pattern_3 .productImage,
#two_maincolumn_left #recommend_area .block_body .pattern_3 .productContents,
#two_maincolumn_right #recommend_area .block_body .pattern_3 .productImage,
#two_maincolumn_right #recommend_area .block_body .pattern_3 .productContents,
#one_maincolumn #recommend_area .block_body .pattern_3 .productImage,
#one_maincolumn #recommend_area .block_body .pattern_3 .productContents {
float:none;
width:160px;
margin:0 auto;
}
#recommend_area .pattern_3 .product_item {
width:31%;
margin-bottom:15px;
}
#recommend_area .pattern_3 .sale_price {
text-align:center;
}
/* 表示番号4
----------------------------------------------- */
#three_maincolumn #recommend_area .block_body .pattern_4 .productImage,
#recommend_area .block_body .pattern_4 .productImage,
#two_maincolumn_left #recommend_area .block_body .pattern_4 .productImage,
#two_maincolumn_right #recommend_area .block_body .pattern_4 .productImage,
#one_maincolumn #recommend_area .block_body .pattern_4 .productImage {
margin-bottom:5px;
}
#three_maincolumn #recommend_area .block_body .pattern_4 .productImage,
#three_maincolumn #recommend_area .block_body .pattern_4 .productContents,
#two_maincolumn_left #recommend_area .block_body .pattern_4 .productImage,
#two_maincolumn_left #recommend_area .block_body .pattern_4 .productContents,
#two_maincolumn_right #recommend_area .block_body .pattern_4 .productImage,
#two_maincolumn_right #recommend_area .block_body .pattern_4 .productContents,
#one_maincolumn #recommend_area .block_body .pattern_4 .productImage,
#one_maincolumn #recommend_area .block_body .pattern_4 .productContents {
float:none;
width:125px;
margin:0 auto;
}
#recommend_area .pattern_4 .product_item {
width:23%;
margin-bottom:15px;
}
#recommend_area .pattern_4 .sale_price {
text-align:center;
}
/* 表示番号5
----------------------------------------------- */
#three_maincolumn #recommend_area .block_body .pattern_5 .productImage,
#recommend_area .block_body .pattern_5 .productImage,
#two_maincolumn_left #recommend_area .block_body .pattern_5 .productImage,
#two_maincolumn_right #recommend_area .block_body .pattern_5 .productImage,
#one_maincolumn #recommend_area .block_body .pattern_5 .productImage {
margin-bottom:5px;
}
#three_maincolumn #recommend_area .block_body .pattern_5 .productImage,
#three_maincolumn #recommend_area .block_body .pattern_5 .productContents,
#two_maincolumn_left #recommend_area .block_body .pattern_5 .productImage,
#two_maincolumn_left #recommend_area .block_body .pattern_5 .productContents,
#two_maincolumn_right #recommend_area .block_body .pattern_5 .productImage,
#two_maincolumn_right #recommend_area .block_body .pattern_5 .productContents,
#one_maincolumn #recommend_area .block_body .pattern_5 .productImage,
#one_maincolumn #recommend_area .block_body .pattern_5 .productContents {
float:none;
width:100px;
margin:0 auto;
}
#recommend_area .pattern_5 .product_item {
width:18%;
margin-bottom:15px;
}
#recommend_area .pattern_5 .sale_price {
text-align:center;
}
