在感谢页面上通过AJAX创建WooCommerce自定义订单元

Question

我试图通过AJAX在WooCommerce上使用update_meta_data谢谢你，但我被卡住了。

这是我到目前为止：

    //Following function gets called from the page already

    function renderForm() {
            echo "<script>
            jQuery(document).ready(function() {
                $('body').on('click', '#button', function(){

                    $.ajax({
                         type: 'POST',
                         url: 'https://thepropdrop.com/wp-admin/admin-ajax.php',
                         data: {
                            action: 'create_user_meta'
                         },
                         success: function(textStatus){
                            console.log('Success');
                         },
                        error: function(MLHttpRequest, textStatus, errorThrown){
                            alert('errorThrown');
                        }
                    });
              });
            });

        </script>";
    }

add_action("wp_ajax_create_user_meta", "create_user_meta");
add_action("wp_ajax_nopriv_create_user_meta", "create_user_meta");

function create_user_meta() {
   $order = wc_get_order($order_id);
   $order->update_meta_data('hasAnswered', 'Yes');
   $order->save();
   die();
}

您将提供的任何帮助将不胜感激。

编辑 - 我的相关代码，将提供一些上下文：

这是thankyou.php上的按钮：

<span class="button gameStart">
        Let's do this
        </span>
        <script>
        jQuery(document).ready(function() {
            $('.gameStart').click(function(event){
              $(this).remove();
              $('.gameHeader').remove();
              $('.gamePage .gameContainer').css('display', 'block');
              $.ajax({
                  type: 'GET',
                  url: '<?php echo admin_url("admin-ajax.php");?>',
                  data: {
                      action: 'CCAjax'
                  },
                  success: function(textStatus){
                     $( '.gameForm' ).prepend( textStatus );
                  },
                  error: function(MLHttpRequest, textStatus, errorThrown){
                      alert(errorThrown);
                  }
              });
          });
        });
        </script>
                <div class="gameContainer">
            <div class="timerWrapper">
                <div id="timer">

                </div>
            </div>
            <div class="gameForm">
                        <h3>Which of the following countries has the largest land mass?</h3>

                        <div id='answerSubmitButton'>Submit answer</div>
            </div>
        </div>

然后functions.php：

function CCAjax() {
    get_template_part('template-parts/game');
    die();
}
add_action('wp_ajax_CCAjax', 'CCAjax');

然后是game.php：

<?php
renderForm();
?>

现在这里是完整的渲染表单功能（它从DB中提取3个潜在的答案，并且还有一个倒数计时器，因此为什么我没有发布它我不想混淆）

function renderForm() {

    // Fetch contries object
    global $wpdb;
    $results = $wpdb->get_results("select * from ( select *,@curRow :=@curRow + 1 as row_number from ( select * from ( select * from wpCountriesDB order by rand() limit 3 )b order by Mass desc )a JOIN (select @curRow :=0)r)x order by RAND()");

    // Create array for answers
    if(!empty($results)) {
        $i = 1;
        foreach ($results as $r) {
            echo "<div class='answerWrapper'>
            <span class='questionNumber'><span>$i</span></span>
            <label class='label' for='radio$i'>".$r->Country."</label>
            <input type='radio' id='radio$i' name='like' value='$r->row_number' />
            </div>";
            $i++;
        }
    }

    // Display timer and check answer correct
    echo "<script>
        var timeLeft = 3000;
        var elem = document.getElementById('timer');

        var timerId = setInterval(countdown, 1000);

        function countdown() {
            if (timeLeft < 0) {
                clearTimeout(timerId);
                $('#answerSubmitButton').click();
            } else {
                elem.innerHTML = timeLeft + 's';
                timeLeft--;
            }
        }

        jQuery(document).ready(function() {
            $('body').on('click', '#answerSubmitButton', function(){
                    var fetchInput = document.querySelector('.answerWrapper input[name=\'like\']:checked');
              var fetchSelected = fetchInput.value;

              if (fetchSelected == 1) {
                        $.ajax({
                             type: 'POST',
                             url: 'ajaxURL',
                             data: {
                                 action: adding_custom_meta
                                },

                             success: function(textStatus){
                                    console.log('Success');
                             },
                             error: function(MLHttpRequest, textStatus, errorThrown){
                                     alert('errorThrown');
                             }
                     });
              } else {
                console.log('incorrect')
              }
          });
        });

    </script>";
}

add_action("wp_ajax_create_user_meta", "create_user_meta");
add_action("wp_ajax_nopriv_create_user_meta", "create_user_meta");

