[EC-CUBE 2.12.1] ddaccordion.js で、カテゴリブロックをアコーディオンメニューに

カテゴリブロックの第一階層の名前をクリックすると、その下に第二階層がアコーディオンの動きのように表示されるようにしてみました。
アコーディオンメニューはjQueryプラグインの ddaccordion.js を使いました。

まずは、デフォルトのカテゴリブロックをコピーして、全く同じカテゴリブロックを別に作ります。

１．data/Smarty/templates/default/frontparts/bloc/category.tpl をコピーして、data/Smarty/templates/default/frontparts/bloc/category2.tpl を作成。

２．data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Category.php をコピーして、data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Category2.php を作成。

３．data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_Ex.php をコピーして、data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Category2_Ex.php を作成。

４．html/frontparts/bloc/category.php をコピーして、html/frontparts/bloc/category2.php を作成。

５．data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Category2.php の34行目付近を修正。

class LC_Page_FrontParts_Bloc_Category2 extends LC_Page_FrontParts_Bloc_Ex {

６．data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Category2_Ex.php の25行目と36行目付近を修正。

require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Category2.php';

class LC_Page_FrontParts_Bloc_Category2_Ex extends LC_Page_FrontParts_Bloc_Category2 {

７．html/frontparts/bloc/category2.php の26行目と31行目付近を修正。

require_once CLASS_EX_REALDIR . 'page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Category2_Ex.php';

$objPage = new LC_Page_FrontParts_BLoc_Category2_Ex();

８．データベースの dtb_bloc に新規ブロック用レコードを追加。phpPgAdmin などで以下のSQLを流します。（なお、開発条件によっては値を変更する必要あり）

insert into dtb_bloc values(10, 10, 'カテゴリ（アコーディオン）', 'category2.tpl', 'category2', now(), now(), 'frontparts/bloc/category2.php', 0, NULL);

ここまでで、「カテゴリ（アコーディオン）」という名前の新規ブロックが出来ているか確認します。
表示エリアにドラッグ＆ドロップし、デフォルトのカテゴリブロックと同じ表示がされているか確認してください。
ここまで問題なければ次に進みます。

９．http://www.dynamicdrive.com/dynamicindex17/ddaccordion.js　を html/js にダウンロードして保存します。

１０．data/Smarty/templates/default/site_frame.tpl の43行目付近に以下の記述を追加します。

<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

１１．data/Smarty/templates/default/frontparts/bloc/category2.tpl のコードを全て消去し、以下のように書き換えます。
　　　初期値については、http://memocarilog.info/jquery/1250 などをご参考ください。

<!--{*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2007 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 *}-->
<!--商品カテゴリーここから-->
<script type="text/javascript">
<!--
    ddaccordion.init({
    headerclass: "expandable",
    contentclass: "categoryitems",
    revealtype: "click",
    mouseoverdelay: 200,
    collapseprev: false,
    defaultexpanded: [],
    onemustopen: false,
    animatedefault: false,
    persiststate: true,
    toggleclass: ["", ""],
    animatespeed: "slow",
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})
//-->
</script>
<div class="block_outer">
    <div id="category_area">
        <div class="block_body">
            <h2>
                <img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_category.gif" alt="商品カテゴリ" />
            </h2>
        <div id="accordion_menu">
            <!--{foreach name=cat from=$arrTree item=i}-->
                <!--{if $i.level == 1}-->
                    <!--{if $flg == 1}-->
                            </ul>
                        </div>
                    <!--{/if}-->
                    <h3 class="expandable"><!--{$i.category_name|h}--></h3>
                    <div class="categoryitems">
                    <ul>
                    <!--{assign var=flg value=0}-->
                <!--{else}-->
                    <li><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$i.category_id|u}-->"><!--{$i.category_name|h}-->(<!--{$i.product_count|default:0}-->)</a></li>
                    <!--{assign var=flg value=1}-->
                <!--{/if}-->
                <!--{if $smarty.foreach.cat.last}--></div><!--{/if}-->
            <!--{/foreach}-->
            </div>
        </div>
    </div>
</div>

ここまでで、「カテゴリ（アコーディオン）」ブロックがどのような動作をするか確認してみてください。
第一階層の名称をクリックしたら、その下から第二階層がアコーディオンの動きのように表示されればＯＫです。

あとは、user_data/packages/default/css/main.css で適当なスタイルを定義してください。
また、諸事情によりカテゴリーは２階層という前提で作ったので、３階層以上の場合は直さないといけないかもです。

[EC-CUBE 2.12.1] ddaccordion.js で、カテゴリブロックをアコーディオンメニューにへの5件のコメント

クエストhk より:

2013年8月17日 3:00 PM

正しく望んでいた機能でございます。
第3階層まである場合、
第1階層の名前をクリックした時点で
第2階層と第3階層のものまで同時に開かれます。

これを第1階層の名前をクリックした時点で第2階層までしか開かないようにする（第3階層は第2階層がクリックされて開くようにする）には
どういう記述に変更したらよろしいか、もし簡単であればお教え願いませんでしょうか。
fukap より:

2013年8月19日 10:33 AM

本文にもある通り、第２階層までを前提に書いた記事ですので、
第３階層以降も使用される場合は、それなりに修正は必要だと思います。
ちょっとすぐにはご案内できないですね。
申し訳ございません。
クエストhk より:

2013年8月26日 6:19 PM

無理を言って申し訳ございませんでした。とりあえず、あれこれ試してみます。お時間頂きましてありがとうございます。
kirito より:

2014年12月8日 12:38 PM

はじめまして、いろいろ探しておりまして
こちらにたどり着きました。
一つ質問なのですが、こちらのコードですと第二階層に商品がない場合に表示ずれがおきているのですが、どのように変更したらよいのでしょうか。
よろしくお願致します。
fukap より:

2014年12月8日 5:28 PM

第二階層に商品がないという環境を想定して作っていませんので、
商品が無い場合の表示制御は必要かと思います。