javascriptで自動見積もり

仕事の関係で自動見積もりフォームをずっと作ろうと思いつつ、まったく手をつけずにいたのでネタとして作ってみることにした。
これがまた思ったよりも手こずってしまって、改めて(というか一からちゃんと)javascriptだったりjQueryを学ばなくてはいけないなと思った。
ちなみに今回はフォームを使っているのと、見積もり計算処理はjavascriptなので、アコーディオンはjQueryで動いています。
 
こんな時にも先日紹介したカスタムフィールドにcssやjavascriptを挿入できるプラグインが役に立っています。
今回は後程手を加えることも考慮して、そのままむき出しですが、そのあたりはご愛嬌。
 
上下二ヶ所にリアルタイムで合計金額が表示されます。
CSSはテンプレート標準以外はアコーディオンのラベルにカーソルホバー時のアイコン指定をしているだけです。
きちんとCSSで装飾してあげればこんなもので充分でしょう。
 
 
「商品」などをクリックで選択できます。

合計金額
商品
商品を選んでください 1000円のTシャツ 2000円のTシャツ 3000円のTシャツ  
オプション
オプションを選んでください 100円のオプション 200円のオプション 300円のオプション  
素材など
ノーマル カラーステッチ 銀糸 金糸  
ボタン無し カラーボタン 銀ボタン 金ボタン
同時にこちらも
メガカットよっちゃん75gx10袋 うまい棒取り合わせセット30本入り
 
合計金額
 
とりあえずものすごくいいと言われるリファレンスブックの日本語版が2012年8月に出たばかりなので、買っておこうかと考え中↓
movie The Founder streaming