カラーミー 2022年09月09日 naeco.jp

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

独自タグのアイキャッチ

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

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

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

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

独自タグ

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

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

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

デリミタ

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

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

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

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

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

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

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

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"

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

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

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

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

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

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

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

HTMLタグ削除 strip_tags

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

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は変数に値を割り当てる構文です。
下例のように｜（パイプ）で修飾子を複数つなぐことも可能です。

Smarty 

<{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）に渡して処理します。
以前記事を書きましたので、参考にどうぞ。

カラーミーショップの商品説明欄を2倍使う便利な裏技

執筆者

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

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

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