«« 連想配列と総量計算 | メーリングリストの導入方法あれこれ »»
簡易商品申込ページをメールフォームで作る際、オプションをカスタマイズできるようにするなら「jquery.add-input-area」が使えそう
2015年8月 9日
ショッピングサイトを構築するとき、どのようなシステムを使いますか？
ショッピングカートシステムを自前で構築する際の定番と言えば、和製でオープンソースな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秒単位で常時フォームの内容を全て調べさせて計算させるようにするのが、一番手っ取り早いのかなという印象でした。
シーアンドアール研究所 (2014-12-18)
売り上げランキング: 260,063
投稿者 kuze : 2015年8月 9日 23:50
- 手作り省エネデジタルフォトフレームの作り方が気になる
- Python3.4向けにつくったAPIが、Python3.6では動かなくなったので直してみた
- Windows 10 HomeやProfessionalにおいて行う設定やインストールしたいソフトをまとめてGithub Pagesにまとめてみた
- Office Lensで素早くその場で名刺や原稿などをスキャン！
- Amazon商品をより魅力的に紹介できるAmaQuickをテンプレート例とともに紹介してみた
«« 連想配列と総量計算 | メーリングリストの導入方法あれこれ »»
主にiPhoneアプリの紹介やWeb開発などのPC系の話題と、アニメやゲームなどのサブカルな話題を取り扱っています。
- アニメ・コミック・ライトノベル [167 記事]
- ゲーム [80 記事]
- ドラマ等 その他の番組 [18 記事]
- 実用ソフト＆サイト [244 記事]
- 特撮 [24 記事]
- 社会情勢 [84 記事]
- 身の回り [181 記事]
- 映画『ゴジラ-1.0』レビュー（ネタばれあり）
- Three-up HC-T2206WHで狭い部屋も快適に
- 「君たちはどう生きるか」は父親を気にするかで評価が別れそう(ネタバレあり)
- 画像生成AIソフトでしばらく毎日SNSに画像を上げてみたけどネタ出しについて
- ホットクックを使えば一人で並行して色々作りやすくなるのでオススメ
更新情報はRSSをご利用下さい
コメント