こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回はクリエイターモードで”カテゴリーツリー”を3～5階層目まで表示するソース例をご紹介します！
クリエイターモードで使えるタグはタグリファレンスをご確認ください。

クリエイターモード
“カテゴリーツリー”3を3～5階層目まで表示したい

設定例

まずはじめに、カテゴリーのソースをみていきましょう。

<{section name=i loop=$category_menu.list}>～<{/section}>

このソースまでが、登録されたカテゴリーを表示するための記述です。
（loop＝くりかえしてカテゴリーを表示）

<{if $category_menu.list[i].child_category.has_item}>～<{/if}>

このソースは、そのカテゴリーが商品を持ってる（カテゴリーに商品が登録されている）時になかみを表示します。
ですので、

i=1階層目
j=2階層目
k=3階層目
・・・
と命名した場合、

$category_menu.list[i].child_category.list[j].child_category.list[k].・・・

このように記述をつないで下階層を増やすことができます。

“カテゴリーツリー”3階層目まで表示するテンプレート

クリエイターモードのテンプレート【Advance】は、サイドメニューに、3階層目までカテゴリーが表示される記述が初期値に入力されています。

HTML編集初心者のショップ様は、【Advance】のテンプレート初期値のソースを適用するだけで、かんたんに表示できますのでご利用ください。

HTML編集が可能なショップ様で、クリエイターモードの他のテンプレートをカスタマイズしたいショップ様は、【Advance】テンプレート内に入力されているソースを参考にしてみましょう。

【Advance】の場合：ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理

モジュール名「ナビゲーション」をクリック【モジュール編集】画面内に、以下のソースが入力されています。

▼HTML

<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>

“カテゴリーツリー”3～5階層目まで表示するソース例

他のテンプレートの場合の例をみていきましょう。
ここでは、【Debut】のカスタマイズソース例をみていきます。【Debut】は、ヘッダーにカテゴリーツリーがあるので、ヘッダー内を編集します。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理

モジュール名「ヘッダー」をクリックして【モジュール編集】画面を表示します。
入力例を参考に3～5階層目までを表示してみましょう。

▼HTML例

<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>

クリエイターモードで、カテゴリーツリーを増やして表示したい場合にどうぞご参考ください。
それではまた！