バージョン選択

フォーラム

メニュー

オンライン状況

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

PR

デザインテンプレート EC-CUBE3.0版が登場!
広告掲載について

サイト内検索

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

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
y-mika
投稿日時: 2017/5/17 16:16
対応状況: 確認中
常連
登録日: 2017/5/9
居住地:
投稿: 59
完全アコーディオン型カテゴリ
[EC-CUBE] 2.13.1


現在、弊社サイトのカテゴリブロックは、親カテゴリが縦にずら~っと並んでおり、親カテゴリをクリックすると子カテゴリが表示され、子カテゴリをクリックすると孫カテゴリが展開されるようになっています。

親カテゴリを”カテゴリ”という1つのカテゴリにまとめてしまって、すっきりした表示にしたいのですが・・・
(”カテゴリ”をクリックして初めて親カテゴリが展開されるようにする)

方法として考えたのは、

●親カテゴリを子カテゴリに、子カテゴリを孫カテゴリに、というように1階層ずつずらし、一番上の階層に”カテゴリ”という名の親カテゴリを登録する。

●カテゴリブロックを複製し、tplファイルを編集してみる

です。

前者の方法ですと、カテゴリcsvに変更を加えた上で、商品マスターcsvに変更を加えるので、意外と大変そうです。


後者の方法ですと、おそらくデータベースをいじる必要があると思うので、やり方がわかりません。

もっとスマートな方法がありましたら、どうか教えて下さい。

宜しくお願い致します。
468
投稿日時: 2017/5/17 21:56
対応状況: −−−
仙人
登録日: 2008/10/26
居住地:
投稿: 615
Re: 完全アコーディオン型カテゴリ
tplを編集して、現在の親カテゴリ(第1階層)の上にタグを追加すれば良いのでは無いでしょうか?
tpl上のHTMLの階層を変更すれば、データに手を加える事無く対応できるのでは無いかと思います。
可能か不可能かはHTMLの構造次第だとは思いますが・・・


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
■360°画像ビューワーimg360
■ECCUBE技術資料blog

y-mika
投稿日時: 2017/5/18 9:33
対応状況: 確認中
常連
登録日: 2017/5/9
居住地:
投稿: 59
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
居住地:
投稿: 615
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系構築カスタマイズご相談ください。
■360°画像ビューワーimg360
■ECCUBE技術資料blog

y-mika
投稿日時: 2017/5/18 10:11
対応状況: −−−
常連
登録日: 2017/5/9
居住地:
投稿: 59
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
居住地:
投稿: 615
Re: 完全アコーディオン型カテゴリ
>第一階層のみとのことで、第二階層にしたい親カテゴリ以下を全部pにしましたが、やっぱりこれではネストにならないでしょうか?
pタグに書き換えず、そのままでネストになると思いましたが、如何でしょうか?


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
■360°画像ビューワーimg360
■ECCUBE技術資料blog

y-mika
投稿日時: 2017/5/23 9:08
対応状況: 確認中
常連
登録日: 2017/5/9
居住地:
投稿: 59
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
居住地:
投稿: 615
Re: 完全アコーディオン型カテゴリ
javascrptやcssが分からないので、確証は持てませんが、
既存のtplの記述を見ると、このHTML構造で問題無いかと思います。

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


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
■360°画像ビューワーimg360
■ECCUBE技術資料blog

y-mika
投稿日時: 2017/5/25 16:51
対応状況: 確認中
常連
登録日: 2017/5/9
居住地:
投稿: 59
Re: 完全アコーディオン型カテゴリ
>javascrptやcssが分からないので、確証は持てませんが、
既存のtplの記述を見ると、このHTML構造で問題無いかと思います。

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


ありがとうございます。

遅ればせながらこれから試してみるところです。

(今日は別スレのFetch as Google問題で時間を大幅に取られてしまいました。)


表記崩れ等の問題が発生しましたら、またお尋ねしたいです。


宜しくお願い致します。
sumida
投稿日時: 2017/5/26 21:26
対応状況: −−−
仙人
登録日: 2013/2/10
居住地: 広島県呉市ときどき瀬戸内海
投稿: 638
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ペイメント

クレジットカード情報の非保持化対応

統計情報

総メンバー数は19,623名です
総投稿数は82,108件です

投稿数ランキング

1
seasoft
7331
2
AMUAMU
2712
3
nanasess
1632
4
yuh
1366
5
red
1059
6
fukap
907
7
shutta
827
8 ramrun 789
9
tsuji
782
10
umebius
671
11
tao_s
646
12 sumida 638
13
homan
633
14
468
615
15 karin 609
16 DELIGHT 571
17
patapata
502
18
flealog
483
19 tonton 436
20
ecbg
387


ネットショップの壺

EC-CUBEガイドブック
Copyright© LOCKON CO.,LTD. All Rights Reserved.