バージョン選択

フォーラム

メニュー

オンライン状況

17 人のユーザが現在オンラインです。 (9 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 17
もっと...

サイト内検索

質問 > フロント機能 > カテゴリのアコーディオン表示ができない

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
ytanaka
投稿日時: 2015/12/11 17:45
対応状況: −−−
半人前
登録日: 2014/8/29
居住地: 東京
投稿: 23
カテゴリのアコーディオン表示ができない
----------------

ECCUBE 2.12.2
PHP 5.3.3
MySQL 5.1.66

----------------
大変恐縮ですが、お力添えをいただけると幸いです。

カテゴリをアコーディオン式にしたいと思い、
http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=12852&forum=10
や、
http://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=14524&forum=10

http://ec-cube.nakweb.com/blog/1618.html
等を参考にカスタマイズを行ったのですが、
全カテゴリが一覧で表示されてしまい、アコーディオン形式になりません。

ddaccordion.js
が正常に反映されていないようなのですが、
どのように改善を行えばよいでしょうか。

お忙しい中恐縮ですが、何卒よろしくお願いいたします。

data/Smartry/templates/default/frontparts/block/category.tpl

<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.jpg" alt="商品カテゴリ" /></h2>
        <div id="accordion_menu">
            <!--{include file='frontparts/bloc/category_tree_fork_accordion.tpl' children=$arrTree}-->
	</div>
	</div>
    </div>
</div>


data/Smartry/templates/default/frontparts/bloc/category_tree_fork_accordion.tpl

<!--{strip}-->
<!--{foreach from=$children item=child}-->
    <!--{if $child.level == 1}-->
        <!--{* 1階層 *}-->
        <div class="ac_top">
    <!--{else}-->
        <!--{* 2階層以降 *}-->
        <li>
    <!--{/if}-->

    <!--{if isset($child.children|smarty:nodefaults)}-->
        <!--{* 子持ちの階層 *}-->
        <div class='expandable'><span class='accordprefix'></span></div>
            <p class='ex_title'><a href='<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$child.category_id}-->'<!--{if in_array($child.category_id, $tpl_category_id)}--> class='onlink'<!--{/if}-->><!--{$child.category_name|h}-->(<!--{$child.product_count|default:0}-->)</a></p>
        <div class='categoryitems'>
            <ul>
                <!--{include file='frontparts/bloc/category_tree_fork_accordion.tpl' children=$child.children}-->
            </ul>
        </div>
    <!--{else}-->
        <!--{* 子持ちでない階層 *}-->
        <a href='<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$child.category_id}-->'<!--{if in_array($child.category_id, $tpl_category_id)}--> class='onlink'<!--{/if}-->><!--{$child.category_name|h}-->(<!--{$child.product_count|default:0}-->)</a>
    <!--{/if}-->

    <!--{if $child.level == 1}-->
        <!--{* 1階層 *}-->
        </div>
    <!--{else}-->
        <!--{* 2階層以降 *}-->
        </li>
    <!--{/if}-->
<!--{/foreach}-->
<!--{/strip}-->
88mz51ki
投稿日時: 2015/12/29 15:10
対応状況: −−−
半人前
登録日: 2015/7/6
居住地:
投稿: 21
Re: カテゴリのアコーディオン表示ができない
ytanaka様

もしかしたらアコーディオン用の「ddaccordion.js」以外のJavaScriptがエラーを起こしているため、ページ内のJavaScriptが全て止まっているのかも知れません。

ブラウザによって操作は異なりますが、開発者ツールという機能が最近のブラウザには備わっていますので、このツールを使用し、何かしらJavaScriptのエラーが出ているかどうかを見てみてはいかがでしょうか。


----------------
答えられる範囲にてお答えいたします!

sumida
投稿日時: 2016/1/4 18:01
対応状況: −−−
仙人
登録日: 2013/2/10
居住地: 広島県呉市ときどき瀬戸内海
投稿: 641
Re: カテゴリのアコーディオン表示ができない
記載のソースコードは、v2.13用のものです。
v2.12とv2.13では、$arrTreeの構造が変更されています。
なので、参照されているページ
http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=12852&forum=10
の4つ目の投稿が参考になるかと思います。
ytanaka
投稿日時: 2016/7/6 14:08
対応状況: −−−
半人前
登録日: 2014/8/29
居住地: 東京
投稿: 23
Re: カテゴリのアコーディオン表示ができない
時間が経ってしまい、大変申し訳ありません。

ご教授頂いた方法を試してみたのですが、
カテゴリのすべてが表示されてしまい、
うまくいきませんでした…

現在は
http://ec-cube.nakweb.com/blog/1618.html
を参考に下記のようなコードを入れ、
カテゴリを表示することができたのですが、
メインカラムに入っているコンテンツが、サイドカラムに入れてあるカテゴリにかぶってきてしまっています。

恐らく、第2階層がない場合の
<ul>タグが閉じられていないことが問題だと思うのですが…

どのように修正すればよいかがわかりません。

ご教授いただけると助かります。

何卒よろしくお願いいたします。

data/Smartry/templates/default/frontparts/block/category.tpl

<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.jpg" 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}--></ul></ul></div><!--{/if}-->
            <!--{/foreach}-->
            </div>
        </div>
    </div>
</div>
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

公式ストアEC-CUBE4系デザインテンプレート続々リリース中

統計情報

総メンバー数は66,722名です
総投稿数は98,421件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
468
2651
4
nanasess
2107
5
umebius
1757
6
yuh
1612
7
red
1424
8
h_tanaka
1048
9
fukap
907
10
tsuji
863
11
shutta
835
12
tao_s
792
13 ramrun 789
14 karin 657
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.