カラーミーショップ

カラーミーショップで複数階層のカテゴリーリストを表示する方法

2016-01-13

Pocket

カラーミーショップの無料テンプレートに実装されているカテゴリーリストは１階層のみとなっており、複数階層のカテゴリーを表示するにはカスタマイズが必要になります。

ここではテンプレートに直接リンクを記述する方法と、独自タグを使って動的にカテゴリーリストを表示する方法を紹介します。

カラーミーショップで複数階層のカテゴリーを表示する

カテゴリーのリンクを直接テンプレートに記述する

一番分かりやすいのはこちらの方法。カラーミーのタグを一切使用せずにHTMLのliタグでリンクを自作します。カテゴリーのリンクURLはカテゴリー設定画面から取得できます。

<ul>
    <li>
        <a href="link_url">カテゴリー大</a>
        <ul>
            <li><a href="link_url">カテゴリ小</a></li>
            <li><a href="link_url">カテゴリ小</a></li>
            <li><a href="link_url">カテゴリ小</a></li>
        </ul>
    </li>
    <li>
        <a href="link_url">カテゴリー大</a>
        <ul>
            <li><a href="link_url">カテゴリ小</a></li>
            <li><a href="link_url">カテゴリ小</a></li>
            <li><a href="link_url">カテゴリ小</a></li>
        </ul>
    </li>
</ul>

カラーミーキットで上記のコードを使用した場合は以下のようになります。スタイル用のclassをつけていないので見た目はおかしいですが、リンクは機能しています。

カラーミーのタグを使って自動的にカテゴリーを表示する

カラーミーショップの独自タグを使って自動的にカテゴリーを表示する方法もあります。独自タグマニュアルには記載されていませんが、以下のコードを使用するとカテゴリーが複数階層で表示されます。

<ul>
  <{foreach from=$category item=cat name=cat}>
    <li>
      <a href="<{$cat.link_url}>"><{$cat.name}></a>
      <{foreach from=$subcategory[$cat.bid] item=scat name=scat}>
        <{if $smarty.foreach.scat.first}><ul><{/if}>
          <li>
            <a href="<{$scat.link_url}>"><{$scat.name}></a>
          </li>
        <{if $smarty.foreach.scat.last}></ul><{/if}>
      <{/foreach}>
    </li>
  <{/foreach}>
</ul>

カラーミーキットに記述した場合は以下のようになります。先ほどの直接記述する場合と同じように表示されています。