購入フォームを作成する

このエントリーでは、Shopping Cart 拡張アプリを使用して、購入フォームを作成する手順を説明します。購入フォームは以下の手順で作成できます。

  1. 決済フォーム用のGETモジュールを設定する
  2. 決済フォーム用のPOSTモジュールを設定する
  3. 決済方法の選択肢を実装する
  4. 追加手数料の選択肢を実装する

決済フォーム用のGETモジュールを設定する

a-blog cms でフォームを設置する場合は、Form モジュールをつかってフォームを作成しますが、決済フォームでは Shopping Cart 拡張アプリで提供している ShoppingForm モジュールを使用します。

基本的には、Form モジュールを設置していたところを ShoppingForm モジュールに置き換えていただくことで動作いたします。また、標準の Form モジュールを継承しているため、バリデーターやステップフォームの機能も備えています。

<!-- BEGIN_MODULE ShoppingForm -->

<!-- BEGIN step-->
<!-- 新規 -->
<!-- END step -->

<!-- BEGIN step#reapply -->
<!-- 修正 -->
<!-- END step#reapply -->

<!-- BEGIN step#confirm -->
<!-- 確認 -->
<!-- END step#confirm -->

<!-- BEGIN step#result -->
<!-- 完了 -->
<!-- END step#result -->

<!-- END_MODULE ShoppingForm -->

また、ShoppingForm モジュールでは、決済フォームで選択した決済方法や追加手数料を以下の変数とブロックで表示することが可能です。

Ver. 2.1.0 より、Order_Summary モジュールを利用して、決済フォームで選択した決済方法や追加手数料を表示できるようになりました。そのため、Ver. 2.1.0 以降では Order_Summary モジュールを利用して注文情報を表示することを推奨します。

Order_Summary モジュールで利用できる変数については、ShoppingCart 拡張アプリの管理画面内にある変数表からご確認ください。

変数名 概要
paymentMethodBlock 選択された決済方法のブロック
paymentMethodName 選択された決済方法の名前
paymentMethodCommissionPaid 選択された決済方法の決済手数料
paymentMethodDescription 選択された決済方法の説明テキスト
paymentMethodMailMessage 選択された決済方法のメール用テキスト
変数名 概要
additionId 選択された追加手数料のID
additionName 選択された追加手数料の名前
additionFee 選択された追加手数料の手数料

追加手数料を表示する変数は additionGroup:loop ブロック内で表示できます。

<h3 class="form-table-title">追加手数料</h3>
<table class="form-table">
  <!-- BEGIN additionGroup:loop -->
  <tr>
    <th></th>
    <td>
      {additionId} {additionName}（¥{additionFee}[number_format])
    </td>
  </tr>
  <!-- END additionGroup:loop -->
</table>

決済フォーム用のPOSTモジュールを設定する

a-blog cms でフォームを送信する場合は、Form_Confirm モジュールや Form_Submit モジュールを利用してフォームの確認ステップやエラーステップに遷移しますが、決済フォームでは Shopping Cart 拡張アプリで提供している ShoppingForm_Confirm モジュール及び、ShoppingForm_Submit モジュールを使用します。

利用方法は普段、Form_Confirm モジュールを使用しているところで ShoppingForm_Confirm モジュールを使用し、Form_Submit モジュールを使用しているところで、ShoppingForm_Submit モジュールを使用してフォーム送信を行うようにテンプレートを記述します。具体的なサンプルコードは以下になります。

ShoppingForm_Confirm モジュールを使用するサンプルコード

<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_Confirm"
      value="入力内容の確認へ"
    />
  </div>
  <input type="hidden" name="takeover" value="{takeover}" />
  <input type="hidden" name="step" value="confirm" />
  <input type="hidden" name="error" value="reapply" />
  <input type="hidden" name="id" value="shoppingForm" />
</form>

ShoppingForm_Submit モジュールを使用するサンプルコード

<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_Submit"
      value="注文を確定する"
    />
  </div>
  <input type="hidden" name="takeover" value="{takeover}" />
  <input type="hidden" name="step" value="result" />
  <input type="hidden" name="error" value="confirm" />
  <input type="hidden" name="id" value="shoppingForm" />
</form>

これで「決済フォーム用のPOSTモジュールを設定する」のステップは完了です。ShoppingForm_Confirm 及び、ShoppingForm_Submit モジュールが具体的に何をやっているかについてはリファレンスを参照してください。

決済方法を指定するカスタムフィールドを実装する

Shopping Cart 設定で設定した決済方法を指定するカスタムフィールドを作成します。フィールド名は payment-method である必要があります。以下は Payment_Select モジュールを使用して実装したサンプルコードになります。

