0%

Programmingプログラミングナレッジ

Posted:2017.12.28

カラーミーショップでグループ機能の項目を自由にカスタマイズしてサイトへ出力する

引き続き、カラーミーショップで使える小技です。前回は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番目の項目を出力させています。このようにすることで、登録したグループを自由に範囲指定して出力できるようになります。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】