バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > フロント機能 > 完全アコーディオン型カテゴリ

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
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の構造次第だとは思いますが・・・


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

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のソースだけでは、詳細は分からないのですが、

構造としては、
<ul>
  <li>
    親カテゴリ1
    <ul>
      <li>
        子カテゴリ1
      </li>
      <li>
        子カテゴリ2
      </li>
    </ul>
  </li>
  <li>
    親カテゴリ2
  </li>
  <li>
    親カテゴリ3
  </li>
</ul>

と<li>の中に<ul></ul>をネストしているようです。

ただ、tplを見て思ったのですが、
<!--{include file="`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/category_tree_fork.tpl" children=$child.children display=$disp_child}-->
で、テンプレートを再帰的に呼び出しているので、
このままだと、もう1つ親階層を追加するのは大変そうです。

<!--{strip}-->の下の行に
<!--{if $child.level == 1}-->
<ul>
<li><p>カテゴリ</p>
<!--{/if}-->


<!--{/strip}-->の上の行に
<!--{if $child.level == 1}-->
</li>
</ul>
<!--{/if}-->a

と第1階層の時だけ<ul><li></li></ul>を追加するようにしてみては如何でしょうか?
id属性やclass属性はきちんと設定する必要があると思います。


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

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タグに書き換えず、そのままでネストになると思いましたが、如何でしょうか?


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

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構造で問題無いかと思います。

この状態で表示が崩れたりしますか?


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

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
<ul style="">
<li class="level0 onmark">
<p><a href="/store/products/list.php?category_id=0">カテゴリ</a></p>
ここのif文を何で判断するか解決していません。
<!--{if $tpl_category_id.0 != ""}-->
ここまで追加1

                <!--{include file="`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/category_tree_fork.tpl" children=$arrTree treeID="" display=1}-->

ここから追加2
<!--{else}-->
(「カテゴリ」だけにする。)
                <!--{include file="`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/category_tree_fork.tpl" children=$arrTree treeID="" display=0}-->
<!--{/if}-->
</li>
</ul>
ここまで追加2


希望されている動作を以下とすると、
(1)トップページを表示した場合、「カテゴリ」を表示する。
   「カテゴリ」クリックすると、商品一覧画面へ遷移する。
(2)商品一覧画面を表示した場合、「カテゴリ」と第1階層のカテゴリを表示する。

この修正での問題点
現状では、(1)(2)の判断が付かないため、切り分けができない。
参考:$tpl_category_id.0は、どちらも「0」が、入っている。
   カテゴリを選んだ場合、そのカテゴリ番号が入っている。

上記、切り分け部分を解決すれば、DBを修正する必要がないと思います。
(1) 2 »
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


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

統計情報

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

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
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.