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

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

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

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

2 ■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>

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

 ■html/frontparts/bloc/category_slide.php

<?php

// {{{ requires
require_once realpath(dirname(__FILE__)) . '/../../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_slide_Ex.php';

// }}}
// {{{ generate page

$objPage = new LC_Page_FrontParts_BLoc_Category_slide_Ex();
$objPage->blocItems = $params['items'];
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>

 ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_slide_Ex.php

<?php

// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_slide.php';

class LC_Page_FrontParts_Bloc_Category_slide_Ex extends LC_Page_FrontParts_Bloc_Category_slide {

// }}}
// {{{ functions

/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
parent::process();
}

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

 ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_slide.php

<?php

// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php';

class LC_Page_FrontParts_Bloc_Category_slide extends LC_Page_FrontParts_Bloc {

// }}}
// {{{ functions

/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
// include_phpで、読み込ませるために必要な記述
$this->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();
}
}
?>

 ■data/Smarty/templates/default/frontparts/bloc/Category_slide.tpl

<script type="text/javascript">
$(function() {
$('#carousel_category').carouFredSel({
width: '100%',
prev: '#prev_category',
next: '#next_category',
scroll: {
items: 1,
duration: 500
},
auto: {
pauseDuration: 5000, // ストップしている時間
pauseOnHover: true
}
});
});
</script>

<div class="block_outer clearfix">
<div id="category_slide">
<div id="wrapper">
<div id="carousel_category">
<!--{section name=cnt loop=$arrRet}-->
<a class="item rank_<!--{$arrRet[cnt].rank|h}-->" href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrRet[cnt].category_id}-->">
<!--{$arrRet[cnt].category_name|h}-->
</a>
<!--{/section}-->
</div>
<a id="prev_category" href="#"></a>
<a id="next_category" href="#"></a>
</div>
</div>
</div>
<div class="clear"></div>

 データベースdtb_blocテーブルに追加する

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);

4 cssファイルを編集する

■html/user_data/packages/default/css/bloc.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;
}

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

http://www.itoben.com/blog/wp-content/uploads/2012/10/bg_category_slide_item.png

■img/button/btn_prev_next_01.png

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

<div id="header_navi">
<ul>
<li class="mypage">
<a href="<!--{$smarty.const.HTTPS_URL}-->mypage/login.php" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_mypage_on.jpg','mypage');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_mypage.jpg','mypage');"><img src="<!--{$TPL_URLPATH}-->img/common/btn_header_mypage.jpg" alt="MYページ" name="mypage" id="mypage" /></a>
</li>
<li class="entry">
<a href="<!--{$smarty.const.ROOT_URLPATH}-->entry/kiyaku.php" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_entry_on.jpg','entry');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_entry.jpg','entry');"><img src="<!--{$TPL_URLPATH}-->img/common/btn_header_entry.jpg" alt="会員登録" name="entry" id="entry" /></a>
</li>
<li>
<a href="<!--{$smarty.const.CART_URLPATH}-->" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_cart_on.jpg','cartin');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/common/btn_header_cart.jpg','cartin');"><img src="<!--{$TPL_URLPATH}-->img/common/btn_header_cart.jpg" alt="カゴの中を見る" name="cartin" id="cartin" /></a>
</li>
</ul>
</div>

↓(変更)

<div id="header_navi">
<!--{include_php file=`$smarty.const.HTML_REALDIR`frontparts/bloc/category_slide.php}-->
</div>