Snow Monkey Formsへの計算式

0
いいねをした人: 居ません
  • このトピックには4件の返信、2人の参加者があり、最後にreadにより2年前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #111117
    read
    参加者
    13

    【お使いの Snow Monkey のバージョン】バージョン: 17.2.6
    【お使いの Snow Monkey Blocks のバージョン】バージョン 16.0.9
    【お使いの Snow Monkey Editor のバージョン】バージョン 8.0.2
    【お使いのブラウザ】Chrome
    【当該サイトのURL】テスト環境

    ### 実現したいこと

    テーマ・プラグインのご開発ありがとうございます。
    Snow Monkey Formsで金額計算をつけることはできませんでしょうか。
    他のプラグインを使ったり代替する方法でも構いませんので、
    アドバイスをいただければ幸いです。

    (例)

    ・商品A( 2000円) (●)個
    ・商品B (3000円) (●)個

    合計金額( 円)※商品×個数の合計金額を出力

    →フォーム送信

    0
    いいねをした人: 居ません
    #111170
    GONSY
    参加者
    836

    Snow Monkey Formsで金額計算をつけることはできませんでしょうか。

    見積もり用ですか?何かの注文用ですか?
    完成状態がイメージできるような具体的な質問をされたほうがアドバイスしやすいと思います。
    数字を入れて合計金額を出すのであれば、JavaScriptを使ってSnow Monkey Formsに組み込むことになるんじゃないでしょうか。
     
    ▼参考になりそうな情報

    ▼上記の情報を使いSnow Monkey Formsに組み込んだ例

     
     

    他のプラグインを使ったり代替する方法でも構いませんので、アドバイスをいただければ幸いです。

    Contact Form 7なら、組み合わせて使うプラグインが公式ディレクトリからダウンロードできるようです。

    また、計算とフォーム機能をもった国産の無料プラグインもあります。
    このプラグインは依頼されて一度導入したことがありますが、なかなかよくできています。
    フォームごとにショートコードが発行されますので、固定ページなどに貼るだけで使え、専用のサンクスページの指定もできます。

    2
    いいねをした人:
    #111175
    read
    参加者
    13

    GONSY様、ご回答いただきましてありがとうございます。
    希望を再現していただき、心より感謝申し上げます。

    ご教示いただいたプラグインも試しておりましたが、まさにこちら(https://demo.gonsy.net/calcular/)のようなシンプルな仕組みをSnow Monkey Formsに入れたいと思っておりました。ありがとうございます。

    JavaScript(jQuery)を使ったHTMLなら再現できたのですが、それをSnow Monkey Formsに組み込む(管理画面から?)方法をさわりだけでもご教示いただければ幸いです。お忙しいところ恐れ入ります。

    0
    いいねをした人: 居ません
    #111176
    GONSY
    参加者
    836

    JavaScript(jQuery)を使ったHTMLなら再現できたのですが、それをSnow Monkey Formsに組み込む(管理画面から?)方法をさわりだけでもご教示いただければ幸いです。

    管理画面からだけでは実現できませんが、My Snow Monkeyを使った方法は以下のとおりです。
    参考記事にあるJSを、例えば calcular.js などとして、 my-snow-monkey の適当な場所(例は「js」フォルダ)にアップします。

    ▼calcular.js

    jQuery(function($){
    	var value = 300; // りんごの単品価格
    	var maxNum = 100; // 注文できる個数の上限
    	var tagInput = $('#jsNum'); // 入力対象のinputタグID名
    	var tagOutput = $('#jsPrice'); // 出力対象のinputタグID名
    	tagInput.on('change', function() {
    		var str = $(this).val();
    		var num = Number(str.replace(/[^0-9]/g, '')); // 整数以外の文字列を削除
    		if(num == 0) {
    			num = '';
    		} else if (num > maxNum) { // 上限を超える個数を入力した場合
    			num = maxNum;
    		}
    		$(this).val(num);
    		if(num != 0) {
    			var price = num * value;
    			tagOutput.value = Number(price).toLocaleString() ; // 3桁ごとにカンマ		
    			tagOutput.readOnly = true; // 金額を変更できないように readonlyに
    		}
    	});
    });

     
     
    my-snow-monkey.php に calcular.js がフォームのページ(例:calcular-contact)だけに読み込まれるように記述

    add_action(
    	'wp_enqueue_scripts',
    	function() {
    
    		if( is_page('calcular-contact') ) { 
    		// ページスラッグ「calcular-contact」のみ読み込み
    			
    			wp_enqueue_script(
    				'navsync',
    				MY_SNOW_MONKEY_URL . '/js/calcular.js',
    				['jquery'],
    				filemtime( MY_SNOW_MONKEY_PATH . '/js/calcular.js' ),
    				true
    			);
    	
    		}
    });

     
     
    Snow Monkey Formsの設定
    今回、個数は select 、金額は text で入力欄を用意しました。
    JavaScriptにあるIDを各要素に記述してあげます。

    var tagInput = $('#jsNum'); // 入力対象のinputタグID名
    var tagOutput = $('#jsPrice'); // 出力対象のinputタグID名

     

     

    細かな部分は省略しますが、これだけです。

    あとはこのフォームを固定ページ(スラッグは calcular-contact)に貼り付けて完了です。
    計算させる商品を増やしたり、増やした分の小計をもとに合計値を出す場合はJavaScriptに計算式を追加すれば良いと思います。

    3
    いいねをした人:
    #111283
    read
    参加者
    13

    GONSY様

    丁寧なご教授をいただきまして感激です。誠にありがとうございます。

    >calcular.js などとして、 my-snow-monkey の適当な場所(例は「js」フォルダ)にアップ

    上記を何度かトライしましたが、何故か動かなかったため、

    記載されていた方のJavaScriptをコピー、
    フォームを設置した固定ページにhtmlの編集ブロックで挿入したところ、期待通りに動きました。

    おかげさまで理想を実現できました、本当にありがとうございました。心より御礼申し上げます。

    0
    いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「Snow Monkey Formsへの計算式」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。