ITOBEN STYLE > EC-CUBEプラグイン > EC-CUBE2.12：jQueryでスライドするカテゴリーメニュー
2012年10月12日カテゴリー:

EC-CUBE2.12：jQueryでスライドするカテゴリーメニュー

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

指定した横幅内にスライドするアイテムの数が収まる場合は、スライドしない。ボタンも表示されない。

1　下記より、jQueryプラグイン「carouFredSel」をダウンロードし、■html/js/jquery.caroufredselフォルダに置く。
http://caroufredsel.frebsite.nl/

2　■data/Smarty/templates/default/site_frame.tpl　追加
[php]


[/php]

3　ブロックを新規作成する

①　■html/frontparts/bloc/category_slide.php
[php]
blocItems = $params[‘items’];
register_shutdown_function(array($objPage, “destroy”));
$objPage->init();
$objPage->process();
?>
[/php]

②　■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_slide_Ex.php
[php]

[/php]

③　■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_slide.php
[php]
setTplMainpage(‘category_slide.tpl’);
}

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

/**
* Page のアクション.
*
* @return void
*/
function action() {

// データベースから取得
$objQuery =& SC_Query_Ex::getSingletonInstance();
$this->arrRet = array();

//カテゴリー名を取得
$arrRet = $objQuery->select(‘*’,’dtb_category’,’del_flg = 0 order by rank DESC’);

//データベースから取得できたか
if(isset($arrRet)){
$this->arrRet = $arrRet;
}
}

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

④　■data/Smarty/templates/default/frontparts/bloc/Category_slide.tpl
[php]


[/php]

⑤　データベースdtb_blocテーブルに追加する
[php]
INSERT INTO dtb_bloc (device_type_id, bloc_id, bloc_name, tpl_path, filename, create_date, update_date, php_path, deletable_flg) VALUES (10, 16, ‘カテゴリスライドメニュー’, ‘category_slide.tpl’, ‘category_slide’, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, ‘frontparts/bloc/category_slide.php’, 0);
[/php]

4　cssファイルを編集する

■html/user_data/packages/default/css/bloc.css　追加
[css]

/* ===============================================
▼カテゴリースライドメニュー
=============================================== */
#category_slide {
position: relative;
height:30px;
background-color: #EEE;
overflow:hidden;
}
#category_slide #wrapper {
width:100%;
margin:0 12px;
height:30px;
overflow: hidden;
}
#category_slide #carousel_category a {
display: block;
float: left;
padding:8px 15px 0 15px;
height:22px;
font-size:120%;
background:url(../img/background/bg_category_slide_item.png) repeat-y right;
}
#category_slide #carousel_category a.rank_1 {
background:url(../img/background/bg_category_slide_item.png) repeat-y right #ddd;
}
#category_slide #prev_category, #category_slide #next_category {
background: url(../img/button/btn_prev_next_01.png) no-repeat transparent;
width: 12px;
height: 30px;
display: block;
position: absolute;
top:0;
}
#category_slide #prev_category {
left: 0px;
background-position: 0 0;
}
#category_slide #prev_category:hover {
background-position: 0 -30px;
}
#category_slide #next_category {
right: 0px;
background-position: -12px 0;
}
#category_slide #next_category:hover {
background-position: -12px -30px;
}
/*ヘッダーに配置*/
#header #category_slide {
width:360px;
float:right;
margin-top:3px;
}
[/css]

5　画像を追加
■img/background/bg_category_slide_item.png　（2px×1pxの小さい画像なので、ここでは表示できません。下記アドレスダウンロード）

https://itoben.com/style/wp-content/uploads/2012/10/bg_category_slide_item.png

■img/button/btn_prev_next_01.png

6　ヘッダーに配置することもできる。
ナビを削除して、カテゴリーメニューを置く。
■data/Smarty/templates/default/header.tpl
[php]

[/php]