カラーミー制作で役立つ独自タグの豆知識

独自タグのアイキャッチ

カラーミーショップはSmartyというテンプレートエンジンを使って、各ページを出力しています。
Smartyの理解にはプログラミング寄りの知識がすこし必要で、プログラミング経験がない方には難しく感じられます。

Smartyの学習は範囲が幅広いうえに難しいので、今回は独自タグ(Smartyの仕組みの一部分)にしぼって説明します。
独自タグを使いこなせると、カスタマイズの幅がぐっと広がります。

Smarty マニュアル(公式)を併せて読むとしっかりとした知識になります。

独自タグの知っておくと便利な知識

独自タグ

テンプレートの中で見かけるHTML構文でない部分で、<{$shop_name}> のように<{$~}>が独自タグです。

独自タグは文字などが入っている入れ物です。
プログラミング学習時によく登場する、変数・配列・オブジェクトのようなものです。
私たちは、サーバー側(カラーミー)があらかじめ用意してくれた独自タグを利用します。

参考)独自タグ一覧(PC、スマートフォン) | カラーミーショップ マニュアル

デリミタ

Smarty マニュアルによると、 デリミタ=テンプレート言語の開始を表すものと説明してあります。
デリミタのデフォルトは中括弧 { で表し、 { } で囲んで、 テンプレートタグと呼びます。

カラーミーショップの場合、デリミタは<{ }>ですSmarty マニュアル(公式)を参考にするときは読み替える必要があります。

サーバー(カラーミー)側でSmartyの構文解析を行うわけですが、 デリミタを構文解釈時の目印にしています。
デリミタをデフォルトではなく、<{ }>にしているおもな理由は「Smarty の構文解析を回避する」ためです。
JavaScriptやCSSでも { } を使うため、ごっちゃになると、Smartyの構文解釈時の目印として機能しなくなります。

ブラウザ表示までの処理順

Smartyはサーバー側(カラーミー)で処理します。クライアント側(ブラウザ)よりも先に処理します。
このことから考えても、独自タグはJavaScriptに変数として渡すことができます。

渡し方はいろいろありますが、JavaScriptのコード内に直接書いても動きます(カラーミーのデリミタを<{ }>にした利点ですね)。

下のようなコードを商品詳細ページのテンプレート内で試すと渡せていることがわかります。
先に独自タグが文字列(下の場合は商品ID)に変換されて、そのあとにJavaScriptが実行される順番です。

<script>
  alert("<{$product.id}>")
</script>

独自タグのスコープ(参照できる範囲)

独自タグが変数のようなものだとしたら、これまたプログラミング学習時によく登場するスコープも設定されています。
カラーミーショップでは、特定のテンプレート内でしか参照できません。
よくある話ですが、レビューの★表示を商品一覧ページで表示できないのもスコープの問題です。

独自タグ一覧」の共通という見出しのついている独自タグのみ、どのテンプレートからでも参照できます(フリーページからでも)。

独自タグの中身をみる

ガッツリ作り込む方は独自タグの中をみる必要が出てきます。
何が入っているのか、どういう名前で参照できるのか。下例ですと、<{$group}>という独自タグの中身を調べています。


<{$group[0].id}>とすれば、”1961614”が取り出せるのがわかります。
書き方は「Smarty マニュアル 書式」やPHP入門書のオブジェクトの説明を読むと、なんとなくわかってきます。
<{$group|@debug_print_var:0:100}>の出力結果

Array (2)
0 => Array (5)
  id => "1961614"
  link_url => "https://naeco.shop-pro.jp/?mode=grp&gid=1961614"
  img_url => ""
  name => "グループ"
  level => "1"
1 => Array (5)
  id => "1961624"
  link_url => "https://naeco.shop-pro.jp/?mode=grp&gid=1961624"
  img_url => ""
  name => "グループ4"
  level => "1"

カテゴリー、グループ項目の自動表示

カラーミーショップには、商品を区分する機能として、カテゴリーとグループがあります。
カテゴリーは親子関係をもつ2階層、グループは8階層まで作れます。

カラーミーショップを使っていると、カテゴリー・グループの使い分けがピンとこないこともあると思います。
グループだけあれば、カテゴリーは不要ではないかと思いがちですが、そんなことはありません。

グループでサイドメニュー、ドロップダウンメニューなどのメニュー類を表示すると、2階層目以降が自動表示できません。
独自タグ<{$group}>の中には子グループの情報が含まれていないためです。
メニューなどでグループの下層を表示させるためはリンクを直打ちする必要があり、グループ増減時に作業が発生することになります。
グループは極力階層にせずに、属性・タグのような使い方にしたほうが、自動表示をさせる場合には都合よいです。

メニューで階層表示する場合はカテゴリーで、ただし2階層まで。Smartyで繰り返し文を書けば自動表示できます。

独自タグを変換する修飾子

独自タグ(変数)の中身はサーバー側でセットしますので、表示したい形に変換する際に修飾子(=Smartyの機能)が便利です。
似たようなことは、手間さえかければJavaScriptでもできます(もちろん手間なので可能な限りSmartyを使います)。
Smarty マニュアルの「変数の修飾子」参照。

HTMLタグ削除 strip_tags

商品名への付加画像設定(Newマークなど)を付けている場合、独自タグ<{$product.name}>は以下のように、商品名の前に画像表示用のHTMLタグが付きます。

<img class="new_mark_img1" src="//img.shop-pro.jp/img/new/icons1.gif" style="border:none;display:inline;margin:0px;padding:0px;width:auto;">商品名

商品名だけを取り出す場合は、変数の修飾子(strip_tags)を |(パイプ)で修飾子をつなぐことで実行します。

<{$product.name|strip_tags:false}>  /* HTMLタグが除去されて商品名だけになる */

文字を省略する truncate

商品の簡易説明文が長すぎる場合に、以下 ... に置き換えて、半角30文字(全角15文字)に収まるように省略します。
スマートフォンのレイアウトの都合で、商品名を省略するショップもたまに見かけます。

<{$productlist[num].s_expl|truncate:30:"..."}>

文字を置き換える replace、regex_replace

replaceはシンプルな置換、 regex_replaceは正規表現を使った複雑な置換が可能です。

下の例では、販売価格のうしろに付く(税込)の文字サイズが大きいのが気になるときに使います。
置換して、インラインでスタイルを入れています。"(ダブルクォーテーション)はエスケープ処理します。

<{$product.sales|replace:"(税込)":"<span style=\"font-size:0.75em;font-weight:normal;\">(税込)</span>"}>

四則演算する

販売価格から、円(税込)、カンマ, などの文字を取り除けば、四則演算も可能です。
assignは変数に値を割り当てる構文です。
下例のように|(パイプ)で修飾子を複数つなぐことも可能です。

<{assign var="prc1" value="10,000円(税込)"}>
<{assign var="prc2" value="20,000円(税込)"}>

<{math equation="a+b"
  a=$prc1|replace:"円(税込)":""|replace:",":""
  b=$prc2|replace:"円(税込)":""|replace:",":"" assign="ans"}>

<{$ans}>

オプションを作り込む

通常、プルダウン・表形式から選択し表示しますが、デザインをボタン形式にしたり、既存形式にはない表示をする場合は、独自タグからデータを引っ張ってきて表示します。
<{$option_view_data|@debug_print_var:0:100}>で、中に何が入っているか確認しておけば、作り込む際の助けになります。
下は商品詳細ページで使うオプション関連の独自タグ例です。

<{$option_price.min}> オプションの最大の販売価格
<{$option_price.max}> オプションの最小の販売価格
<{$option_value}> オプションID、オプション項目名
<{$option_view_data}> オプションの販売価格、在庫数など

オプション項目レイアウト例

カートに入れた商品を見る

独自タグ<{$incart}> にはカートインした商品情報が入っています。
ページ遷移せずに独自タグでカートの中身を表示することができます。

カートの中身表示デモ

商品詳細ページでカテゴリーを取得

商品詳細ページにはカテゴリーを取得する独自タグがありません。「特定のカテゴリーの場合に〇〇する」というように、商品詳細ページでカテゴリーに基づいて条件分岐をしたい場合が結構あります。
その場合は、パンくずリスト用として共通にある、<{$bid_link}> <{$bid_name}> からカテゴリーIDやカテゴリー名を切り出して使います。

商品説明を分割する

商品に紐づいている情報を、商品詳細ページの別々の箇所に埋め込みたい場合、「商品説明」欄を分割して表示する方法が使えます。
適当な目印を入れて分割するか、<div>などで囲ってjQueryのセレクタで切り分けるかです。

いずれの場合も、独自タグ<{$product.explain}>をJavaScript(jQuery)に渡して処理します。
以前記事を書きましたので、参考にどうぞ。

執筆者

えいじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴11年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

ご相談・お問い合わせはこちら