WooCommerce - アヤックス

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

我々はjQueryのを使用してクリック数を検出することができるように、我々はボタンに一意のIDを与えました。通知先はdata-idです。これが$ item_idを渡しています。 、POSTデータを扱う項目を削除し、応答を返すために

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 
} 

今機能：今、そのディスプレイ機能は準備ができて、私たちは、AJAX呼び出しを作成する必要があり

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