情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。
プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。
2020.04.25公開
商品紹介のページで、まとまった数量を発注した場合のシミュレーション。リピーターで数量と単価を設定し、表示側ではプルダウンで数量を選択すると合計金額と単価を表示、というもの。
これを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 に関する記事一覧
- 子テーマでACFを使う(2023.09.16作成)
- ACF リピーターをランダムに(2023.09.11作成)
- ブロックエディターでACFを使う(2023.09.03作成)
- ACF Blocks(2023.08.24作成)
- acf reset_rows(2023.08.10作成)
- ACF 値などの登録まとめ(2023.07.30作成)
- ACF チェックボックスの値での条件分岐(2023.07.17作成)
- ACF 柔軟コンテンツフィールド、固定ページ用(2023.07.05作成)
- ACF 柔軟コンテンツフィールド、ブログ・コラム用(2023.07.02作成)
- ACF 柔軟コンテンツフィールドで1サイト作ってみる(2023.06.25作成)
- 編集ページにマニュアルや注意書き(2023.06.21作成)
- 投稿の本文を表示するショートコード(2023.06.21作成)
- Advanced Custom Fields Pro 柔軟コンテンツ(2023.06.18作成)
- ページビルダー(2023.06.16作成)
- イベントカレンダーサンプル(ACFとMW Form)(2023.05.15作成)
- 予約カレンダー・予約管理サンプル(ACFとMW Form)(2023.05.11作成)
- acf とMW Form 連携のまとめ(予約関連)(2023.05.10作成)
- acf 1月分の受付時間・定休日設定など(2023.05.08作成)
- acf 入れ子になったリピーターのデフォルト値(2023.05.07作成)
- acf リピーターで1月分のサブフィールドを作成(2023.05.06作成)
- 営業日カレンダーを作る(2023.01.06作成)
- ACF get_row_index()(2022.11.25作成)
- 予約カレンダー試作2(2022.11.17作成)
- 予約カレンダー試作(2022.11.16作成)
- ACF グループフィールドのアップデート(2022.11.15作成)
- ACFとMW Form で予約管理 その4(2022.08.31作成)
- acf 投稿オブジェクトにフィルター(2022.05.10作成)
- ACFとMW Form で予約管理 その3(2022.02.08作成)
- ACFとMW Form で予約管理 その2(2021.10.07作成)
- ACF ウィジェット(2021.09.12作成)
- pタグを置換(2021.07.11作成)
- Magic からACFへ 複製フィールド編(2021.06.06作成)
- Magic からACFへ(2021.06.06作成)
- WP CSV Exporter ・ACFリピーターでエラー(2021.05.26作成)
- ACFとMW Form で予約管理(2021.05.23作成)
- MW Form 予約数を保存(2021.05.20作成)
- ACFで1月分のスケジュール(2021.04.11作成)
- acf ラジオボタンのvalueとlabel(2021.03.09作成)
- acf の設定をフォームに利用(2021.02.12作成)
- ACF 便利機能(2021.01.13作成)
- 投稿IDをスラッグに(2020.12.21作成)
- ACF リピーター 一部表示(2020.10.20作成)
- ACF クイックエディット(2020.10.04作成)
- acf リピーターのソート禁止(2020.07.06作成)
- acf リピーター 計算 ajax(2020.04.25作成)
- acf リピーターの値をMW Formで(2020.04.15作成)
- acf リピーターのサブフィールドのデフォルト値を設定(2020.02.27作成)
- acf タイトル・スラッグ・アイキャッチ登録(2020.01.28作成)
- acf 投稿オブジェクトの対象を制限(2019.12.27作成)
- acf 内側のリピーターの数値を合計(2019.12.24作成)
- acf リピーターのcsvでのインポート(2019.12.03作成)
- acf デートピッカーのフォーマット(2019.11.21作成)
- 画像から投稿を取得(2019.05.08作成)
- acf リピーターを逆に表示(2019.04.19作成)
- キーワードとカスタムフィールドの絞り込み検索(2018.10.01作成)
- カスタムフィールドの検索(2017.10.16作成)
- acf 関連をランダム表示に(2017.08.14作成)
- acf繰り返しフィールドの利用例(2017.04.15作成)
- 画像サイズで条件分岐(2017.02.28作成)
- acf 繰り返しフィールドの数(2017.02.06作成)
- acf relationship(2017.01.11作成)
- カテゴリーにACF(2016.07.29作成)
- acf フィールド値をニックネームに(2016.04.16作成)
- acf デートピッカーの曜日を日本語に(2016.04.04作成)
- acf フィールドを横並びに(2015.10.20作成)
- 会員登録関連メモ(2015.04.08作成)
- 繰り返しフィールドの○つ目の値(2014.12.02作成)
- 出勤・スケジュール管理の覚書(2014.06.15作成)
- content のfilter をカスタムフィールドにも(2014.02.23作成)
- CSVでインポートの手順(2014.01.28作成)
- ターム(カテゴリー)の階層による分岐(2013.10.12作成)
- The Events Calendar について少し詳しく(2013.08.21作成)
- 管理画面投稿一覧に項目を追加(2013.08.06作成)
- Advanced Custom Fields 繰り返しフィールドの1つめを大きく表示(2013.05.28作成)
- カスタムフィールドの発売日でソートして年度ごとに括る(2013.05.27作成)
- Advanced Custom Fields 繰り返しフィールドの表示順を逆に(2013.05.10作成)
- Advanced Custom Fields 繰り返しフィールドの値を1つずつ(2013.05.10作成)
- Advanced Custom Fields でカテゴリーのアイコンや背景色を設定(2013.05.08作成)
- Advanced Custom Fields で自由なレイアウトを実現(2013.02.13作成)
- Advanced Custom Fields でプロフィールを拡張(2013.02.06作成)
情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。
プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。
2020.04.25公開