javascript - WooCommerce - 通过 Ajax 单击按钮即可重新加载订单

Question

我通过functions.php中的此函数在订单中的每个项目旁边添加一个“删除”按钮:

add_action( 'woocommerce_order_item_meta_end', 'display_remove_order_item_button', 10, 3 );
function display_remove_order_item_button( $item_id, $item, $order ){
    // Avoiding displaying buttons on email notification
    if( ! ( is_wc_endpoint_url( 'view-order' ) || is_wc_endpoint_url( 'order-received' ) ) ) return;

    if( isset($_POST["remove_item_$item_id"]) && $_POST["remove_item_$item_id"] == 'Remove this item' ){
        wc_delete_order_item( $item_id );
    }

    echo '<form class="cart" method="post" enctype="multipart/form-data" style= "margin-top:12px;">
    <input type="submit" class="button" name="remove_item_'.$item_id.'" value="Remove this item" />
    </form>';
}

问题是，单击“删除”按钮后，您必须刷新订单页面才能使该项目消失。

我希望这能自动发生。我想我需要使用 Ajax 来调用上面的函数，但不太确定如何做到这一点。

提前致谢

Answer 1

假设您的示例正常运行，您将将该函数更改为如下所示:

add_action( 'woocommerce_order_item_meta_end', 'display_remove_order_item_button', 10, 3 );
function display_remove_order_item_button( $item_id, $item, $order ){
    // Avoiding displaying buttons on email notification
    if( ! ( is_wc_endpoint_url( 'view-order' ) || is_wc_endpoint_url( 'order-received' ) ) ) return;

    echo '<form class="cart" method="post" enctype="multipart/form-data" style= "margin-top:12px;">
<input type="submit" id="remove-btn" data-id="'.$item_id.'" data-order="'.$order->get_order_number().'" class="button" name="remove_item_'.$item_id.'" value="Remove this item" />
    </form>';
}

我们为按钮提供了唯一的 ID，以便我们可以使用 jQuery 检测点击。注意 data-id 属性，这是我们传递 $item_id 的地方。现在显示功能已准备就绪，我们需要创建 ajax 调用:

add_action('wp_head', 'ajax_call_remove_item');
function ajax_call_remove_item() {
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {
    $(document).on("click","#remove-btn",function(e) {
    e.stopImmediatePropagation();
    e.preventDefault();

    // get data values from the button
        var details = $(this).data();
        var container = $(this).closest('td').parent('tr');
      $(this).closest('td').append('<div id="loader">Data is loading</div>');
        var data = {
            action: 'remove_item',
            // get id from data
            id: details.id,
            orderid: details.order,
        };

        $.post('<?php echo esc_url( home_url() ); ?>/wp-admin/admin-ajax.php', data, function(response) {
           // display the response
           $(container).empty();       
           $(container).html(response);       
        });

    });
});

</script>
<?php
}

现在是一个处理 POST 数据、删除项目并返回响应的函数:

add_action('wp_ajax_remove_item', 'remove_item_callback_wp');
add_action( 'wp_ajax_nopriv_remove_item', 'remove_item_callback_wp' );
function remove_item_callback_wp() {
     $item_id = $_POST['id'];
     $order_id = $_POST['orderid'];

    $order    = new WC_Order($order_id);


    foreach ($order->get_items() as $order_item_id => $item){
        if($order_item_id == $item_id){
            wc_delete_order_item(absint($order_item_id));
        }
    }


     echo "This items has been removed";

     exit(); 
}