EC-CUBEのカテゴリメニューを折り畳み化 未解決篇
プルダウンが至らないから、折り畳みに
プルダウンですが、この機能が対応できる範囲がある事に、僕は気付きました。
ECCUBEでいうと、階層5、いわゆるlevel5の段階まで行くと、物凄く使い辛い。
マウスに慣れている人間でも、するっとすべってしまうと、せっかく階層を追っかけて行って5回層目まで表示しておきながら、ずれただけで消えてしまう。
時によっては反応が悪かったりもしますし、使い勝手が良いのは3階層目まで。
さらに、もともと備わっている昨日で、現在のいる階層をカテゴリブロックが開いて表示していてくれました。
しかし、プルダウンはいつだってゼロの状態です。
マウスをもっていかない限りは。
この2点を考えると、カテゴリの種類によってはプルダウンと折り畳みを使い分けるのが吉、だと思いいたりました。
折り畳みjQuery
まず、こちらからダウンロードしましょう。
jQuery-Collapseダウンロード
例の如く、アップ。
jquery.collapse.jsを/html/jsへ。
/data/Smarty/templates/default/site_frame.tpl
適当なところに以下を記入。
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.collapse.js"></script>
/html/user_data/packages/default/cssにstate.gifをアップ。
/html/user_data/packages/default/css/bloc.css
適当な場所に以下を追加。
/* ===============================================
▼カテゴリメニュー 折りたたみ式
=============================================== */
div.demo{
border-bottom: 1px dotted #CCCCCC;
}
div.demo h3.active {background-color: #fff; background-position: 100% -17px;}
div.demo h3 {
padding:4px 5px; cursor:pointer;
background: #fff url("state2.gif") no-repeat 100% 6px;
display:block;
text-decoration:none;
margin:0;
}
div.demo h3 a {
color: #000;
text-decoration:none;
}
div.demo h3.level2{
font-weight:normal;
padding-left:10px;
}
div.demo h3.level3{
font-weight:normal;
padding-left:15px;
}
div.demo h3.level4{
font-weight:normal;
padding-left:20px;
}
div.demo h3.level5 {
font-weight:normal;
padding-left:25px;
}
/* YAY IE6 awsomeness */
*html h3 a {zoom:1;}
/data/Smarty/templates/default/frontparts/bloc/category.tpl
全部以下に書き換え。
<script type="text/javascript">//<![CDATA[
$(function(){
$('#category_area li.level1:last').css('border-bottom', 'none');
});
//]]>
</script>
<div class="bloc_outer">
<div id="category_area">
<div class="bloc_body">
<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_category.gif" alt="商品カテゴリー" /></h2>
<div class="demo">
<!--{strip}-->
<!--{assign var=preLev value=1}-->
<!--{assign var=firstdone value=0}-->
<!--{section name=cnt loop=$arrTree}-->
<!--{* 表示フラグがTRUEなら表示 *}-->
<!--{if $arrTree[cnt].display == 1|| $arrTree[cnt].level <=5}-->
<!--{assign var=level value=`$arrTree[cnt].level`}-->
<!--{assign var=levdiff value=`$level-$preLev`}-->
<!--{if $levdiff > 0}-->
<div>
<!--{elseif $levdiff == 0 && $firstdone == 1}-->
<!--{elseif $levdiff < 0}-->
<!--{section name=d loop=`$levdiff*-1`}-->
</div>
<!--{/section}-->
</div><div class="demo">
<!--{/if}-->
<h3 class="level<!--{$level}--><!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> active<!--{/if}-->">
<a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$arrTree[cnt].category_name|h}--></a>
</h3>
<!--{if $firstdone == 0}--><!--{assign var=firstdone value=1}--><!--{/if}-->
<!--{assign var=preLev value=`$level`}-->
<!--{/if}-->
<!--{* セクションの最後に閉じタグを追加 *}-->
<!--{if $smarty.section.cnt.last}-->
<!--{if $preLev-1 > 0}-->
<!--{section name=d loop=`$preLev-1`}-->
</div>
<!--{/section}-->
</div>
<!--{else}-->
</div>
<!--{/if}-->
<!--{/if}-->
<!--{/section}-->
<!--{/strip}-->
</div>
</div>
</div>
<script>
$(".demo").collapse({show: function(){
this.animate({
opacity: 'toggle',
height: 'toggle'
}, 300);
},
hide : function() {
this.animate({
opacity: 'toggle',
height: 'toggle'
}, 300);
}
});
$(".demo-2").collapse({hide: function() {
this.fadeOut();
}});
</script>
以上です。
一応、これで完成と言えば、完成。
総括を兼ねた不満
完成ではないですね。
不満点が二つ。
1.折り畳んでないところにもクリック出来てしまうし、画像が出てしまうしで、勘違いさせてしまう。
2.自分が見ているカテゴリを開いてほしいも毎度、全部畳まれている。
Smartyでなんとかできそうなわけですが、わからずじまいで記事にしてしまいました。
どなたか、知恵を貸して下さい。
というわけで、未解決篇、以上です。
