acf リピーター 計算 ajax


商品紹介のページで、まとまった数量を発注した場合のシミュレーション。リピーターで数量と単価を設定し、表示側ではプルダウンで数量を選択すると合計金額と単価を表示、というもの。

これをajax を使えば計算のスクリプトを書けなくても実装できるのではないかと、テスト環境で試してみた。ajax の実装についてはhttps://engineering.dn-voice.info/blogwordpress/ajax/を参照。

フォームの表示

    <form id="calculate">
		<input name="id" type="hidden" value="<?php the_ID(); ?>">
        <select name="amount">
			<option value="" selected> </option><?php if(have_rows('calculate')) { while (have_rows('calculate')) : the_row(); ?><option value="<?php the_sub_field('amount'); ?>"><?php the_sub_field('amount'); ?></option><?php endwhile; } ?></select>
		<input type="submit" value="送信">
    </form>
    <div id="resultarea"></div>

<script>
jQuery(function($){
    $( '#calculate' ).submit( function(event){
        event.preventDefault();
        var fd = new FormData( this );
 
        fd.append('action'  , 'calculate' );
 
        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: fd,
            processData: false,
            contentType: false,
            success: function( response ){
                $("#resultarea").html(response);
            },
            error: function( response ){
                $("#resultarea").html( "error" );
            }
        });
        return false;
    });
});
</script>

結果表示の設定 functions.php

function ajaxCalculateFunc(){
    if (isset($_POST['amount'])){ $post_id = $_POST['id'];
			$amount = $_POST['amount'];
				if(have_rows('calculate',$post_id)) { while (have_rows('calculate',$post_id)) : the_row(); $a = get_sub_field('amount'); $b = get_sub_field('price');
				if ($amount == $a) { $total = $amount*$b; $price = $b; } endwhile; }
					$result .= "合計 ¥" . number_format($total) . " / 単価 ¥" . $price;
				}
    else{ }
    echo $result;
    die();
}
add_action( 'wp_ajax_calculate', 'ajaxCalculateFunc' );
add_action( 'wp_ajax_nopriv_calculate', 'ajaxCalculateFunc' );

追記:プルダウンを選択するだけで動かしたい場合はselect にid をつけて、submit ボタンはスタイルで非表示に、スクリプト1行目の後に以下を追加。*私はスクリプトの書き方には詳しくありません。change でsubmit にすると意図通りに動かないので、動く方法を探した結果です。

$('#select').on('change', function() {
    var $form = $(this).closest('form');
    $form.find('input[type=submit]').click();
  });

その他のAdvanced Custom Fields に関する記事一覧