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

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

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 で適当なスタイルを定義してください。
また、諸事情によりカテゴリーは２階層という前提で作ったので、３階層以上の場合は直さないといけないかもです。