How to add address API through AJAX
These guides cover:
- Features
- API Routes
- How to install and activate license WPCargo API Add on
- How to assign and reset API key to user
- How to use plugin API’s
- How to add shipment using API through AJAX
- How to update shipment using API through AJAX
- How to update address using API through AJAX
First, We need to create and form in adding shipment.
<form id="add_address"> Receiver Name: <input type="text" name="wpcargo_receiver_name" value=""> Phone Number: <input type="text" name="wpcargo_receiver_phone" value=""> Address: <input type="text" name="wpcargo_receiver_address" value=""> Email: <input type="text" name="wpcargo_receiver_email" value=""> <input type="submit" value="Submit Shipment"> </form>
Note: Make sure the the field name exist in the address field list. to get the address available field list use this route mysite.com/wp-json/wpcargo/v1/api/api_key/address/fields/type.
Second, Create a script that will handle the form submission.
jQuery(document).ready( function( $ ){ $('form#add_address').on('submit', function( e ){ e.preventDefault(); var wpcargo_receiver_name = $( 'input[name="wpcargo_receiver_name"]' ).val(); var wpcargo_receiver_phone = $( 'input[name="wpcargo_receiver_phone"]' ).val(); var wpcargo_receiver_address = $( 'input[name="wpcargo_receiver_address"]' ).val(); var wpcargo_receiver_email = $( 'input[name="wpcargo_receiver_email"]' ).val(); $.ajax({ type:"POST", dataType:"JSON", data:{ action:'add_address', wpcargo_receiver_name:wpcargo_receiver_name, wpcargo_receiver_phone:wpcargo_receiver_phone, wpcargo_receiver_address:wpcargo_receiver_address, wpcargo_receiver_email:wpcargo_receiver_email }, url : demoAjaxHandler.ajaxurl, beforeSend:function(){ //** Proccessing console.log( 'loading...' ); }, success:function(response){ //** Process Completed console.log( response ) } }); }); });
Third, Enqueue the script using “wp_enqueue_script” hook and localize the script for the AJAX handler using “wp_localize_script” hook
function demo_enqueue_style() { wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'demo-script', get_stylesheet_directory_uri().'/demo.js', false ); $translation_array = array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), ); wp_localize_script( 'demo-script', 'demoAjaxHandler', $translation_array ); } add_action( 'wp_enqueue_scripts', 'demo_enqueue_style' );
Fourth, Create a hook “wp_ajax_” to handle AJAX action.
function add_address_ajax_callback() { $ch = curl_init(); // Add form data into array and build query parameter // note: Array key is the post meta and the array value with the post meta value $post = http_build_query( array( 'shipment' => sanitize_text_field( $_POST['shipment'] ), 'wpcargo_shipper_name' => sanitize_text_field( $_POST['shipperName'] ), 'wpcargo_receiver_name' => sanitize_text_field( $_POST['receiveName'] ), 'wpcargo_status' => sanitize_text_field( $_POST['status'] ) ) ); // Add the option URL with API key curl_setopt($ch, CURLOPT_URL, 'http://mysite.com/wp-json/wpcargo/v1/api/my-api-key-here/address/type/add' ); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, $post ); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $result = curl_exec ($ch); curl_close ($ch); // Return the response of the API echo json_encode( $result ); wp_die(); } add_action( 'wp_ajax_add_address', 'add_address_ajax_callback' ); add_action( 'wp_ajax_nopriv_add_address', 'add_shipment_ajax_callback' );