WooCommerce - laden Sie die Bestellung auf einen Klick über Ajax

Question

Ich füge eine Schaltfläche ‚Entfernen‘ neben jedem Element in der Bestellung über diese Funktion in der 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>'; 
} 

Das Problem ist, Nachdem Sie auf Entfernen geklickt haben, müssen Sie die Bestellseite aktualisieren, damit der Artikel verschwindet.

Ich möchte, dass das automatisch passiert. Ich nehme an, dass ich Ajax verwenden muss, um die obige Funktion aufzurufen, aber nicht ganz sicher, wie das geht.

Vielen Dank im Voraus

Answer 1

Angenommen, Ihr Beispiel funktioniert, werden Sie die Funktion ändern etwas wie folgt aussehen:

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

Wir die Schaltfläche gab eine eindeutige Kennung, damit wir Klicks erkennen jQuery . Beachten Sie data-id Attribut, das ist, wo wir $ item_id übergeben. Nun, da Anzeigefunktion bereit ist, brauchen wir einen Ajax-Aufruf zu erstellen:

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 
} 

nun eine Funktion zu POST-Daten zu verarbeiten, die Position löschen und gibt eine Antwort:

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(); 
}