カラーミーショップ 独自タグの使い方まとめ

カラーミーショップの独自タグの使い方をわかりやすく解説していきます。

カラーミーショップの独自タグは変数として使えるもの、ループの中で使えるものがありますが、ドキュメントではあまり詳細に解説されていないこともあって少しわかりにくいかもしれません。

このページでは独自タグの基本的な使い方と、Smartyとからめた便利な使い方を解説します。

カラーミーショップ独自タグの基本的な使い方

カラーミーショップで使える独自タグ一覧は公式ページで見ることができます。

カラーミーショップ独自タグ一覧

公式ページの記述例だとわかりにくいのでもう少し詳しく書いてみます。

変数タグの使い方

変数タグはデータとイコールになっているもので、変数を書くだけで値を出力できます。

書き方は次のように、マニュアルにある変数名に$をつけ、<{}>で囲めばOK。

<{$shop_name}>

通常のHTMLタグと合わせて使えばショップタイトルをH1要素で表示しトップページにリンクするといったことも可能。

<h1><a href="<{$home_url}>"><{$shop_name}></a></h1>

ループタグの使い方

ループタグは商品一覧やカテゴリ一覧など複数の情報を出力する場合に使います。

書き方は<{section}>タグにループ名をつけるだけ。ループの終わりには必ず閉じタグ<{/section}>を入れます。

<{section name=num loop=$ループ名}>
<!-- ここに中身 -->
<{/section}>

ループの中身はループ名に[num]をつけてそのあとに値を追加します。

ループも変数と同じようにHTMLタグと合わせて使用できます。その際繰り返す要素の囲み方を間違えないように注意が必要です。

おすすめ商品をリストで表示する場合はaタグではなく、liタグをループします。

<!-- 間違い -->
<ul>
  <li>
  <{section name=num loop=$recommend}>
    <a href="<{$recommend[num].link_url}>">商品名: <{$recommend[num].name}></a>
  <{/section}>
  </li>
</ul>

<!-- 正解 -->
<ul>
<{section name=num loop=$recommend}>
  <li>
    <a href="<{$recommend[num].link_url}>">商品名: <{$recommend[num].name}></a>
  </li>
<{/section}>
</ul>

マニュアルだけだとどれがループでどれが変数かがわかりにくいのでここにまとめておきます。

条件分岐（if文）の使い方

条件分岐はifのあとに条件式を書けばOK。ループと同じで閉じタグを忘れないようにしましょう。

単純なifだけでなく、if-elseif-elseも使用可能です。

<!-- おすすめ商品が0でなければ中身を表示 -->
<{if $recommend_num != 0}>
  <!-- 中身 -->
<{/if}>

<!-- おすすめ商品の数で中身を変化 -->
<{if $recommend_num >= 10}>
  <!-- 10以上で表示 -->
<{elseif $recommend_num >= 5}>
  <!-- 5以上で表示 -->
<{else>
  <!-- 5未満で表示 -->
<{/if}>

<!-- 現在のページがトップページなら中身を表示 -->
<{if $tpl_name == "top"}>
  <!-- 中身 -->
<{/if}>

<!-- ログイン中なら中身を表示 -->
<{if $members_login_flg == true}>
  <!-- ログイン中なら表示 -->
<{else}>
  <!-- ログインしてない場合に表示 -->
<{/if}>

カラーミーショップ独自タグをSmartyと合わせて使う

カラーミーショップではSmartyというPHPフレームワークを使っているため、テンプレート内でもSmartyの利用が可能です。

Smartyマニュアル

ループ回数を制限

トップページの商品一覧で商品の表示数を制限したい場合にはmaxを使います。

<{section name=num loop=$news max=5}>
  <!-- ニュースを5つ表示 -->
<{/section>

現在のループ数を取得して売れ筋商品のランキングを表示

ループ中に現在のループ回数を取得するにはiterationを使います。

<!-- [商品名]は、1位です のように表示 -->
<{section name=num loop=$seller}>
  <{$seller[num].name}>は、<{$smarty.section.num.iteration}>位です。
<{/section>

まとめ

カラーミーショップはテンプレートを自由に変更できるのでやりたいことがいろいろできるのが良いところ。

ここでははSmartyとからめて使ってみましたが、APIを使えばさらに自由にいじれるようになるので、近いうちにそちらもまとめてみたいと思います。