バージョン1.2.0以降

お客様情報入力フォームのデザイン変更について

ショッピングカートの中身のフォームのデザイン変更

お客様情報のデザインは

カートのフォーム部分のデザインを変更するのCart02Page.htmlにて表示されています。

はじめに

お客様のショッピングカートのデザインですが、

<table class="form_table">
  <thead>
    <tr>
      <th>商品コード</th>
      <th>商品名</th>
      <th class="alC">価格</th>
      <th class="alC">注文数</th>
      <th class="alR">小計</th>
    </tr>
  </thead>

  <tbody>
    <!-- soy:id="item_list" -->
    <tr>
      <td><!-- soy:id="item_id" /--></td>
      <td><a soy:id="item_name">大豆</a></td>
      <td class="alC">
        <!-- soy:id="item_price" -->900<!-- /soy:id="item_price" --> 円
      </td>
      <td class="alC">
        <!-- soy:id="order_number_text" /-->
      </td>
      <td class="alR">
        <!-- soy:id="item_total" -->2700<!-- /soy:id="item_total" --> 円
      </td>
    </tr>
    <!-- /soy:id="item_list" -->
  </tbody>

  <tfoot>
    <tr>
      <th colspan="4">合計</th>
      <td class="alR">
        <!-- soy:id="total_price" -->2700<!-- /soy:id="total_price" --> 円
      </td>
    </tr>
  </tfoot>
</table>

soy:id="item_list"囲まれた箇所が、

カートに入れた商品数だけ繰り返し表示する箇所になります。

なお、商品リスト表示の際、カスタムフィールドの値も表示させることが可能です。

カートの中身でカスタムフィールドで表示する項目を増やす

soy:id="total_price"は全商品の合計金額なので、

soy:id="item_list"外に記述してください。

続いて、お客様情報の入力ですが、

次の項目である

お届け先情報と備考をまとめて、<form soy:id="order_form">で囲ってください。

formタグを準備したら、入力項目不備の際に表示するsoy:idを記述します。

<form soy:id="order_form">

  <!-- soy:display="has_error" -->
    <p>お客様情報の必須項目に不備があった際に表示される</p>
  <!-- /soy:display="has_error" -->

  <table>
    <tr>
      <th>メールアドレス</th>
      <td>
        <input soy:id="mail_address" type="text" />
        <p soy:id="mail_address_error">○○が△△△△です。</p>
        <!-- soy:id="***_error"はエラーメッセージ用のsoy:idです -->
      </td>
    </tr>
  </table>

  <!-- soy:id="has_send_address_error" -->
    <p soy:id="send_address_error">
      お届け先情報の必須項目に不備があった際に表示される
    </p>
  <!-- /soy:id="has_send_address_error" -->

<input type="submit" name="prev" value="戻る" />
<input type="submit" name="next" value="次へ" />

</form soy:id="order_form">

input type="submit"またはtype="image"のnameにprevまたはnextを挿入したボタンを用意し

任意の箇所に各項目のsoy:idを記述していけば動作します。

(必須項目は必ず記述してください)

*1 パスワードの記述例(二回目以降にパスワード変更フォームを表示する場合)

<!-- 前ページでパスワードを入力した場合は表示されません -->
<!-- soy:id="password_input" -->
<tr>
  <th>パスワード</th>
  <td>
    <p class="error" soy:id="password_invalid">パスワードが違います</p>
    <input soy:id="password" type="password" /><br />
    パスワードを入力することで次回から入力が簡単になります。
  </td>
</tr>
<!-- /soy:id="password_input" -->

<!-- 二回目に表示されるもの -->
<!-- soy:id="new_password" -->
<tr>
  <th>パスワードを変更する</th>
  <td>
    <p class="error" soy:id="password_invalid">パスワードが違います</p>
    古いパスワード:
    <input name="new_password[old]" type="password" /><br />
    新しいパスワード:
    <input name="new_password[new]" type="password" />
  </td>
</tr>
<!-- /soy:id="new_password" -->

エラーメッセージ用

*2 お届け先のエラーメッセージは各項目に用意されておらず、まとめて一つのsoy:idとなります

カートの支払・配送方法選択画面のデザイン変更

Tweet