Я использую API для расчета стоимости доставки на основе местоположения пользователя.Пользователь заполняет свое местоположение в поле ввода текста в Google Places Autocomplete.При заполнении широта и долгота местоположения регистрируются и отправляются в API для расчета стоимости доставки.Это все настроено и работает
Следующий бит захватывает возвращаемую стоимость и передает ее через Ajax-вызов для обновления страницы проверки.
Ниже приведен код моего кода:
Ajax-вызов для получения стоимости доставки из 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.');
}
});
});
Так что в основном у меня естьтекстовое поле ввода с идентификатором sendy_location, которое привязано к API Google Адресов для автозаполнения местоположений.На входе захватите широту и долготу и передайте их API.
Это код на стороне сервера в моем файле functions.php, обрабатывающем 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();
}
Здесь я получаю стоимость доставки, возвращаемую API: $_SESSION['shippingCost'] = $shippingCost; и сохраните его в сеансе.Затем я передаю его на хук woocommerce_cart_calculate_fees:
//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);
}
Итак, что происходит, когда пользователь заполняет поле ввода с помощью Google Places API, стоимость доставки увеличивается, и страница перезагружаетсяи стоимость доставки отражается на странице оформления заказа, но после перезагрузки страницы поле ввода остается пустым (хотя стоимость доставки была увеличена).Так есть ли лучший, более чистый способ определения стоимости доставки и обновления страницы оформления заказа с помощью Ajax?
Я искал и увидел метод Ajax woocommerce:
$( document.body ).bind( 'update_checkout' );
если это то, что мне нужно, в каком контексте я буду использовать его в моем сценарии?
ОБНОВЛЕНИЕ
После комментария Салли я прикреплю несколько скриншотов кпомогите объяснить мой вариант использования:
На приведенном выше снимке экрана показан непосредственный вид, который будет отображаться пользователю при переходе на страницу оформления заказа:
- Им будет представлено поле ввода местоположения, где они будут заполнять место получения.Это поле ввода работает с API автозаполнения Google Адресов, и при заполнении координаты собираются и отправляются в API местоположения, который я использую для расчета стоимости доставки (скрипт Ajax, который я разместил выше, обрабатывает это)
Далее на приведенном выше снимке экрана показано, что происходит, когда пользователь вводит свое местоположение.Стоимость доставки возвращена, и, поскольку мне еще предстоит выяснить, как обновить стоимость доставки с помощью ajax, на данный момент я должен сохранить стоимость доставки, возвращенную в сеансе, и затем перезагрузить страницу, как показано моим success обратным вызовом.: location.reload();.Поскольку я не могу обновить страницу доставки через ajax, стоимость доставки, сохраненная в сеансе:
$data = json_decode($response["body"]);
$shippingCost = $data->data->amount;
session_start();
$_SESSION['shippingCost'] = $shippingCost;
передается на страницу доставки после перезагрузки,Теперь обратите внимание, что мое поле ввода пусто, несмотря на то, что я уже получил стоимость доставки от API.Поэтому, если я попытаюсь выполнить свой заказ, я получу ошибку проверки в поле ввода местоположения.Все это можно решить с помощью обновления Ajax на странице.
Я надеюсь, что мои правки предоставили больше информации о том, где я нахожусь и чего я хочу достичь.т.е. возьмите мою стоимость доставки из моего API и обновите страницу доставки.Спасибо