更新日: 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を使えばさらに自由にいじれるようになるので、近いうちにそちらもまとめてみたいと思います。