質問 > フロント機能 > 完全アコーディオン型カテゴリ |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
y-mika |
投稿日時: 2017/5/17 16:16
対応状況: 確認中
|
常連 登録日: 2017/5/9 居住地: 投稿: 60 |
完全アコーディオン型カテゴリ [EC-CUBE] 2.13.1
現在、弊社サイトのカテゴリブロックは、親カテゴリが縦にずら~っと並んでおり、親カテゴリをクリックすると子カテゴリが表示され、子カテゴリをクリックすると孫カテゴリが展開されるようになっています。 親カテゴリを”カテゴリ”という1つのカテゴリにまとめてしまって、すっきりした表示にしたいのですが・・・ (”カテゴリ”をクリックして初めて親カテゴリが展開されるようにする) 方法として考えたのは、 ●親カテゴリを子カテゴリに、子カテゴリを孫カテゴリに、というように1階層ずつずらし、一番上の階層に”カテゴリ”という名の親カテゴリを登録する。 ●カテゴリブロックを複製し、tplファイルを編集してみる です。 前者の方法ですと、カテゴリcsvに変更を加えた上で、商品マスターcsvに変更を加えるので、意外と大変そうです。 後者の方法ですと、おそらくデータベースをいじる必要があると思うので、やり方がわかりません。 もっとスマートな方法がありましたら、どうか教えて下さい。 宜しくお願い致します。 |
468 |
投稿日時: 2017/5/17 21:56
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: 完全アコーディオン型カテゴリ tplを編集して、現在の親カテゴリ(第1階層)の上にタグを追加すれば良いのでは無いでしょうか?
tpl上のHTMLの階層を変更すれば、データに手を加える事無く対応できるのでは無いかと思います。 可能か不可能かはHTMLの構造次第だとは思いますが・・・
|
y-mika |
投稿日時: 2017/5/18 9:33
対応状況: 確認中
|
常連 登録日: 2017/5/9 居住地: 投稿: 60 |
Re: 完全アコーディオン型カテゴリ ご回答ありがとうございます!
>tpl上のHTMLの階層を変更すれば、データに手を加える事無く対応できるのでは無いかと思います。 現状のcategory_tree_fork.tplは以下のようになっております。 」<!--{strip}--> <ul <!--{if $treeID != ""}-->id="<!--{$treeID}-->"<!--{/if}--> style="<!--{if !$display}-->display: none;<!--{/if}-->"> <!--{foreach from=$children item=child}--> <li class="level<!--{$child.level}--><!--{if in_array($child.category_id, $tpl_category_id)}--> onmark<!--{/if}-->"> <p><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> <!--{if in_array($child.category_id, $arrParentID)}--> <!--{assign var=disp_child value=1}--> <!--{else}--> <!--{assign var=disp_child value=0}--> <!--{/if}--> <!--{if isset($child.children|smarty:nodefaults)}--> <!--{include file="`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/category_tree_fork.tpl" children=$child.children display=$disp_child}--> <!--{/if}--> </li> <!--{/foreach}--> </ul> <!--{/strip}--> ------------------------------------------------------------ 以前の担当者が作ったものですが、デフォルトの構造だと思うのでお聞きしたいのですが、 <ul <!--{if $treeID != ""}--> が親カテゴリ <li class="level<!--{$child.level}--> が子カテゴリ という解釈でよろしいでしょうか? 親カテゴリのulをネスト構造の下位に持ってくるためには、これをさらに別のulタグの下に置けばよいのでしょうか? 開閉型のネスト構造の仕組みがよくわからないので、”カテゴリ”下にネストして、親カテゴリを隠す記述の仕方を教えて頂きたいです。 宜しくお願い致します。 |
468 |
投稿日時: 2017/5/18 9:50
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: 完全アコーディオン型カテゴリ 多分、javascriptと組み合わせて開閉を実現していると思いますので、
tplのソースだけでは、詳細は分からないのですが、 構造としては、
と<li>の中に<ul></ul>をネストしているようです。 ただ、tplを見て思ったのですが、 <!--{include file="`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/category_tree_fork.tpl" children=$child.children display=$disp_child}--> で、テンプレートを再帰的に呼び出しているので、 このままだと、もう1つ親階層を追加するのは大変そうです。 <!--{strip}-->の下の行に
<!--{/strip}-->の上の行に
と第1階層の時だけ<ul><li></li></ul>を追加するようにしてみては如何でしょうか? id属性やclass属性はきちんと設定する必要があると思います。
|
y-mika |
投稿日時: 2017/5/18 10:11
対応状況: −−−
|
常連 登録日: 2017/5/9 居住地: 投稿: 60 |
Re: 完全アコーディオン型カテゴリ 早急にアコーディオンの仕組みについて、初心者向けサイトで理解に努めました。
まだ自分では書けそうにありませんが・・・ jqueryやjavascriptの存在をすっかり忘れていたことに気づきました。 第一階層だけul,liを設定するというと、こんな感じでしょうか? <!--{strip}--> <!--{if $child.level == 1}--> <ul> <li><p>カテゴリ</p> <!--{/if}--> <p <!--{if $treeID != ""}-->id="<!--{$treeID}-->"<!--{/if}--> style="<!--{if !$display}-->display: none;<!--{/if}-->"> <!--{foreach from=$children item=child}--> <p class="level<!--{$child.level}--><!--{if in_array($child.category_id, $tpl_category_id)}--> onmark<!--{/if}-->"> <p><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> <!--{if in_array($child.category_id, $arrParentID)}--> <!--{assign var=disp_child value=1}--> <!--{else}--> <!--{assign var=disp_child value=0}--> <!--{/if}--> <!--{if isset($child.children|smarty:nodefaults)}--> <!--{include file="`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/category_tree_fork.tpl" children=$child.children display=$disp_child}--> <!--{/if}--> </p> <!--{/foreach}--> </p> <!--{if $child.level == 1}--> </li> </ul> <!--{/if}--> <!--{/strip}--> 第一階層のみとのことで、第二階層にしたい親カテゴリ以下を全部pにしましたが、やっぱりこれではネストにならないでしょうか? 初歩的な質問ですみません。 宜しくお願い致します。 |
468 |
投稿日時: 2017/5/19 5:33
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: 完全アコーディオン型カテゴリ >第一階層のみとのことで、第二階層にしたい親カテゴリ以下を全部pにしましたが、やっぱりこれではネストにならないでしょうか?
pタグに書き換えず、そのままでネストになると思いましたが、如何でしょうか?
|
y-mika |
投稿日時: 2017/5/23 9:08
対応状況: 確認中
|
常連 登録日: 2017/5/9 居住地: 投稿: 60 |
Re: 完全アコーディオン型カテゴリ 何度も申し訳ないです。
以下の記述になるということでしょうか? <!--{strip}--> <!--{if $child.level == 1}--> <ul> <li><p>カテゴリ</p> <!--{/if}--> <ul <!--{if $treeID != ""}-->id="<!--{$treeID}-->"<!--{/if}--> style="<!--{if !$display}-->display: none;<!--{/if}-->"> <!--{foreach from=$children item=child}--> <li class="level<!--{$child.level}--><!--{if in_array($child.category_id, $tpl_category_id)}--> onmark<!--{/if}-->"> <p><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> <!--{if in_array($child.category_id, $arrParentID)}--> <!--{assign var=disp_child value=1}--> <!--{else}--> <!--{assign var=disp_child value=0}--> <!--{/if}--> <!--{if isset($child.children|smarty:nodefaults)}--> <!--{include file="`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/category_tree_fork.tpl" children=$child.children display=$disp_child}--> <!--{/if}--> </li> <!--{/foreach}--> </ul> <!--{if $child.level == 1}--> </li> </ul> <!--{/if}-->a <!--{/strip}--> |
468 |
投稿日時: 2017/5/24 9:54
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: 完全アコーディオン型カテゴリ javascrptやcssが分からないので、確証は持てませんが、
既存のtplの記述を見ると、このHTML構造で問題無いかと思います。 この状態で表示が崩れたりしますか?
|
y-mika |
投稿日時: 2017/5/25 16:51
対応状況: 確認中
|
常連 登録日: 2017/5/9 居住地: 投稿: 60 |
Re: 完全アコーディオン型カテゴリ >javascrptやcssが分からないので、確証は持てませんが、
既存のtplの記述を見ると、このHTML構造で問題無いかと思います。 この状態で表示が崩れたりしますか? ありがとうございます。 遅ればせながらこれから試してみるところです。 (今日は別スレのFetch as Google問題で時間を大幅に取られてしまいました。) 表記崩れ等の問題が発生しましたら、またお尋ねしたいです。 宜しくお願い致します。 |
sumida |
投稿日時: 2017/5/26 21:26
対応状況: −−−
|
仙人 登録日: 2013/2/10 居住地: 広島県呉市ときどき瀬戸内海 投稿: 641 |
Re: 完全アコーディオン型カテゴリ 横から失礼します。
category.tplを修正する案です。 コメントを付加しているので、コード部分だけ追加してください。
希望されている動作を以下とすると、 (1)トップページを表示した場合、「カテゴリ」を表示する。 「カテゴリ」クリックすると、商品一覧画面へ遷移する。 (2)商品一覧画面を表示した場合、「カテゴリ」と第1階層のカテゴリを表示する。 この修正での問題点 現状では、(1)(2)の判断が付かないため、切り分けができない。 参考:$tpl_category_id.0は、どちらも「0」が、入っている。 カテゴリを選んだ場合、そのカテゴリ番号が入っている。 上記、切り分け部分を解決すれば、DBを修正する必要がないと思います。 |
(1) 2 » |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |