Question

我正在使用API根据用户的位置计算运费。用户在Google地方信息自动填充文本输入字段中填写其位置。填写时，将捕获位置的纬度和经度并将其发送到API以计算运输成本。这一切都已设置并正常工作

接下来的一点是获取返回的费用，并通过Ajax调用传递费用以更新checckout页面。

到目前为止，这是我的代码细分：

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

}）;

因此，基本上，我有一个ID为sendy_location的文本输入字段，该字段绑定到Google的Places API以自动完成位置。输入时，获取经度和纬度并将其传递给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更新结帐页面？

我到处搜索并看到woocommerce Ajax方法：

$( document.body ).bind( 'update_checkout' );

如果这是我的需要，我会在什么情况下使用它？

更新

在Sally发表评论之后，我将附上一些屏幕截图以帮助解释我的用例：

上面的屏幕截图是当用户点击结帐页面时将立即显示给用户的视图：

将为他们提供一个位置输入字段，在其中填写取件位置。此输入字段由Google Places自动填充API提供支持，并且在填充坐标时被捕获并发送到我用来计算运输费用的Location API（我上面发布的Ajax脚本可以处理此问题）

接下来，上面的屏幕快照描述了用户输入位置时发生的情况。返回了运输费用，由于我还没有弄清楚如何通过Ajax更新运输费用，因此，现在，我必须存储会话中返回的运输费用，然后重新加载页面，如我的{{1}所示}回调：success。由于我无法通过ajax更新送货页面，因此该会话中存储了送货费用：

location.reload();

重新加载后，

将传递到装运页面。现在请注意，尽管我已经从API收到运费，但我的输入位置字段为空。因此，如果我尝试完成订单，则在位置输入字段上会收到验证错误。所有这些都可以通过页面上的Ajax更新来解决。

我希望我的编辑能够提供有关我现在所处的位置以及我想要实现的目标的更多信息。即从我的API获取我的运费，并更新运费页面。谢谢

Woocommerce结帐页面-Ajax刷新运输费用

0 个答案: