更新日: 2018 / 08 / 16

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

カテゴリー: コーディング

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

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

このページでは独自タグの基本的な使い方と、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>

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

ループ名ページ内容
freepage共通フリーページ
category共通大カテゴリーのリスト
group共通グループのリスト
incart共通カートの中身のリスト
recommend共通おすすめ商品情報
seller共通売れ筋商品情報
sk_payment共通お支払方法のリスト
sk_delivery共通配送方法のリスト
history共通最近チェックした商品情報
favorite共通お気に入り機能情報
newsトップ新着情報
new_itemトップ新着商品情報
pushトップイチオシ商品情報
otherimg詳細その他画像
option詳細オプションのリスト
option_value詳細各オプション値のリスト
option_price詳細オプション価格
together_product詳細「組み合わせ購入パターン」情報
reviewlist詳細商品詳細画面にレビュー一覧を表示
group_breadcrumb詳細グループのパンくずリスト
sub_category一覧サブカテゴリーのリスト
group_breadcrumb一覧グループのパンくずリスト
sub_group一覧グループの下位表示のリスト
optionオプションオプションのリスト
option_valueオプション各オプション値のリスト
option_itemオプションオプションの値段と在庫数のリスト
privacyプライバシーオプションのリスト

条件分岐(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マニュアル 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を使えばさらに自由にいじれるようになるので、近いうちにそちらもまとめてみたいと思います。