テンプレートカスタマイズの基礎

マルチリンガルカートのデザインテンプレートは、HTMLテンプレートに変数や関数を埋め込むことで、システムからデータを取り出したり、あるいは渡したり、条件によって表現を変えることができます。

マルチリンガルカートは、smartyテンプレートエンジンを採用しています。

さらに詳しく知りたい場合は、こちらをご参照ください。

記載ルール

マルチリンガルカートのテンプレートエンジンによる処理が行われる対象は、以下のように記載された部分を対象とします。

それ以外については、通常のHTMLとして扱われます。

<{ から始まり、 }> で終わる記載部分

変数（状況に応じ変化する文字）

HTMLテンプレートの中に変化する文字を埋め込みたい場合に利用します。

ルール<{ }>で囲まれる間に 変数 （変化する値の入った入れ物）の名前のみ記載します。

例：

<table border=1>

<tr>

<td bgcolor="yellow">お名前</td>

<td><{$name}></td>

</tr>

</table>

※$nameという変数には"山田太郎"という値が入っている

実際の表示

Point!：

<{$name}>は山田太郎として扱われ、ほかはHTMLの表として扱われます。

条件分岐（if関数）

ある条件によって、表示内容を切り替えたい場合に利用します。

ルール<{if}>からルール<{/if}>で囲まれる間に記載します。

開始と終了の2つはペアである必要があり、片方がない場合は、正しく表示できません。

（マルチリンガルカートでは、デザインテンプレートの編集画面で保存する際にエラーになります）のでご注意ください。

<{if 条件式}>

条件式が真(true)の時に実行される処理

<{else}>

条件式が偽(false)の時に実行される処理

<{/if}>

例1：

<table border=1>

<tr>

<td bgcolor="yellow">お名前</td>

<td><{$name}></td>

<td><{if $seibetsu == "male"}>男<{else}>女<{/if}></td>

</tr>

</table>

※変数の内容 $name="山田太郎" $seibetsu="male"

実際の表示

Point!：

条件は開始の<{if }>の中に記載します。

また、条件は以下のように記載します。

比較演算子

論理演算子

例2：

<table border=1>

<tr>

<td bgcolor="yellow">お名前</td>

<td><{$name}></td>

<td><{if $seibetsu == "male"}>男{elseif $seibetsu == "female"}>女<{else}>不明<{/if}></td>

</tr>

</table>

※変数の内容 $name="山田太郎" $seibetsu="unknown"

実際の表示

<!-- 通貨選択 -->

<{if count($tsuka_conv_slct) > 0}>

<div id="header_lang_select_area">

<form action="<{$tsuka_conv_slct_acturl}>" method="get" id="f_head_tsuka_conv_change">

<{$tsuka_conv_slct_hidden}>

通貨選択

<select name="tsuka_conv" id="head_tsuka_conv_change_tsuka_id" onchange="if (typeof my_head_change_tsuka == 'function') {my_head_change_tsuka('head_tsuka_conv_change_tsuka_id');my_head_change_url('f_head_tsuka_conv_change');return false;} document.getElementById('f_head_tsuka_conv_change').submit()">

<{section name=key loop=$tsuka_conv_slct}>

<option value="<{$tsuka_conv_slct[key].id}>"<{if $tsuka_conv_slct[key].on}> selected<{/if}>><{$tsuka_conv_slct[key].name}></option>

<{/section}>

</select>

</form>

</div>

<br class="clearing">

<{/if}>

<!--// 通貨選択 -->

設置した結果は以下のようになります。

この例文では、

if関数で「当該店舗で使用が許可された通貨リスト（$tsuka_conv_slct）」があるかどうかを調べ、通貨リストがある場合はsection関数でその一覧を取得し、

HTMLと組み合わせて、お客様が、通貨を選べる選択肢（ドロップダウンリスト）として出力しています。