Payment_Select モジュールを利用することで、自動的に決済方法のステータスを考慮した選択肢を表示することができます。

        <!-- BEGIN_MODULE Payment_Select -->
        <ul>
          <!-- BEGIN payment:loop -->
          <li>
            <div
              class="acms-form-radio"
            >
              <input
                id="input-radio-payment-method-{block}"
                type="radio"
                name="payment-method"
                value="{block}"
                \{payment-method:checked#{block}\}
                <!-- BEGIN_IF [\{payment-method\}/em/_and_/{payment.i}/eq/1] -->
                checked="checked"
                <!-- END_IF -->
                data-validator="payment-method"
              />
              <label for="input-radio-payment-method-{block}">
                <i class="acms-ico-radio"></i>{name}<!-- BEGIN_IF [{commissionPaid}/gt/0] -->：手数料 ¥{commissionPaid}[number_format]<!-- END_IF -->
              </label>
              <!-- BEGIN description:veil -->
              <div>
                <!-- BEGIN_IF [{description}[delnl]/nem] -->
                <div>{description}[nl2br]</div>
                <!-- END_IF -->
                <!-- BEGIN_IF [{image@path}/nem] -->
                <img
                  src="%{MEDIA_ARCHIVES_DIR}{image@path}"
                  class="acms-img-responsive"
                  alt="{image@alt}"
                  width="{image@width}"
                  height="{image@height}"
                >
                <!-- END_IF -->
              </div>
              <!-- END description:veil -->
            </div>
          </li>
          <!-- END payment:loop -->
        </ul>
        <!-- END_MODULE Payment_Select -->
        <input type="hidden" name="field[]" value="payment-method" />
        <input type="hidden" name="payment-method:v#required" id="payment-method-v-required" />
        <div role="alert" aria-live="assertive">
          <div data-validator-label="payment-method-v-required" class="validator-result-\{payment-method:v#required\}">
            <p class="form-error-text">決済方法を選択してください</p>
          </div>
        </div>

追加手数料を指定するカスタムフィールドを実装する

Shopping Cart 設定で設定した追加手数料を指定するカスタムフィールドを作成します。フィールド名は additionである必要があります。追加手数料は複数の値を指定して送信することが可能です。複数の値を指定してフォームを送信した場合、追加手数料は各手数料を合計した金額になります。以下は Addition_Select モジュールを使用して実装したサンプルコードになります。

Addition_Select モジュールを利用することで、自動的に決済方法のステータスを考慮した選択肢を表示することができます。

<!-- BEGIN_MODULE Addition_Select -->
<!-- BEGIN addition:veil -->
<h3>追加手数料</h3>
<table>
  <tbody>
    <tr>
      <th></th>
      <td>
        <ul>
          <!-- BEGIN addition:loop -->
          <li>
            <div class="acms-form-checkbox">
              <input type="checkbox" name="addition[]" value="{id}" \{addition:checked#{id}\} id="input-checkbox-addition-{id}" />
              <label for="input-checkbox-addition-{id}">
                <i class="acms-ico-checkbox"></i>{name}（¥{fee}[number_format]）</label>
            </div>
          </li>
          <!-- END addition:loop -->
        </ul>
        <input type="hidden" name="field[]" value="addition" />
      </td>
    </tr>
  </tbody>
</table>
<!-- END addition:veil -->
<!-- END_MODULE Addition_Select -->

配送地域を指定するカスタムフィールドを実装する

決済フォームでは、配送先を送信することで、ShoppingCart設定 で配送グループごとに設定した送料設定に従って送料を計算します。送料を指定するフィールド名は deliver-area である必要があります。以下はサンプルコードになります。サンプルコードでは1つ前のステップで送信したカスタムフィールド deliver-pref の値を指定しています。

<input
  type="hidden"
  name="deliver-area"
  value="{deliver-pref}"
/>
<input type="hidden" name="field[]" value="deliver-area" />

購入エラー時のステップを追加する

購入フォームでは、購入時にエラーが発生した場合に表示する shoppingError ステップが標準で用意されています。

shoppingError ステップは購入処理中の商品に在庫切れの商品が存在する場合などに表示されます。

<!-- BEGIN_MODULE ShoppingForm -->

<!-- BEGIN step#shoppingError -->
<section>
  <h2>購入エラーが発生しました。</h2>
  <p class="message">購入手続き中の商品に問題がある可能性があります。お手数ですが、はじめからやり直して下さい。</p>
  <div class="form-btn-wrap">
    <a href="%{BASE_URL}cart/" class="btn">購入フォームに戻る</a>
  </div>
</section>
<!-- END step#shoppingError -->

<!-- END_MODULE ShoppingForm -->

まとめ

このエントリーでは、購入フォームを作成する方法を学びました。購入フォームのカスタマイズができるようになれば基本的なECサイトの構築についてはバッチリです。しかし、このままではサイト内で決済をすることができません。決済サービスと連携して、オンライン上で決済ができるECサイトを制作したい場合はこちらのドキュメントも合わせてご覧ください。