Custom ajax call in woocommerce

sometimes you need to update database via ajax. wordpress has tools to make it easy. Well not that easy…

here for example, we want to create a link that when clicked, automatically change the order status of a woocommerce order and insert some notes.

In the template,

<script>
function installer_action(id,istatus) {
	jQuery.ajax({
	   type: "post",
	   url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
	   data: "action=update_order_installer_status&nonce=<?php echo wp_create_nonce('nonce_update_order_installer_status'); ?>&id="+id+"&status="+istatus,  
	   success: function(data){
	   	console.log(data);
	   		jQuery('#order_status_'+id).html(data.status);
	   		jQuery('#installer_actions_'+id).html(data.note);
	   },
	   error: function(xhr, textStatus, errorThrown) {
	     // console.log(xhr.responseText);
	   }
	});
}
</script>

Note that we have to use nonce to prevent csrf. Now we need the html for the link:

<span id="installer_actions_<?php echo $post->ID; ?>">
  <?php
    echo "<a href=\"#\" onclick=\"installer_action('$post->ID','accepted')\">Accept Request</a> | <a href=\"#\" onclick=\"installer_action('$post->ID', 'rejected')\">Reject Request</a>";
  ?>
</span>

The content in the span will be replaced by the ajax.

then in your functions.php, you have a function that deals with the ajax call and return some json. For eg.

function update_order_installer_status() {
  check_ajax_referer( 'nonce_update_order_installer_status', 'nonce' );
  // we are safe now
  $order = new WC_Order($_POST['id']);
  $new_order_status = ($_POST['status'] == 'accepted') ? 'install-accepted' : 'install-rejected' ;
  $note = "Installer ".$_POST['status']." job on ".date('j F Y, g:i a');
  $order->update_status($new_order_status);
  $order->add_order_note($note, 1);

  $notes = $order->get_customer_order_notes();
  $order->note = $notes[0]->comment_content;
  $order->status = wc_get_order_status_name($order->get_status());
  wp_send_json($order);
}

add_action( 'wp_ajax_update_order_installer_status', 'update_order_installer_status' );
add_action( 'wp_ajax_nopriv_update_order_installer_status', 'update_order_installer_status' );

Author: bpeh

Bernard Peh is a great passioner of web technologies and one of the co-founder of Sitecritic.net Website Design and Reviews. He works with experienced web designers and developers everyday, developing and designing commercial websites. He specialises mainly in SEO and PHP programming.