バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > フロント機能 > カテゴリーをアコーディオン式にした場合、孫カテゴリーが正常に表示されない問題。

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
zerocre
投稿日時: 2013/6/21 14:38
対応状況: −−−
半人前
登録日: 2013/6/21
居住地: Tokyo
投稿: 15
カテゴリーをアコーディオン式にした場合、孫カテゴリーが正常に表示されない問題。
----------------------------------
EC-CUBE 2.14.x
サーバーOS FreeBSD 7.1-RELEASE-p16 i386
DBサーバー MySQL 5.5
WEBサーバー Apache/1.3.42 (Unix) mod_ssl/2.8.31 OpenSSL/0.9.8e
PHP 5.2.17
----------------------------------

カスタマイズにて子カテゴリーを開閉式のアコディオンメニューにしましたが、孫カテゴリーの開閉が出来ずしばらく悩んでおります。
解決の糸口でも結構ですので、ご教授頂けましたら幸いです。

アコーディオン式のカテゴリーブロック(category.tpl)のソースを以下に記載致します。(尚、http://ec-cube.nakweb.com/blog/1618.htmlこちらのURLを参考に致しました。)

<script type="text/javascript">
<!--
    ddaccordion.init({
    headerclass: "expandable",
    contentclass: "categoryitems",
    revealtype: "click",
    mouseoverdelay: 100,
    collapseprev: false,
    defaultexpanded: [],
    onemustopen: false,
    animatedefault: false,
    persiststate: true,
    toggleclass: ["", ""],
    togglehtml: ["suffix", "<img src='<!--{$TPL_URLPATH}-->img/icon/plus.gif' class='statusicon' />", "<img src='<!--{$TPL_URLPATH}-->img/icon/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast",
    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="bloc_outer">
    <div id="category_area">
        <div class="bloc_body">
            <h2><span class="square">■</span><b>商品カテゴリー</b></h2>
        <div id="accordion_menu">
            <!--{foreach name=cat from=$arrTree item=i}-->
                <!--{if $i.level == 1}-->
                    <!--{if $flg == 1}-->
                            </ul>
                        </div>
                    <!--{/if}-->
                    <div class="ac_top">
                    <div class="expandable"><span class="accordprefix"></span></div><p class="ex_title"><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$i.category_id|u}-->"<!--{if in_array($i.category_id|u, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$i.category_name|h}--></a></p>
                    </div>
                    <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}--></a></li>
                    <!--{assign var=flg value=1}-->
                <!--{/if}-->
                
                <!--{if $smarty.foreach.cat.last}--></div><!--{/if}-->
            <!--{/foreach}-->
            </div>
        </div>
    </div>
</div>
sumida
投稿日時: 2013/6/21 21:04
対応状況: −−−
仙人
登録日: 2013/2/10
居住地: 広島県呉市ときどき瀬戸内海
投稿: 641
Re: カテゴリーをアコーディオン式にした場合、孫カテゴリーが正常に表示されない問題。
内容については、一切わかりません。そのため、当てずっぽうです。

画面表示したとき、HTML自体は、予定通りに展開されているのでしょうか。

<!--{if $i.level == 1}-->
<!--{if $flg == 1}-->
</ul>
</div>
<!--{/if}-->

子を開いたときに、この辺が、うまく展開できているのか疑問ですが。
sumida
投稿日時: 2013/6/21 23:03
対応状況: −−−
仙人
登録日: 2013/2/10
居住地: 広島県呉市ときどき瀬戸内海
投稿: 641
Re: カテゴリーをアコーディオン式にした場合、孫カテゴリーが正常に表示されない問題。
参考にされているサイトには、親と子の関係までで、孫については、「できないかも」という旨の記述がありました。

今回の場合、展開形は、
 
       <div id="accordion_menu">
親1個目
                <div class="ac_top">
                    <div class="expandable"><span class="accordprefix"></span></div><p class="ex_title"><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$i.category_id|u}-->"<!--{if in_array($i.category_id|u, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$i.category_name|h}--></a></p>
                    </div>
                    <div class="categoryitems">
                    <ul>
子1個目
                    <li><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$i.category_id|u}-->"><!--{$i.category_name|h}--></a></li>
子2個目
                    <li><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$i.category_id|u}-->"><!--{$i.category_name|h}--></a></li>
                    </ul>
                    </div>
                </div>
親2個目
                <div class="ac_top">
                    <div class="expandable"><span class="accordprefix"></span></div><p class="ex_title"><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$i.category_id|u}-->"<!--{if in_array($i.category_id|u, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$i.category_name|h}--></a></p>
                    </div>
                    <div class="categoryitems">
                    <ul>
子1個目
                    <li><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$i.category_id|u}-->"><!--{$i.category_name|h}--></a></li>
子2個目
                    <li><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$i.category_id|u}-->"><!--{$i.category_name|h}--></a></li>
                    </ul>
                    </div>
                </div>
        </div>

のようにしているみたいです。
したがって、子の展開部分を親の展開と同じ形にすれば、可能性はあると思います。
expandable と categoryitems が動作のキーワードだと思うので。

