2016年3月6日

カラーミーショップにおけるSmarty入門

【仕事サイトにSmartyの関連記事を書きました】
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (1/2) 
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (2/2)

カラーミーショップは、PHP用のテンプレートエンジン Smartyを使っています。
カラーミーショップのカスタマイズにおいてもたまーに使いますが、知らなくてもそんなに不便はありません。
今回は、実践的なサンプルを二つ紹介します。

Smartyとは?って方は、公式でご確認ください。まとまってます。「Chapter 1. Smarty とは? | Smarty


Smarty使用の例としては、テンプレート内のこういうやつですね。条件分岐、ループなどに使用されています。
<{section name=num loop=$category}>

あと、カラーミーから提供されている独自タグ。これもそうです。カラーミーが用意してくれた変数に値(値、文字列など)が入っています。
ちなみに、JavaScript内でも使えます。
<{$product.id}>

<{ }>=デリミタ、Smarty構文ですよ、というタグ。

マニュアルの細かい部分までは不要ですので、がっつり読まなくても大丈夫です。
Chapter 5. 変数の修飾子」は、使う可能性大です。


1. 変数の修飾子を使った例

<{if $recommend[num].name|regex_replace:'/検索文字列/':'x' ne $recommend[num].name}>
    <{assign var="style" value="red"}>
<{else}>
    <{assign var="style" value="other"}>
<{/if}>

Chapter 5. 変数の修飾子」にも記載されていますが、reg_replaceは、検索・置換機能です。

この例は、おすすめ商品の商品名のなかに検索文字列があればxに置換し、元の商品名と比較しています。
元の商品名と一致しない場合(すなわち、検索文字列がヒットした場合)は、条件分岐はtrueで、styleにredをセット。それ以外は条件分岐がfalseで、styleにotherをセット。

商品名のなかに何か(型番、色、形状、サイズ、グループなど)あらかじめ仕込んでおくと、絞込んだり、条件分岐に使えます(カスタマイズしていると、こういう判断条件が必要になったりすることがあるんです)。

xに置換して比較してというように少々回りくどいですが、Smartyの場合、検索文字列の有無は、こんな風にして判断します。

assignで、変数に値を代入できます。独自タグと使い方は同じで、<{$style}>を埋め込めば、値を使用できます。

例ではひとつですが、|(パイプ)をつなげていくと、左から順番に変数の修飾子を使うことができます。


2. Smartyの予約変数を使った例

予約変数 {$smarty} | Smarty」を使用し、URLクエリを取って条件分岐に使ってみます。
予約変数はカラーミーショップのテンプレートにもしばしば登場しています(<{smarty.section.num.first}><{$smarty.section.num.iteration}>などがそう)。
<{if $smarty.get.keyword == ""}>
    <input type="text" name="keyword" id="search_textarea" placeholder="検索" />
<{else}>
    <input type="text" name="keyword" id="search_textarea" value="<{$smarty.get.keyword|escape:'html':'EUC-JP'}>" />
<{/if}>
検索窓にキーワードを入れて商品検索をするときに、ページ遷移すると入力したキーワードが消えてしまいます。消さずに表示したままにしてほしい、という要望があったときに使えます。

URLクエリからキーワード(keyword)を取ってきて、検索窓にセットします(escape以下は、キーワードが全角文字の場合にEUC-JPでエンコードする必要があるため)。

URLクエリとは、「http://www.example.com/?mode=srh&sort=p&keyword=test」の?以降の文字列のこと。PHPにパラメータ(今回は検索キーワード)を渡すときに使います。

妙なところに改行が入っていますが、ブログの表示の都合上で、本来は不要です。


3. まとめ

今回の例もそうですし、文字列を加工することもそうですが、どちらともJavaScriptでできるんですが、Smartyでやるほうが断然スマートです。

過去記事にもSmartyの話題がいくつかあります。ご参考にどうぞ。
ラベル:Smarty