こんにちは、hirofficeです。
makeshopでカスタマイズを行っていると、「特定のカテゴリーの下層カテゴリーだけを表示したい」という要望が出てくることがあります。
ですが、公式テンプレートやmakeshopが公開している基本のタグでは、すべてのカテゴリーがループで表示されてしまう仕様になっています。
今回は、その仕様を回避し、任意の親カテゴリーの下層カテゴリーだけを表示させるカスタマイズ方法を見つけたのでご紹介します。
実現したいこと
たとえば、カテゴリー識別コードが tableware の親カテゴリーがあるとして、その下の「お皿」「カトラリー」「グラス」などの子カテゴリーのみをループ表示したいというケースを想定します。
カスタマイズ用コード
以下が、そのための具体的なコードです。
<ul class="side-category-list">
<{section name=i loop=$category_menu.list}>
<{if $category_menu.list[i].code == 'tableware'}>
<{if $category_menu.list[i].child_category.has_item}>
<li class="side-category-item">
<p class="accordion"><{$category_menu.list[i].name}></p>
<ul class="side-category-child-item close">
<!--「すべての〇〇」リンクを表示したい場合は以下を有効化 -->
<!--
<li>
<a href="<{$category_menu.list[i].url}>" class="child-item">
すべての<{$category_menu.list[i].name}>
</a>
</li>
-->
<{section name=j loop=$category_menu.list[i].child_category.list}>
<li>
<a href="<{$category_menu.list[i].child_category.list[j].url}>" class="child-item">
<{$category_menu.list[i].child_category.list[j].name}>
</a>
</li>
<{/section}>
</ul>
</li>
<{/if}>
<{/if}>
<{/section}>
</ul>解説
-
tablewareの部分には表示させたい親カテゴリーの識別コードを指定してください。 - 該当するカテゴリーの子カテゴリーが存在しているかどうかを
has_itemで確認しています。 - コメントアウト部分の「すべての〇〇」リンクは、必要に応じて有効化可能です。
補足：特定のカテゴリーを除いて表示したい場合
逆に、「特定のカテゴリーは除外して、その他すべてを表示したい」というケースもあるかと思います。
たとえば、category_menu.list の中からカテゴリー識別コードが all_items のものだけを除外し、それ以外のカテゴリーを一覧表示したい場合は、以下のように記述します。
<ul class="top-ct-list">
<{section name=i loop=$category_menu.list}>
<{if $category_menu.list[i].code != 'all_items'}>
<li>
<a href="<{$category_menu.list[i].url}>">
<{$category_menu.list[i].name}>
</a>
</li>
<{/if}>
<{/section}>
</ul>解説
loop=$category_menu.listでカテゴリー一覧をループ。<{if $category_menu.list[i].code != 'all_items'}>で、カテゴリー識別コードがall_itemsでない場合にのみ出力。- 除外対象のカテゴリー識別コードは任意に変更可能です。
複数カテゴリーを除外したい場合
複数のカテゴリー識別コードを除外したい場合は、条件を && で追加します：
<{if $category_menu.list[i].code != 'all_items' && $category_menu.list[i].code != 'sale'}>
このように書けば、all_items と sale の2つを除いたリストが表示されます。
この方法を使えば、ナビゲーションやサイドメニューに不要なカテゴリーを表示させないようにできるため、ユーザー導線をスッキリと整理することができます。サイト構成に応じてぜひ活用してみてください。
まとめ
makeshopのカテゴリー表示は一見自由度が低いように感じられますが、テンプレートタグを少し工夫することで、表示の制御が可能です。
今回のカスタマイズで、より柔軟なカテゴリー設計ができるようになりますので、ぜひ活用してみてください。
ご質問や「この条件での表示はできる？」などの相談があれば、お気軽にコメントください！