Javascript WooCommerce-通过Ajax单击按钮重新加载订单

我将通过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>';
}

add_动作（'woocmerce_order_item_meta_end'，'display_remove_order_item_button'，10,3）；
功能显示\删除\订单\项目\按钮（$item\ id，$item，$order）{
//避免在电子邮件通知上显示按钮
if（！（is_wc_endpoint_url（'view order'）| is_wc_endpoint_url（'order received'））返回；
如果（isset（$\u POST[“删除项目”\$item\u id”]）&&$\u POST[“删除项目”\$item\u id”]==“删除此项目”）{
wc_删除_订单_项目（$item_id）；
}
回声'
';
}

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

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

---

提前感谢

假设您的示例有效，您将更改函数，使其看起来像这样：

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>';
}

现在是一个处理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(); 
} 

---

假设您的示例正常工作，您将更改函数，使其看起来如下所示：

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>';
}

现在是一个处理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(); 
} 

---

非常感谢。这似乎奏效了。显示：“此订单已删除”，页面刷新时项目消失。但是，它是否可以在不刷新的情况下从页面中删除？我注意到的一个问题是，它只适用于1项。然后，如果您在另一个项目上单击“删除项目”，它仍然会删除该项目，但是它会停留在“数据正在加载”上。@Adrian I编辑jQuery代码，以便在删除该项目时从订单页中删除该项目。这是测试和工作，如果你有任何问题，请做你自己的调试，因为它必须与您的设置或其他变量。如果这有帮助，请检查它作为答案。效果很好。谢谢，谢谢。这似乎奏效了。显示：“此订单已删除”，页面刷新时项目消失。但是，它是否可以在不刷新的情况下从页面中删除？我注意到的一个问题是，它只适用于1项。然后，如果您在另一个项目上单击“删除项目”，它仍然会删除该项目，但是它会停留在“数据正在加载”上。@Adrian I编辑jQuery代码，以便在删除该项目时从订单页中删除该项目。这是测试和工作，如果你有任何问题，请做你自己的调试，因为它必须与您的设置或其他变量。如果这有帮助，请检查它作为答案。效果很好。非常感谢。