ショッピングカートの中身のフォームのデザイン変更
バージョン1.2.0以降
お買い物状況を表示するフォームのデザイン変更について
カートの中を見た時、一番最初に表示されるお買い物状況ページのデザインは
カートのフォーム部分のデザインを変更するのCart01Page.htmlにて表示されています。
はじめにカートに商品が何も入っていなかった時に表示させるものを準備します。
<!-- soy:display="is_empty" -->
<p>カートに商品がありません。</p>
<p class="alC">
<a soy:id="return_link">
<img soy:src="画像のパス" alt="戻る（買いものを続ける）" />
</a>
</p>
<!-- /soy:display="is_empty" -->
soy:display="is_empty"で囲まれた箇所は、
カートに商品が何もないときに表示させるもので、
記述例では、
文言とショップサイトのトップページに戻るボタン(soy:id="return_link")を配置しています。
(imgタグにsoy:src="画像のパス"となっていますが、soy:srcである必要はありません)
続いて、
<!-- soy:display="go_next" -->
<!-- soy:display="has_stock_error" -->
<div class="error_box">
<ul>
<li soy:id="stock_error" class="error">
○○が△△△△です。
</li>
</ul>
</div>
<!-- /soy:display="has_stock_error" -->
以下省略
<!-- /soy:display="go_next" -->
soy:display="go_next"で囲まれた箇所に、カートの状況やログインフォームのHTMLを記述していきます。
まずは、
在庫数よりも注文数が多かった場合に表示するための記述をします。
soy:display="has_stock_error"で囲まれた箇所が、
在庫数エラーの際に表示される箇所になるので、
ここに表示したい内容を記述します。
soy:id="stock_error"を記述しておくことで、
この商品は残り100個です。とエラー表示されるようになります。
続いて、
カートの商品状況を表示しなければなりません。
<form soy:id="order_form">
<table>
<thead>
<tr>
<th> </th>
<th>商品コード</th>
<th>商品名</th>
<th class="alC">価格</th>
<th class="alC">注文数</th>
<th class="alR">小計</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="5">合計</th>
<td>
<!-- soy:id="total_price" -->2700<!-- /soy:id="total_price" --> 円
</td>
</tr>
</tfoot>
<tbody>
<!-- soy:id="item_list" -->
<tr>
<td>
<!-- カートに入れた商品を取り消すボタンを設置 -->
<a soy:id="item_delete"><img soy:src="画像のパス" alt="削除" /></a>
</td>
<td>
<!-- soy:id="item_id" /-->
</td>
<td><a soy:id="item_name">大豆</a></td>
<td>
<!-- soy:id="item_price" -->900<!-- /soy:id="item_price" --> 円
</td>
<td>
<input type="text" soy:id="order_number" size="4" />
<p class="error" soy:id="item_stock_error"></p>
</td>
<td>
<!-- soy:id="item_total" -->2700<!-- /soy:id="item_total" --> 円
</td>
</tr>
<!-- /soy:id="item_list" -->
</tbody>
</table>
<p>
<input type="image" soy:src="画像のパス" name="modify" value="カートを更新する" />
<input type="image" soy:src="画像のパス" name="next" value="次へ" />
</p>
</form soy:id="order_form">
formタグにsoy:id="order_form"属性を挿入したもので囲み、
その中にsoy:id="item_list"で囲って、カートに入れた商品を表示するように記述します。
(soy:id="item_list"は商品の数だけ繰り替えします)
最後に次へボタンを表示しなければなりませんが、
inputタグにtypeはsubmitまたはimageで、nameにnextを入れたら次へボタンになり、
nameにmodifyを入れたら、カートを更新するボタンになります。
なお、商品リスト表示の際、カスタムフィールドの値も表示させることが可能です。
最後にログインフォームの設置ですが、
soy:display="go_next"で囲まれた箇所の、</form soy:id="order_form">後に
<!-- /soy:display="go_next" -->
略
<form soy:id="login_form">
<h2>以前当店でお買い上げいただいた方</h2>
<p>メールアドレスとパスワード(以下略)</p>
<!-- soy:display="has_login_error" -->
<div class="error_box">
<ul>
<li class="error" soy:id="login_error">○○が△△△△です。</li>
</ul>
</div>
<!-- /soy:display="has_login_error" -->
<table class="form_table">
<tr>
<th>メールアドレス</th>
<td>
<input soy:id="login_user_mail_address" type="text" />
</td>
</tr>
<tr>
<th>パスワード</th>
<td>
<input type="password" name="User[password]" size="30" />
</td>
</tr>
</table>
<!-- ボタン配置 -->
<p class="alC">
<input type="image" soy:src="画像のパス" name="login" value="次へ" />
</p>
</form soy:id="login_form">
<!-- /soy:display="go_next" -->
ログインフォームに関しても今までと同様<form soy:id="login_form">で囲い、
表示したいフォームにsoy:idを挿入すれば表示されますが、
注意として、
パスワードフォームには
<input type="password" name="User[password]" size="30" />
直接、nameを挿入してください。
ログイン用のinputタグのnameには、loginとしてください。
