こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回はクリエイターモードで"カテゴリーツリー"を3～5階層目まで表示するソース例をご紹介します！
クリエイターモードで使えるタグはタグリファレンスをご確認ください。
クリエイターモード
"カテゴリーツリー"3を3～5階層目まで表示したい
設定例
まずはじめに、カテゴリーのソースをみていきましょう。
|
1 |
<{section name=i loop=$category_menu.list}>～<{/section}> |
このソースまでが、登録されたカテゴリーを表示するための記述です。
（loop＝くりかえしてカテゴリーを表示）
|
1 |
<{if $category_menu.list[i].child_category.has_item}>～<{/if}> |
このソースは、そのカテゴリーが商品を持ってる（カテゴリーに商品が登録されている）時になかみを表示します。
ですので、
i=1階層目
j=2階層目
k=3階層目
・・・
と命名した場合、
|
1 |
$category_menu.list[i].child_category.list[j].child_category.list[k].・・・ |
このように記述をつないで下階層を増やすことができます。
・上記は続きアルファベットで命名しています。
※名前（文字）は任意です。
"カテゴリーツリー"3階層目まで表示するテンプレート
クリエイターモードのテンプレート【Advance】は、サイドメニューに、3階層目までカテゴリーが表示される記述が初期値に入力されています。
HTML編集初心者のショップ様は、【Advance】のテンプレート初期値のソースを適用するだけで、かんたんに表示できますのでご利用ください。
HTML編集が可能なショップ様で、クリエイターモードの他のテンプレートをカスタマイズしたいショップ様は、【Advance】テンプレート内に入力されているソースを参考にしてみましょう。
【Advance】の場合：【ショップデザイン】>【クリエイターモード】>【モジュール管理】
モジュール名「ナビゲーション」をクリック【モジュール編集】画面内に、以下のソースが入力されています。
▼HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<ul class="g-nav"> <{section name=i loop=$category_menu.list}> <li <{if $category_menu.list[i].child_category.has_item}>class="first"<{/if}>><a href="<{$category_menu.list[i].url}>" <{if $category_menu.list[i].child_category.has_item}>class="disable"<{/if}>><{$category_menu.list[i].name}></a> <{if $category_menu.list[i].child_category.has_item}> <ul> <li class="sp"><a href="<{$category_menu.list[i].url}>">all <{$category_menu.list[i].name}></a></li> <{section name=j loop=$category_menu.list[i].child_category.list}> <li <{if $category_menu.list[i].child_category.list[j].child_category.has_item}>class="first"<{/if}>><a href="<{$category_menu.list[i].child_category.list[j].url}>" <{if $category_menu.list[i].child_category.list[j].child_category.has_item}>class="disable"<{/if}>><{$category_menu.list[i].child_category.list[j].name}></a> <{if $category_menu.list[i].child_category.list[j].child_category.has_item}> <ul> <li class="sp"><a href="<{$category_menu.list[i].child_category.list[j].url}>">all <{$category_menu.list[i].child_category.list[j].name}></a></li> <{section name=k loop=$category_menu.list[i].child_category.list[j].child_category.list}> <li><a href="<{$category_menu.list[i].child_category.list[j].child_category.list[k].url}>"><{$category_menu.list[i].child_category.list[j].child_category.list[k].name}></a></li> <{/section}> </ul> <{/if}> </li> <{/section}> </ul> <{/if}> </li> <{/section}> </ul> |
・【ショップデザイン】>【クリエイターモード】>【デザインセット一覧】で、【Advance】のデザインセットを追記してテンプレート全体のHTML・CSSを確認することができます。
※「ショップに適用」しなけければ、ショップに反映せずにソースを見ることができます。
"カテゴリーツリー"3～5階層目まで表示するソース例
他のテンプレートの場合の例をみていきましょう。
ここでは、【Debut】のカスタマイズソース例をみていきます。【Debut】は、ヘッダーにカテゴリーツリーがあるので、ヘッダー内を編集します。
【ショップデザイン】>【クリエイターモード】>【モジュール管理】
モジュール名「ヘッダー」をクリックして【モジュール編集】画面を表示します。
入力例を参考に3～5階層目までを表示してみましょう。
▼HTML例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<li class="navbar-list-main navbar-list-parent"><span class="navbar-list-main-link">ITEM</span> <div class="navbar-sub"> <div class="navbar-sub-in"> <{section name=i loop=$category_menu.list}> <dl class="navbar-sub-list"> <dt class="navbar-sub-list-title"><a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a></dt> <{if $category_menu.list[i].child_category.has_item}> <{section name=j loop=$category_menu.list[i].child_category.list}> <!--2階層目--> <dd class="navbar-sub-list-data"><a href="<{$category_menu.list[i].child_category.list[j].url}>"><{$category_menu.list[i].child_category.list[j].name}></a> <!--3階層目--> <{if $category_menu.list[i].child_category.list[j].child_category.has_item}> <ul> <{section name=k loop=$category_menu.list[i].child_category.list[j].child_category.list}> <li><a href="<{$category_menu.list[i].child_category.list[j].child_category.list[k].url}>"><{$category_menu.list[i].child_category.list[j].child_category.list[k].name}></a> <!--4階層目--> <{if $category_menu.list[i].child_category.list[j].child_category.list[k].child_category.has_item}> <ul> <{section name=l loop=$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list}> <li><a href="<{$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].url}>"><{$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].name}></a> <!--5階層目--> <{if $category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].child_category.has_item}> <ul> <{section name=m loop=$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].child_category.list}> <li><a href="<{$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].child_category.list[m].url}>"><{$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].child_category.list[m].name}></a></li> <{/section}> </ul> <{/if}> </li> <{/section}> </ul> <{/if}> </li> <{/section}> </ul> <{/if}> </dd> <{/section}> <{/if}> </dl> <{/section}> </div> </div> </li> |
・ソースは一例となります。自由にデザインを調整して表示しましょう。
・ソースの作成・修正方法、最適なサイズなどの作り方についてはサポート対象外です。
・有料となりますが、ショップ制作代行サービスとして、おてがるリニューアルサービスをご紹介させていただきます。
クリエイターモードで、カテゴリーツリーを増やして表示したい場合にどうぞご参考ください。
それではまた！
