引き続き、カラーミーショップで使える小技です。前回はSmartyの基本となるループ表示を使ったデフォルトのリスト表示でしたが、今回は少しカスタマイズしてグループのカテゴリを自由に指定して出力する方法です。  

カラーミーのグループ項目をカスタマイズして出力し階層構造のように見せる

前回紹介した方法ですと、このままグループがリスト表示されるのですが、全ての項目が並列でリスト表示されてしまいます。ですので例えば親子グループなどの階層構造を持ったカテゴリーは表現できません。   そこで少しカスタマイズして自由にリスト項目を出力できるようにするのですが、その前に注意する点があります。グループのカテゴリ機能について、カラーミーでは仕様上の問題で2階層目までしかリスト表示できないようです。なので、リストに表示させるグループは2階層目までに登録しておく必要があります。ここまで出来れば準備完了です。  

項目の範囲を指定してループを出力

ループを出力するsectionタグですが、基本的な形ですとloop属性に$groupという値を入れることで全ての項目を出力していました。ここに数値を入れることで出力する範囲を指定することができます。   下記のコードではグループ1一番目に親グループ、2番目から6番目には子グループを登録している前提で、親子カテゴリーとして階層構造を持った見せ方をさせる方法です。   【sample.tpl】※一部抜粋

<!-- ループセクション start -->
<{section name=num loop=$group}>

<!-- ループセクションヘッダー start -->
<{if $smarty.section.num.first}>

<!-- 親グループにあたる項目を範囲指定して出力 -->
<{section name=parent01 start=0 loop=1}>
<h1><{$group[parent01].name}>
</h1>
<{/section}>

<ul>

  <!-- 子グループにあたる項目を範囲指定して出力 -->
  <{section name=child01 start=1 loop=5}>
  <li><{$group[child01].name}>
  </li>
  <{/section}>

<{/if}>
<!-- ループセクションヘッダー end -->

<!-- ループセクションフッター start -->
<{if $smarty.section.num.last}>
</ul>
<{/if}>
<!-- ループセクションフッター end -->

<{/section}>
<!-- ループセクション end -->

  セクションヘッダーとセクションフッターの間に入れてしまうと倍々の数でループが出力されるので、セクションヘッダーもしくはセクションフッターの中でループさせるようにします。   まずsectionタグのname属性にはわかりやすいように適当な名前をつけます。そしてここがポイントになりますが、start属性にはループを開始させる並び順番号（＝開始インデックス）を、loop属性にはループが終了する並び順番号（＝終了インデックス）を指定することでループを出力させる範囲を自由に指定できます。   上記サンプルでは、見出しのところでグループ並び順の1番目である親グループ項目を出力させ、その直下のリストで小グループとする並び順2〜6番目の項目を出力させています。このようにすることで、登録したグループを自由に範囲指定して出力できるようになります。