料金・価格計算機能
選択または入力された値により、料金を計算するための機能です。メールフォームで価格計算をさせたり、自動見積りっぽいことをさせたり、ショッピング機能的な使い方をしたい場合に便利です。
簡易的な見積もりや注文フォームとしてご利用いただける機能です。
料金計算のデモはデモページをご参照ください。
利用方法は以下のとおりです。
01.価格表示用のタグをセットする
＜div id="mfp_price"＞＜/div＞
上記のタグを価格を表示させたい部分にセットしてください。
02.価格受け渡し用のタグをセットする
＜input type="hidden" name="お支払い金額" id="mfp_price_element" /＞
上記のようなタグを＜form＞～＜/form＞内の何処かにセットしてください。確認画面で表示される順番にも影響がありますので、お好きな場所にセットしていただいて結構です。お支払い金額の部分はお好きな文字列をセットしてください。
03.商品と価格の設定
商品項目にしたいselectタグ、textタグ、numberタグ、radioタグ、checkboxタグにdata-price="単価"とid属性を指定してください。id属性は商品IDとしても利用されるため、必ず設定してください。
selectタグ、textタグ、numberタグの場合は入力・選択された数値が数量として認識され、checkbox、radioの場合は数量1としてカウントされます。
v4.2.0からoptionタグに対応
メールフォームプロ4.2.0からoptionタグを1つの商品として扱えるようにアップデートしました。
＜option value="有償サポート" id="support1" data-price="9800"＞有償サポート／9,800円＜/option＞
というように記述することで、該当のoptionがselectedされた場合に価格計算されるようになります。
v4.3.0からもう少し複雑な計算ができるようになりました
v4.3.0からさらに任意の数量をかけ合わせるというようなことができるようになりました。
例えば
＜select name="商品" id="item01" data-price="980" data-qty-element="hoge"＞
という商品があったとして、selectで数量を選ぶとします。それとは別に
＜input type="number" name="人数" id="hoge"＞という入力欄があった場合、商品の価格が人数のエレメントで入力された数値で乗算されます。これによりちょっとフォームがスッキリしたり複雑な計算ができるようになります。
コメント欄
価格表示・受け渡しタグの合計値が0になってしまいますが、リロード時に自動で再計算させることは可能でしょうか。
リロードした際に自動で再計算されない感じなのですね。こちらですがお問合せフォーム的なものから一度ご連絡いただくことは可能でしょうか？
合計金額の箇所ですが、円がデフォルトで表示されておりますが、こちらを別の単位に変更したい場合を教
えてください。
というファイル内にそれっぽい設定がございます。
ありがとうございました。
カートの合計金額を確認画面に表示する方法はありますでしょうか。
ありましたら教えてください。
お手数をお掛けいたしますが、よろしくお願いいたします。