EC-CUBEの小技:カテゴリブロックをプルダウン化する方法

EC-CUBEでは、カテゴリブロックというものがあり、階層を深く進むには、いちいちクリックしなければなりません。
この方式ですと、商品数によっては、これが苦痛になってしまう場合もあります。

そこで、よくあるマウスオーバーで下階層のカテゴリが表示される、プルダウン化の方法をご紹介します。

プルダウンjQueryの設置

ダウンロードは以下の記事に行き
JQueryで簡単に作るドロップダウンメニューいろいろ | DesignWalker

以下の項目よりダウンロードします。
Create a multilevel Dropdown menu with CSS and improve it via jQuery

設置はいつものように、しましょう。
menu.jsファイルは/html/js/へ。
style.cssファイルは/html/user_data/packages/default/cssへ。

/data/Smarty/templates/default/site_frame.tpl に以下を追加。
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/menu.js"></script>

/html/user_data/packages/default/css/import.css に以下を追加。
@import url("./style.css");
場合によっては、このファイル名が使われている場合があるので、応じて名前を変えましょう。

tplファイルの変更

それでは、テンプレートファイルを変更して、プルダウン化しましょう。
/data/Smarty/templates/default/frontparts/bloc/category.tpl
以下に全書き換え。
<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>

            <!--{strip}-->
		<ul id="nav">
                    <!--{assign var=preLev value=1}-->
                    <!--{assign var=firstdone value=0}-->
                    <!--{section name=cnt loop=$arrTree}-->
                        <!--{* 表示フラグがTRUEなら表示 *}-->
                        <!--{if $arrTree[cnt].display == 1|| $arrTree[cnt].level <=2}-->
                            <!--{assign var=level value=`$arrTree[cnt].level`}-->
                            <!--{assign var=levdiff value=`$level-$preLev`}-->
                                <!--{if $levdiff > 0}-->
                                    <ul>
                                <!--{elseif $levdiff == 0 && $firstdone == 1}-->
                                    </li>
                                <!--{elseif $levdiff < 0}-->
                                    <!--{section name=d loop=`$levdiff*-1`}-->
                                            </li>
                                        </ul>
                                    <!--{/section}-->
                                    </li>
                                <!--{/if}-->
                            <li class="level<!--{$level}--> <!--{if $levdiff > 0}-->first<!--{/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}-->(<!--{$arrTree[cnt].product_count|default:0}-->)</a>
                            <!--{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`}-->
                                    </li>
                                </ul>
                                <!--{/section}-->
                                </li>
                            <!--{else}-->
                                </li>
                            <!--{/if}-->
                        <!--{/if}-->
                    <!--{/section}-->
       </ul>
            <!--{/strip}-->

        </div>
    </div>
</div>


一箇所だけ修正が。
/html/user_data/packages/default/css/bloc.css
38行目を削除でも、コメントアウトでも。
.side_column {
//    overflow-x: hidden; /* IE6 表示乱れ防止 */
}

あとはCSSでお好みに形を整えましょう。

階層を限定して表示したい人は以下。
<!--{if $arrTree[cnt].display == 1|| $arrTree[cnt].level <=2}-->
上記の行の<=2の数字を変えてみましょう。
数字が2であれば、2階層目まで表示するという事です。

以上です。
以前は、死ぬほど難しそうで手を出さなかったのですが、やったらやったで、あっけなく。
そんなものなんですよね。


このカスタマイズはVer.2.12でも利用できます。

追記:CSS


質問がありまして、ちょっと混乱してしまったので、自分用としてもCSSを追記しました。
(2013/10/05)

追加で読み込ませた/html/user_data/packages/default/css/import.cssを以下のCSSですべて上書き
#category_area {
    background-color: #FFFFFF;
    height: auto;
}
#nav, #nav ul {
    line-height: 1.8em;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
#nav a {
    display: block;
    font-size: 13px;
    padding: 2px 2px 1px 5px;
    position: relative;
    text-decoration: none;
}
#nav a:hover {
    color: #E62E71;
    position: relative;
    text-decoration: none;
}
#nav li:hover {
    background-color: #E4E4E4;
    overflow: visible;
    position: relative;
}
#nav ul li a:hover {
    color: #E62E71;
    position: relative;
    text-decoration: none;
}
#nav li {
    background-color: #FFFFFF;
    overflow: hidden;
    padding: 3px 0 4px 7px;
    position: relative;
}
#nav li.level1 {
    background: url("../img/icon/cate_arrow.gif") no-repeat scroll 3px 12px rgba(0, 0, 0, 0);
}
#nav li.level1 a {
}
#nav ul {
    background-color: #FFFFF0;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px 0;
    left: 100%;
    margin-top: -2px;
    position: absolute;
    top: 0;
    width: 200px;
    z-index: 9999;
}
#nav ul li {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 0 1px;
}
#nav ul li.first {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 0 1px 0 0;
}
#nav ul li {
    background: none repeat scroll 0 0 #FFFFF0;
    padding-bottom: 4px;
    padding-left: 13px;
}
#nav ul ul {
    left: 100%;
    top: 0;
    width: 180px;
}
#nav ul li.level2 a {
    background-image: none;
    font-family: Arial,sans-serif;
    font-weight: normal;
    line-height: 23px;
    padding-left: 5px;
}
#nav li ul ul {
    left: 100%;
    top: 0;
}
.arrow_top {
    background: url("../img/icon/arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 10px;
    position: absolute;
    right: 5px;
    top: 7px;
    width: 10px;
}
.arrow {
    background: url("../img/icon/arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 15px;
    left: 10px;
    position: absolute;
    top: 7px;
    width: 10px;
}
#nav li.cate_page {
    border-bottom: 1px dotted #CCCCCC;
    padding: 0 10px 0 0;
    text-align: center;
}
#nav li.cate_page a {
    color: #E62E71;
    font-size: 13px;
}

さらに、/html/user_data/packages/default/css/block.cssの以下の部分を削除
.side_column {
    overflow-x: hidden;
}

これで最低限の表示になるはずです。
整形はご自分のお好みでどうぞ。

11 Comments

  1. kirinと申します。

    突然の質問で恐縮なんですが、

    カテゴリの階層を常に3階層まで表示していて、4階層目だけプルダウン化はできないのでしょうか?

    いろいろと解決策を探したのですがなかなか見つからなかったのと、プルダウン化に関して御サイトが一番成功に近づけたので質問させていただきました。

    ——————————–
    EC-CUBEバージョン:2.12.6
    PHPバージョン: 5.1.6
    DBバージョン:MySQL 5.0.95
    ——————————–

    お忙しいとは思いますがご教授いただけたらと思います。

    • いつもご覧いただき、ありがとうございます。


      3階層まで表示というのであれば、書き換えが必要になりますね。
      予定しているコードを見てみないと分かりませんが、枠のクラスに対するCSSの調整が必要になるかと思います。

      • daihachi様
        ご返信ありがとうございます。
        私のサイトは階層1~2は画像表示にしているため
        category.tplに関してはこのページを参考に画像のように作成しました。
        cssはこちらのサイトに掲載しているコードを丸写ししました。
        表示に関しては、私の思うように動作ができてからcssを変更しようと思っていました。
        私なりに試行錯誤しましたが無知なためさっぱりわかりませんでした・・・。
        変更する箇所はcssなんでしょうか?
        今現在も3階層まで常に表示していて、4階層目があるにもかかわらずデフォルト3階層目のカテゴリ名をクリックしてもページの先頭に移動してしまうためお客様には4階層目があることに気づいてもらえず非常にわかりにくいサイトになってしまっています。
        可能でしたらご教授頂けますでしょうか。
        お手数ではございますが、どうぞよろしくお願いします。

        • CSSで行けるかと思います。


          但し、各階層に階層ごとのクラスを上手に利用する必要があります。


          あとはjQueryの折り畳みを利用すればできるのですが、少しだけ難しいかもしれません。


          自分も最近覚えたばかりなので、いずれはこれで記事を書きたいと考えています。


          参考になれば幸いです。

          • daihachi様
            親身になってのご相談ありがとうございます。
            やはり単純なものでは無かったのですね、自分の勉強不足が痛感いたします。
            daihachi様のヒントを元に学んでいきたいと思います、また今回のテーマで記事にしていただけることを楽しみにしています。
            これからも非常にわかりやすく解説している御サイトを楽しみにしています。

  2. Reachと申します。

    突然のご連絡申し訳御座いません。

    この度は、【EC-CUBEの小技:カテゴリブロックをプルダウン化する方法】を参考にさせて頂き、現在、以下のURLで実装しておりますが、カテゴリーがかなり崩れてしまい修正方法に困っております、可能でしたらご教授頂けますでしょうか。
    ——————————–
    EC-CUBEバージョン2.12.6
    PHPバージョンPHP 5.4.17
    DBバージョンMySQL 5.5.28-log
    サイト名:http://ed-en-shop.com/
    ——————————–
    お手数では御座いますが、どずお宜しくお願い致します。

    • いつもご覧いただき、ありがとうございます。

      修正方法を追記しましたので、もう一度ご覧になってください。

      もし、この記事で上手くいかないようでしたら、説明ができませんので、身近にいるCSSのお詳しい方にご質問ください。

    • いつもご覧いただき、ありがとうございます。

      修正方法を追記しましたので、もう一度ご覧になってください。

      もし、この記事で上手くいかないようでしたら、説明ができませんので、身近にいるCSSのお詳しい方にご質問ください。

  3. いつも勉強させていただいております。eccube初心者のISOです。よろしくお願いいたします。
    カテゴリメニューをアコーディオン式にしたく、たどり着きました。
    上記の内容とおり行いましたが、カテゴリブロックから下層カテゴリははみ出さずスクロールが出てしまいます。*javascriptは動作いたしております。
    /html/user_data/packages/default/css/bloc.css
    の変更箇所も削除したのですがスクロールが出ております。ご教授頂けませんでしょうか?
    eccubeのバージョンは2.12でございます。テンプレートはデフォルトではありません。
    よろしくお願いいたします。

    • 閲覧ありがとうございます。

      推測するに、該当箇所のCSSに問題があるかと思います。
      コード検証用のブラウザプラグインである、fire-bug などを入れて頂き、該当箇所のCSSを確認してみてください。

      over-flow:auto;

      となっている場所があるかと思います。
      その箇所を修正すれば、スクロールされずに表示されると思います。

Leave a Reply

Your email address will not be published.


*