function create_user_meta() {

    $order = wc_get_order($order_id);
    $order->update_meta_data('hasAnswered', 'Yes');
    $order->save();
    die();

}

我必须在一开始就通过订单ID吗？

Answer 1

更新（因为您提供了缺少代码的一些上下文）：

是的，您必须从您的谢谢页面（模板）一开始就传递订单ID。

您需要以不同的方式重新考虑您的代码，因为您无法将订单ID传递给renderForm()函数。订单ID需要通过jQuery Ajax传递到需要它的PHP Wordpress Ajax函数（将自定义元数据添加到订单中）。

另一个错误是（2次）：

jQuery(document).ready(function() {

需要改为（因为你正在使用jQuery简写qazxsw poi）：

或（相同）以较短的方式：

jQuery(document).ready(function($) {

原始答案：

您的脚本中存在一些错误和缺失的内容，例如需要通过jQuery ajax传递给您将添加自定义元数据的PHP Wordpress / Ajax函数的订单ID ...

您也没有在代码中提供显示的按钮输出...

所以这是一个完整的示例，基于您重新访问的代码，它将显示Order received（thankyou）页面上的按钮，并将自定义元数据添加到您的订单：

jQuery(function($) {

代码位于活动子主题（或活动主题）的function.php文件中。经过测试和工作。

使用// PHP Wordpress AJAX: Add custom meta data to the Order add_action("wp_ajax_adding_custom_meta", "adding_custom_order_metadata"); add_action("wp_ajax_nopriv_adding_custom_meta", "adding_custom_order_metadata"); function adding_custom_order_metadata() { if( isset($_POST['order_id']) && $_POST['order_id'] > 0 ){ update_post_meta(esc_attr($_POST['order_id']), '_has_answered', 'Yes'); echo json_encode($_POST['order_id']); } die(); } // Display a button on thankyou page (+ jQuery Ajax script) add_action( 'woocommerce_thankyou', 'jquery_thank_you_page', 90, 1 ); function jquery_thank_you_page( $order_id ) { // Display the button on thankyou page echo '<a href="#" class="button alt" id="button">'.__("Update").'</a>'; // The jQuery script (Ajax) ?> <script type="text/javascript"> jQuery(function($) { $('body').on('click', '#button', function(e){ e.preventDefault(); $.ajax({ type: 'POST', url: '<?php echo admin_url("admin-ajax.php");?>', data: { 'action': 'adding_custom_meta', 'order_id': '<?php echo $order_id; ?>' }, success: function(response){ console.log(response); // Just for testing }, error: function(error){ console.log(error); // Just for testing } }); }); }); </script> <?php }函数比调用update_post_meta()对象的实例并使用WC_Order方法后更好更轻。

我已将订单自定义元键从the save()更改为hasAnswered

在“已收到订单”页面上，显示的按钮（订单ID返回，在控制台中查看）：

_has_answered

在数据库中，创建自定义发布元数据：

Answer 2

像这样的东西

然后在你的AJAX回调中

function renderForm($order_id) { //add an argument
        echo "<script>
        jQuery(document).ready(function() {
            $('body').on('click', '#button', function(){

                $.ajax({
                     type: 'POST',
                     url: 'https://thepropdrop.com/wp-admin/admin-ajax.php',
                     data: {
                        action: 'create_user_meta',
                        order_id: {$order_id} //add to your request data
                     },
                     success: function(textStatus){
                        console.log('Success');
                     },
                    error: function(MLHttpRequest, textStatus, errorThrown){
                        alert('errorThrown');
                    }
                });
          });
        });

    </script>";
}

因为我无法知道你如何调用function create_user_meta() { if(empty($_POST['order_id'])) { //return some error message die(); } $order = wc_get_order($_POST['order_id']); //get the id from the request $order->update_meta_data('hasAnswered', 'Yes'); $order->save(); die(); }，所以我无法知道如何将订单ID放入其中。但在某些时候，它必须是论证或论证的一部分（在renderForm等短码$attr的情况下）。

你也可以使用类似的东西

[renderForm order_id=45]

要么

$order_id = get_the_ID();

根据你如何使用$order = get_post(); $order_id = $order->ID;的上下文，你可能无法在AJAX回调中使用它们，因为它是一个新的请求，所以你丢失了构建页面时的任何上下文。

希望有道理。

没有经过测试，但......也许它会起作用......它应该在理论上。

在感谢页面上通过AJAX创建WooCommerce自定义订单元

问题描述投票：0回答：2

2个回答

最新问题

在感谢页面上通过AJAX创建WooCommerce自定义订单元

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2