カートの支払・配送方法選択画面のデザイン変更
バージョン1.2.0以降
(一部1.4.0以降 : その他拡張 )
お客様情報入力フォームのデザイン変更について
今まで入力した内容の表示と支払・配送方法の選択画面のデザインは
カートのフォーム部分のデザインを変更するのCart03Page.htmlにて表示されています。
ショッピングカートの中身の表示ですが、
カートのお客様情報入力フォームのデザイン変更と同様にsoy:id="item_list"で囲うことで表示できます。
お届け先情報の表示は
<table>
<tr>
<th>お名前</th>
<td>
<!-- soy:id="user_name" /--> (<!-- soy:id="user_reading" /-->)
</td>
</tr>
<!-- soy:id="is_use_address" -->
<tr>
<th>宛先</th>
<td>
<!-- soy:id="send_name" /--> (<!-- soy:id="send_reading" /-->)<br />
<!-- soy:id="send_zip_code" /--> <!-- soy:id="send_area" /--><br />
<!-- soy:id="send_address1" /--> <!-- soy:id="send_address2" /-->
</td>
</tr>
<!-- /soy:id="is_use_address" -->
</table>
| soy:id | タグ | 詳細 |
|---|---|---|
| user_name | すべて | 注文者名を表示します |
| user_reading | すべて | 注文者名のフリガナを表示します |
soy:id="is_user_address"で囲んだ箇所は、お届け先を表示させることができ、
前のページでお届け先を入力した場合はお届け先、
お届け先を入力しなかった場合はお客様情報に入力した内容が表示されます。
| soy:id | タグ | 詳細 |
|---|---|---|
| user_name | すべて | 注文者名を表示します |
| user_reading | すべて | 注文者名のフリガナを表示します |
| send_zip_code | すべて | 郵便番号を表示します |
| send_area | すべて | 県名を表示します |
| send_address1 | すべて | アドレス1を表示します |
| send_address2 | すべて | アドレス2を表示します |
続いて、
支払方法関連と配送方法関連のモジュールを表示させる方法ですが、
<form soy:id="order_form"></form soy:id="order_form">
で囲った箇所に支払方法と配送方法の表示の記述をしていきます。
支払方法モジュール
<table>
<thead>
<tr>
<th> </th>
<th>お支払方法</th>
<th>手数料</th>
</tr>
</thead>
<tbody>
<!-- soy:id="payment_method_list" -->
<tr>
<td rowspan="2">
<input type="radio" soy:id="payment_method" />
</td>
<td><!-- soy:id="payment_name" /--></td>
<td><!-- soy:id="payment_charge" /--></td>
</tr>
<tr>
<td colspan="2">
<!-- soy:id="payment_description" /-->
</td>
</tr>
<!-- /soy:id="payment_method_list" -->
</tbody>
</table>
soy:id="paymant_method_list"で囲んだ箇所が、
インストールされている配送系のプラグインの数だけ表示されます。
その中に、
配送方法選択のラジオボタンを用意します。
<input type="radio" soy:id="payment_method" />
あとは、
支払方法名、支払代金と支払方法の説明を追加します。
| 配送方法 | soy:id="payment_name" |
|---|---|
| 配送代金 | soy:id="payment_charge" |
| 配送方法の説明 | soy:id="payment_description" |
最後に、
支払方法が選択されていなかった場合に表示するエラー文言ですが、
<!-- soy:display="has_payment_error" -->
支払方法が選択されていません。
<!-- /soy:display="has_payment_error" -->
soy:display="has_payment_error"で囲まれた箇所が表示されます。
配送モジュール
<table class="form_table">
<thead>
<tr>
<th> </th>
<th>配送方法</th>
<th>送料</th>
</tr>
</thead>
<tbody>
<!-- soy:id="delivery_method_list" -->
<tr>
<td rowspan="2">
<input type="radio" soy:id="delivery_method" />
</td>
<td><!-- soy:id="delivery_name" /--></td>
<td><!-- soy:id="delivery_charge" /--></td>
</tr>
<tr>
<td colspan="2">
<!-- soy:id="delivery_description" /-->
</td>
</tr>
<!-- /soy:id="delivery_method_list" -->
</tbody>
</table>
soy:id="delivery_method_list"で囲んだ箇所が、
インストールされている支払系のプラグインの数だけ表示されます。
その中に、
配送方法選択のラジオボタンを用意します。
<input type="radio" soy:id="delivery_method" />
あとは、
配送方法名、送料と配送方法の説明を追加します。
| 配送方法 | soy:id="delivery_name" |
|---|---|
| 送料 | soy:id="delivery_charge" |
| 配送方法の説明 | soy:id="delivery_description" |
最後に、
配送方法が選択されていなかった場合に表示するエラー文言ですが、
<!-- soy:display="has_delivery_error" -->
支払方法が選択されていません。
<!-- /soy:display="has_deliver_error" -->
soy:display="has_delivery_error"で囲まれた箇所が表示されます。
その他のモジュール(クーポンなど : 1.4.0以降)
<!-- soy:id="has_discount_method" -->
<h2>その他</h2>
<table class="form_table">
<tbody>
<!-- soy:id="discount_method_list" -->
<tr>
<td><!-- soy:id="discount_name" /--></td>
</tr>
<tr>
<td>
<div><!-- soy:id="discount_description" /--></div>
<!-- soy:id="has_discount_error" -->
<div class="error_box">
<ul>
<li soy:id="discount_error" class="error">○○が△△△△です。</li>
</ul>
</div>
<!-- /soy:id="has_discount_error" -->
</td>
</tr>
<!-- /soy:id="discount_method_list" -->
</tbody>
</table>
<!-- /soy:id="has_discount_method" -->
<!-- soy:id="has_discount_method" -->で囲んだ箇所は、
クーポン機能などのその他拡張プラグインがインストールされている時に表示され、
soy:id="discount_method_list"で囲んだ箇所が、
インストールされているその他のプラグインの数だけ表示されます。
続いて、
インストールしたプラグイン名、プラグインの説明を追加します。
| その他拡張名 | soy:id="discount_name" |
|---|---|
| その他拡張の説明 | soy:id="discount_description" |
最後に、
表示するエラー文言ですが、
<!-- soy:display="has_discount_error" -->
エラー文言
<!-- /soy:display="has_discount_error" -->
soy:display="has_discount_error"で囲まれた箇所が表示されます。
次ページへ遷移するためのボタンの用意ですが、
<input type="submit" name="prev" value="戻る" />
<input type="submit" name="next" value="次へ" />
input type="submit"またはtype="image"のnameにprevまたはnextを挿入したボタンを用意し
任意の箇所に各項目のsoy:idを記述していけば動作します。
(必須項目は必ず記述してください)
