今すぐ購入フォームを作成する

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

今すぐ購入フォームとは

今すぐ購入フォームとは、カートを経由することなく商品（エントリー）を購入することができるフォームです。商品詳細ページのフォームから必要な情報を入力し、フォームを送信することで特定の商品のみを購入できます。

今すぐ購入フォームは GETモジュールである ShoppingForm_Now モジュールと、POST モジュールである　ShoppingForm_ConfirmNow, ShoppingForm_SubmitNow モジュールを使用することで実装できます。

基本的には、購入フォームを作成する で作成したフォームのShoppingForm モジュールを ShoppingForm_Now モジュールへ、POSTモジュールをShoppingForm_ConfirmNow, ShoppingForm_SubmitNow モジュールに置き換えるだけで動作します。

<!-- BEGIN_MODULE ShoppingForm_Now -->
<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_ConfirmNow"
      value="入力内容の確認へ"
    />
  </div>
  <input type="hidden" name="quantity" value="1" />
  <input type="hidden" name="field[]" value="quantity" />
  <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="shoppingNowForm" />
</form>
<!-- END_MODULE ShoppingForm_Now -->
<!-- BEGIN_MODULE ShoppingForm_Now -->
<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_SubmitNow"
      value="注文を確定する"
    />
  </div>
  <input type="hidden" name="quantity" value="1" />
  <input type="hidden" name="field[]" value="quantity" />
  <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="shoppingNowForm" />
</form>
<!-- END_MODULE ShoppingForm_Now -->

今すぐ購入フォームの仕様

今すぐ購入フォームは商品（エントリー）詳細ページでのみ動作します。というのも、商品（エントリー）詳細ページのエントリーIDから注文情報を作成しているためです。購入させたい商品（エントリー）の詳細ページでないページからの購入は出来ませんのでご注意ください。

また、今すぐ購入フォームでは、購入する商品の数量を選択するフォームを作成できます。入力フィールドに name属性が quantity のフィールドをカスタムフィールドの形式で設置することで数量を選択できます。フォームに数量のフィールドを送信しなかった場合、数量はデフォルト値として0となります。

例えば、以下はセレクトタグで実装した例になります。

<select name="quantity">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<input type="hidden" name="field[]" value="quantity" />

今すぐ購入フォームの注文内容の金額情報を表示する

カートから購入する場合、Order_Summary モジュールを利用することで注文内容の金額情報を表示できました。今すぐ購入フォームにおいても、Order_Sumamry モジュールを利用することでその詳細ページのみの注文内容を表示できます。詳しい利用方法については、リファレンスやスニペットを参照してください。

まとめ

ShoppingCart 拡張アプリではカートを経由しない決済フォームも作成できます。カートを経由しないことで必要なステップを減らすことや、他の商品とは一緒に購入されたくないといったことを実現することが出来ます。