Woocommerce Checkout page - Ajax refresh shipping cost - ajax

Question

I'm using an API to calculate the shipping cost based on the user's location. The user fills in their location on a Google Places Autocomplete text input field. On filling in, the location's latitude and longitude is captured and sent to the API to calculate the shipping cost. This is all set up and working
The next bit is grabbing the returned cost and pass it via an Ajax call to update the checckout page.
Here's a breakdown of my code so far:
Ajax call for pulling shipping cost from the API:
var input = document.getElementById('sendy_location');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
document.getElementById('city2').value = place.name;
document.getElementById('cityLat').value = place.geometry.location.lat();
document.getElementById('cityLng').value = place.geometry.location.lng();
//sendy api call
var name = $('#billing_first_name').val()+' '+$('#billing_last_name').val();
var phone = $('#billing_phone').val();
var email = $('#billing_email').val();
var customerLocation = $('#city2').val();
var cityLat = $('#cityLat').val();
var cityLng = $('#cityLng').val();
var amountTotal = $('#amounttotal').val();
var pickupdate = $('#pickupdate').val();
var requestToken = $('#randomvalue').val();
$.ajax({
data:{
"action": 'foo',
"security": "wc_checkout_params.update_order_review_nonce",
"command": "request",
"data": {
"api_key": "my_api_key",
"api_username": "my_api_username",
"vendor_type": 2,
"from": {
"from_name": "client_shop_location",
"from_lat": "client_shop_lat",
"from_long": "client_shop_long",
"from_description": ""
},
"to": {
"to_name": customerLocation,
"to_lat": cityLat,
"to_long": cityLng,
"to_description": ""
},
"recepient": {
"recepient_name": name,
"recepient_phone": phone,
"recepient_email": email,
"recepient_notes": ""
},
"delivery_details": {
"pick_up_date": pickupdate,
"collect_payment": {
"status": false,
"pay_method": 0,
"amount": amountTotal
},
"return": true,
"note": " Sample note",
"note_status": true,
"request_type": "quote"
}
},
"request_token_id": requestToken
},
changeOrigin: true,
type: 'POST',
url:ajaxurl,
success: function(response){
var responseData = JSON.parse(''+response+'');
if(responseData.success == false)
{
$("html, body").animate({ scrollTop: 0 }, "slow");
$('.sendy-errors').html('An error occured. Please refresh the page and try again.');
}
else
{
console.log('success');
location.reload();
console.log(responseData.response.body);
}
},
dataType: 'html',
error: function(response){
$("html, body").animate({ scrollTop: 0 }, "slow");
$('.sendy-errors').html('An error occured. Please refresh the page and try again.');
}
});
});
So basically, i have a text input field with id sendy_location that is bound to Google's Places API to autocomplete locations. On input, grab the latitude and longitude and pass them to the API.
This is the server side code in my functions.php file handling the Ajax:
function foo(){
if ( empty( $_POST['data']['to']["to_lat"] ) || empty( $_POST['data']
['to']["to_long"] ) )
{
wp_die( 'You have to select from the list suggested for you' );
}
$post_data = wp_unslash( array( 'data' => $_POST['data'] ) );
$post_data['command'] = wp_unslash( $_POST['command'] );
$post_data['security'] = wp_unslash( $_POST['security'] );
$post_data['request_token_id'] = wp_unslash( $_POST['request_token_id']
);
// var_dump(json_encode( $post_data ));exit;
$api_url = 'https://apitest.sendyit.com/v1/';
$response = wp_remote_post( $api_url, array(
'headers' => array(
'Content-Type' => 'application/json',
),
'body' => json_encode( $post_data ),
) );
if ( is_wp_error( $response ) )
{
// var_dump(wp_send_json( $response->get_error_message() ));exit;
echo json_encode(array( 'success' => false, 'response' => $response-
>get_eror_message() ));
exit;
}
else
{
$data = json_decode($response["body"]);
$shippingCost = $data->data->amount;
session_start();
$_SESSION['shippingCost'] = $shippingCost;
// var_dump($shippingCost);exit;
echo json_encode(array( 'success' => true, 'response' => $response ));
}
wp_die();
}
Here i grab the shipping cost returned by the API: $_SESSION['shippingCost'] = $shippingCost; and store it in a session. Then i pass it to the woocommerce_cart_calculate_fees hook:
//shipping cost from sendy
add_action('woocommerce_cart_calculate_fees', 'woo_sendy_shipping_cost');
function woo_sendy_shipping_cost()
{
#session_start();
$shippingCost = $_SESSION['shippingCost'];
WC()->cart->add_fee('Shipping ', $shippingCost);
}
So what happens so far is once the user fills in the input field powered by Google's Places API, the shipping cost is pulled and the page is reloaded and the shipping cost reflects on the checkout page, but since the page reloads, the input field is empty(though the shipping cost has been pulled). So is there a better, cleaner way of pulling my shipping cost and updating the checkout page via Ajax?
I have searched around and seen a woocommerce Ajax method:
$( document.body ).bind( 'update_checkout' );
if this is what i need in what context will i use it in my scenario?
UPDATE
Following Sally's comment, i'll attach some screenshots to help explain my use case:
The above screenshot is the immediate view a user will be presented with when they hit the checkout page:
They'll be presented a location input field where they'll fill in the pickup location. This input field is powered by Google Places autocomplete API and on filling the coordinates are captured and sent to the Location API i'm using to calculate the shipping cost(The Ajax script i posted above handles this)
Next, the above screenshot depicts what happens when a user enters their location. The shipping cost is returned and since i've yet to figure out how to update the shipping cost via ajax, for now, i have to store the shipping cost returned in a session and then reload the page as shown by my success callback: location.reload();. Since i can't update the shipping page via ajax, the shipping cost stored in the session:
$data = json_decode($response["body"]);
$shippingCost = $data->data->amount;
session_start();
$_SESSION['shippingCost'] = $shippingCost;
is passed to the shipping page after the reload. Notice now that my input location field is empty despite the fact that i've already received the shipping cost from the API. So if i try to complete my order, I'll get a validation error on the location input field. All this can be solved by an Ajax update on the page.
I hope my edit has provided more information of where i'm at and what i want to achieve. i.e. grab my shipping cost from my API and update the shipping page. Thanks