acf リピーター 計算 ajax

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。

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

これを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 ボタンはスタイルで非表示に、スクリプト１行目の後に以下を追加。*私はスクリプトの書き方には詳しくありません。change でsubmit にすると意図通りに動かないので、動く方法を探した結果です。

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