ショッピングカート風UIで商品を選び、A-Formで問い合わせをする【A-Form Advent Calendar 2019/12/20】

この記事は A-Form Advent Calendar 2019 参加記事です。

A-Formを簡易ショッピングカートのように扱い、複数の商品をカートに入れてフォームでお問い合わせをする、というちょっとトリッキーな機能を実装してみたので、その話を書きたいと思います。

フローの確認

まず、全体的にどのような動きになるかを確認します。

  1. AFormCartプラグイン（この記事のために作成）をインストールして、フォームを作り、詳細設定から「簡易カートで利用する」フラグをONにする
  2. MTで商品情報を記事として投稿する
  3. 記事リストをJSON形式でファイルに吐き出す
    →JSONにはID・商品名・価格などをコンテンツタイプ（もしくはカスタムフィールド）で持っておきます。
  4. 商品一覧、商品詳細はMTでHTMLコンテンツとしてファイル出力する
    →このとき、AFormCartのJSを読み込んでおくと【カートに追加】ボタンが表示されます。
  5. 【カートに追加】を押したらカート画面でカートに入れていた商品一覧を出す
    →MTはカート画面のガワだけHTMLファイルを出力しておき、JSを読み込むだけ。
  6. カート画面から【注文手続きへ】ボタンで個人情報入力画面を表示する
    →この入力画面はA-Formで名前・メールアドレス・住所等設定したフォームを作っておきます。
    →このフォームを表示する画面でJSを読み込んでおくとカートに入っている商品一覧を表示できます。
  7. A-Formの確認画面で送信すると、メール送信（A-Formでメールを送る設定をした場合）し、データを「受付データ」に保存する
  8. A-Formの管理画面で「受付データ」を更新したり、注文データのエクスポートができます。

図にしたものは下記から確認できます。

クリックで拡大

実装

(1)AFormCartのインストール

AFormCartプラグインを作りましたので、そのインストールをします。

A-Formは既にインストールしてある前提として、
MTインストールディレクトリ/plugins/AFormCart/ および、mt-static/plugins/AFormCart/ へのファイルアップロードをします。

フォームを新規に作成します。今回はフォームの内容は極単純にしておきます。

項目パーツ必須備考
氏名氏名Yes　
メールアドレスメールアドレスYes　
電話番号電話番号Yes　
個人情報保護方針個人情報保護方針Yes　
CSRFトークン外部パラメータYesパラメータ名=token
A-Form001のフォーム内容

クリックで拡大

詳細設定タブからフォームの状態を有効にして、「簡易カートで利用する」フラグをONにしておきます。

クリックで拡大

(2)～(4)商品データの用意

(2)～(4)はいつものMT実装で用意します。

商品情報は下記のようにコンテンツタイプ（もしくはカスタムフィールド）で用意したとします。

項目名前型必須？
商品名TitleテキストYes
商品説明文Bodyテキスト（複数行）　
概要Summaryテキスト（複数行）　
画像image画像アセット　
カテゴリFoldersカテゴリ　
金額Price数値Yes

※今回はMT7のコンテンツタイプで作ったので商品IDは「データ識別ラベル」を使いました。

実際に入れた内容の例：

クリックで拡大

ちなみに、この画像は 自分で作ったプラモデルに塗装してデカールを貼り付けたもの です:)

あとは、商品詳細で「cart_btn.js」のJSファイルを読み込んでおきます。
<div id="js-cart" data-id="sample1" data-backend="/shop/_backend">
商品名：○○○○
金額： xxxxx円
数量: <input type="text" name="qty" value="1" />
<input type="submit" />
</div>
<script src="/mt-static/plugins/AFormCart/cart_btn.js"></script>

"#js-cart"の data-id には商品IDを、data-backend には _backend へのURLを指定します。
バックエンドではSlim3フレームワークを使った小さいPHPプログラムが入ります。AFromCartから提供します。

(5)カートの中身

カートには商品IDと数量のみが入ります。それ以外の商品情報は、MTから出力したJSONを使ってカートの中身を表示します。

クリックで拡大

(6)個人情報入力画面

[[aform002]]にて、個人情報入力画面を表示します。
確認画面でカートに入っている商品一覧を表示することができます。

クリックで拡大

(7)送信完了

メール文中には「外部パラメータ」パーツとして組み込んだ位置に、カートの商品情報が入ります。

テスト様

この度は、ご利用頂きまして誠にありがとうございます。

お客様からのメールは確かに受信致しました。

氏名：竹村テスト
メールアドレス：takemura@ark-web.jp
電話番号：0352503221
個人情報保護方針：同意する
ご注文内容：
---------------------------
商品名: サンプル商品１
税抜き価格: 5,000 円
税込み価格: 5,400 円
注文数: 1
----------------------------
合計 : 5,400 円（税込み価格）
　　※上記の商品代金には送料・代引き手数料は含まれておりません。

-- 
テスト　オンラインストア

まとめ

フォームでお問い合わせを受け付ける機能＋αで色々なことができると思います。今回は複雑にしないよう絡めませんでしたが、クレジットカード決済なども組み込めば実現できます。

「A-Formでこういうことできますか？」などのご質問がありましたら、弊社ウェブサイトのMTプラグイン　お問い合わせフォームにて受け付けています。

A-シリーズに関するご相談・お問い合わせ： https://www.ark-web.jp/movabletype/contact/