«« 連想配列と総量計算 | メーリングリストの導入方法あれこれ »»

簡易商品申込ページをメールフォームで作る際、オプションをカスタマイズできるようにするなら「jquery.add-input-area」が使えそう

2015年8月 9日

このエントリーをはてなブックマークに追加 Clip to Evernote
javascriptのメールフォームを組み合わせた簡易ショッピングフォーム(というか申込書ページ)を作成しようとするのですが、ユーザ操作でカスタマイズ要素を追加・削除できるようにしたい。そんな時にjqueryプラグイン「jquery.add-input-area」が使えるかもしれません。


ショッピングサイトを構築するとき、どのようなシステムを使いますか?

ショッピングカートシステムを自前で構築する際の定番と言えば、和製でオープンソースなec-cube

ブログベースで商品紹介して、そこから購入時の流れとするなら、Skelton Cart系も良さそうだ。

しかしだ。
・商品のラインナップは、少数。

・セット割とか細かいルールがある場合も。

・色々サーバーの制限があって、サーバ側に複雑そうなインストールが必要なシステムは入れるのが難しい。
もしくは既存システムと影響なく連結する必要がある。

・低予算で構築したい。

・要するに申し込み用紙の替わりを果たせばそれで良い。会員登録とか要らない。

などという場合で、且つあなたがJavascriptに軽く精通していて簡単なCGIを設置できるなら、メールフォーム+Javascriptという構成でサクっとがお勧めです。

つまり、こんな感じなメールフォームを組むということです。

メールアドレス

送付先

商品A 1,000 円 × 個 = 0 円

商品B 1,500 円 × 個 = 1,500 円

商品C   900 円 × 個 = 4,500 円


合計 6,000 円

みたいな感じで送信ボタンを押すと。

こちらはくじぇ工作所ダミーショップショップです。

このたびは以下のご商品をご注文頂き、誠にありがとうございます。

メールアドレス = hogehoge@dummy.com

送付先 = テスト県テスト市テスト19丁目19番地

商品A 1,000 円 お買い求め数 = 0

商品B 1,500 円 お買い求め数 = 1

商品C   9000 円 お買い求め数 = 5

合計(円) = 6000

みたいなメールが送られてくる感じです。

ここで気になるのは、同じ商品だけどカスタマイズ案件についてはどう対処するか?

具体的にはこんなUIを実装したい場合。

メールアドレス

送付先

1. 商品A 1,000 円

  追加カスタマイズA-1 500 円

  追加カスタマイズA-2 1,500 円

2. 商品A 1,000 円 ← このボタンを押すとA群の2が削除される

  追加カスタマイズA-1 500 円

  追加カスタマイズA-2 1,500 円

← このボタンを押すとA群の3が追加される


合計 2,500 円

こういう時に使えそうだと、先日社内のデザイナから教えられたのが、jQueryプラグイン「jquery.add-input-area」

詳細は、公式ページを参考にするのが良いのですが、上に関する動作をほぼ実装しています。

問題は合計金額をリアルタイムでどのように計算させるか。

ざっと自分がサンプルで組んだ際には、イベントのコピーをしてくれるのは良いのですが、削除した時の判定がうまくいかない。

この間この手の対処をした時は、フォームが押された時とか内容が変更された時にイベントを発生させてその中で計算をさせるよりも、setIntervalで0.1秒単位で常時フォームの内容を全て調べさせて計算させるようにするのが、一番手っ取り早いのかなという印象でした。

jQueryプラグイン逆引きハンドブック
古籏一浩
シーアンドアール研究所 (2014-12-18)
売り上げランキング: 260,063

投稿者 kuze : 2015年8月 9日 23:50


■このエントリーに関連した記事

■「実用ソフト&サイト」カテゴリの最新記事

«« 連想配列と総量計算 | メーリングリストの導入方法あれこれ »»


自己紹介
PHPやVBによるコーディングやシステムエンジニアを仕事にしています。
主にiPhoneアプリの紹介やWeb開発などのPC系の話題と、アニメやゲームなどのサブカルな話題を取り扱っています。

[PR]

Twitter
>> その他のtwitter

instagram

カテゴリ

最近のエントリー

最近掲載した画像
  • ゆるキャン△見ていると、野外でかんたんな飯を作って食べたくなる!
  • あべのハルカスでやっていたジブリの立体建造物展を見て来た
  • ASUS VivoBook E203NA-464W:単純な使い道に限定するのであればコスパはかなり高い
  • ASUS VivoBook E203NA-464W:単純な使い道に限定するのであればコスパはかなり高い
  • ASUS VivoBook E203NA-464W:単純な使い道に限定するのであればコスパはかなり高い
  • ASUS VivoBook E203NA-464W:単純な使い道に限定するのであればコスパはかなり高い
  • iPhone6のバッテリーを安価で交換してきた
  • iPhone6のバッテリーを安価で交換してきた
  • iPhone6のバッテリーを安価で交換してきた
  • iPhone6のバッテリーを安価で交換してきた
  • クリスマスプレゼントは『once upon a time』で、グダグダおとぎ話世界をカードで彷徨う!
  • 喪中はがきの裏面を安価に且つ素早く作るのにも はがきデザインキット が使える
  • 喪中はがきの裏面を安価に且つ素早く作るのにも はがきデザインキット が使える
  • 喪中はがきの裏面を安価に且つ素早く作るのにも はがきデザインキット が使える
  • 祖母が亡くなったので葬儀を手伝う

RSS
更新情報はRSSをご利用下さい
サイトマップ