ただ、どちらかというと、既存のカテゴリを展開しているロジックをまねたほうが早いような気もしますが。
sumida
投稿日時: 2013/6/22 16:56
対応状況: −−−
仙人
登録日: 2013/2/10
居住地: 広島県呉市ときどき瀬戸内海
投稿: 641
Re: カテゴリーをアコーディオン式にした場合、孫カテゴリーが正常に表示されない問題。
やってみました。希望通りかどうか保証できませんが、


            <!--{strip}-->
            <div id="accordion_menu">
                <!--{section name=cat loop=$arrTree}-->

                    <!--{* 直前のレベル *}-->
                    <!--{if $smarty.section.cat.first}-->
                        <!--{assign var=beforeLevel value=0}-->
                    <!--{else}-->
                        <!--{assign var=beforeLevel value=`$arrTree[$smarty.section.cat.index_prev].level`}-->
                    <!--{/if}-->
                    <!--{* 直後のレベル *}-->
                    <!--{if $smarty.section.cat.last}-->
                        <!--{assign var=afterLevel value=0}-->
                    <!--{else}-->
                        <!--{assign var=afterLevel value=`$arrTree[$smarty.section.cat.index_next].level`}-->
                    <!--{/if}-->
                    <!--{* 自分のレベル *}-->
                    <!--{assign var=selfLevel value=`$arrTree[cat].level`}-->

                    <!--{* 2階層以降 *}-->
                    <!--{if $beforeLevel == $selfLevel}-->
                        </li>
                    <!--{/if}-->

                    <!--{* 直前が子の最後 *}-->
                    <!--{if $beforeLevel > $selfLevel}-->
                        <!--{assign var=levelDiff value=`$beforeLevel-$selfLevel`}-->
                        <!--{section name=d loop=$levelDiff}-->
                                     </li>
                                 </ul>
                            </div>
                        <!--{/section}-->
                    <!--{/if}-->

                    <!--{* 1階層 *}-->
                    <!--{if $selfLevel == 1}-->
                        <!--{* 2番目以降の1階層 *}-->
                        <!--{if $beforeLevel != 0}-->
                            </div>
                        <!--{/if}-->
                        <div class="ac_top">
                    <!--{/if}-->

                    <!--{* 2階層以降 *}-->
                    <!--{if $selfLevel != 1}-->
                        <li>
                    <!--{/if}-->

                    <!--{* 自身が親である階層 *}-->
                    <!--{if $selfLevel < $afterLevel}-->

                    <div class="expandable"><span class="accordprefix"></span></div><p class="ex_title"><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrTree[cat].category_id|u}-->"<!--{if in_array($arrTree[cat].category_id|u, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$arrTree[cat].category_name|h}--></a></p>

                        <div class="categoryitems">
                            <ul>
                    <!--{else}-->
                        <a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrTree[cat].category_id|u}-->"><!--{$arrTree[cat].category_name|h}--></a>
                    <!--{/if}-->

                    <!--{* 自身が最後 *}-->
                    <!--{if $afterLevel == 0}-->

                        <!--{assign var=levelDiff value=`$selfLevel-1`}-->
                        <!--{section name=d loop=$levelDiff}-->
                                    </li>
                                </ul>
                            </div>
                        <!--{/section}-->

                        </div>
                    <!--{/if}-->

                <!--{/section}-->
            </div>
            <!--{/strip}-->
sumida
投稿日時: 2013/6/23 22:52
対応状況: −−−
仙人
登録日: 2013/2/10
居住地: 広島県呉市ときどき瀬戸内海
投稿: 641
Re: カテゴリーをアコーディオン式にした場合、孫カテゴリーが正常に表示されない問題。
再帰呼び出しを使ってロジックを組めば、もっとシンプルになんですが。

6/24追記
再帰呼び出しを以下のようにしようとした。
category.tpl
  include category2.tpl

category2.tpl
  section
    include category2.tpl
  /section

しかし、
「sectionをネストする場合、同じsectionループ名を使うことができない。」
ということで、断念。

アコーディオンが2階層であれば、
category.tpl
  include category2.tpl

category2.tpl
  section
    include category3.tpl
  /section

category3.tpl(category2.tplのsectionループ名を変更したもの)
  section
    include category3.tpl
  /section

とすれば、疑似的に再帰呼び出しのような形にはなりました。
でも、アコーディオンの階層分、.tplファイルを用意することになります。
zerocre
投稿日時: 2013/6/25 13:16
対応状況: 解決済
半人前
登録日: 2013/6/21
居住地: Tokyo
投稿: 15
Re: カテゴリーをアコーディオン式にした場合、孫カテゴリーが正常に表示されない問題。
sumida様

お世話になっております。
sumida様のお書きになられたソースを参考にし、無事に完成致しました。
わざわざソースまで書いて戴き、大変助かりました。
どのようにしたら正常に表示できるのか全く分からなかったのでとても参考になりました。
ありがとう御座いました。
sumida
投稿日時: 2013/9/26 17:39
対応状況: −−−
仙人
登録日: 2013/2/10
居住地: 広島県呉市ときどき瀬戸内海
投稿: 641
v2.13.0用にしてみました。
v2.13.0で$arrTreeの構造が変更になったので、
再帰呼び出しにしました。
data/Smarty/templates/default/frontparts/bloc/category.tpl

    <div id="accordion_menu">
        <!--{include file='frontparts/bloc/category_tree_fork_accordion.tpl' children=$arrTree}-->
    </div>


新規
data/Smarty/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}-->


訂正:子持ちでない階層の場合、「 class='onlink'」の付加を忘れておりました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,280名です
総投稿数は109,687件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1567
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

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

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