How to update cart item quantities and price based on custom select field on checkout in woocommerce - ajax

Question

I'm trying to update cart item quantities and its price based on the custom selection field on checkout. If someone selects "Single person" option from the dropdown then the quantity will be 1 and if someone select "Two person" from the Dropdown then the cart quantity will update to 2 and the price will update as well.
Users can only add one product to the cart, Here is the reference link from where I got some help.
https://www.webroomtech.com/woocommerce-checkout-change-quantity-and-delete-products/
Im using wordpress ajax call to acheive this.
In functions.php I have this code
function customjs_script_add_quanity_js() {
wp_enqueue_script( 'checkout_script', get_stylesheet_directory_uri() . '/assets/js/add_quantity.js', array('jquery') );
wp_localize_script( 'checkout_script', 'add_quantity', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'customjs_script_add_quanity_js' );
function custom_addqty_load_ajax() {
if ( !is_user_logged_in() ){
add_action( 'wp_ajax_nopriv_update_order_review', 'anp_update_order_review' );
} else{
add_action( 'wp_ajax_update_order_review', 'anp_update_order_review' );
}
}
add_action( 'init', 'custom_addqty_load_ajax' );
function anp_update_order_review() {
$numberof_people = intval($_POST['number_of_people']);
$values = array();
parse_str($_POST['post_data'], $values);
$cart = $values['cart']; //This have no values in it,
foreach ( $cart as $cart_key => $cart_value ){
WC()->cart->set_quantity( $cart_key, $numberof_people);
WC()->cart->calculate_totals();
woocommerce_cart_totals();
}
wp_die();
}
In my **add_quantity.js** file
jQuery(function() {
jQuery( "form.checkout" ).on( "change", ".woocommerce-additional-fields select#______NumberOfTravelers______", function( ) {
//console.log('on chage called');
var number_of_people = jQuery(this).val();
var data = {
action: 'update_order_review',
security: wc_checkout_params.update_order_review_nonce,
number_of_people: number_of_people,
post_data: jQuery( 'form.checkout' ).serialize()
};
jQuery.post( add_quantity.ajax_url, data, function( response )
{
jQuery( 'body' ).trigger( 'update_checkout' );
console.log('success');
});
});
});
My $cart variable in the ajax function shows empty and the cart is not updating on the selection field change. Any help will be appreciated. Thanks
I've updated my code function.php and add_quantity.js
function customjs_script_add_quanity_js() {
wp_enqueue_script( 'checkout_script', get_stylesheet_directory_uri() . '/assets/js/add_quantity.js', array('jquery') );
wp_localize_script( 'checkout_script', 'add_quantity', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'customjs_script_add_quanity_js' );
function anp_update_order_review() {
$numberof_people = intval($_POST['number_of_people']);
$cart = WC()->cart->get_cart();
foreach ( $cart as $cart_item_key => $item ){
WC()->cart->set_quantity( $cart_item_key, $numberof_people);
WC()->cart->calculate_totals();
woocommerce_cart_totals(); //checkout order total not calculating correctly and cart items quantity and price not changing
}
wp_die();
}
add_action( 'wp_ajax_nopriv_update_order_review', 'anp_update_order_review' );
add_action( 'wp_ajax_update_order_review', 'anp_update_order_review' );
updated add_quantity.js file
jQuery(function() {
jQuery( "form.checkout" ).on( "change", ".woocommerce-additional-fields select#________NumberOfTravelers________", function( ) {
var number_of_people = jQuery(this).val();
//console.log('nop: ' + number_of_people);
var data = {
action: 'update_order_review',
number_of_people: number_of_people,
security: wc_checkout_params.update_order_review_nonce
};
jQuery.post( add_quantity.ajax_url, data, function( response )
{
jQuery( 'body' ).trigger( 'update_checkout' );
console.log('success');
});
});
});
Now this start working but it calculating wrong price on checkout order table at bottom and cart item quantity and price is not updating on dropdown selection.

Answer 1

I think you don't need serialize checkout form data.
just in your ajax function use the following code:
$cart = WC()->cart;

Answer 2

for your ajax function you don't have to check if the user is logged in. By default, WordPress checks the hook if its admin side or front end side. In addition, you are calling the hooks from inside a function.
function anp_update_order_review() {
$numberof_people = intval($_POST['number_of_people']);
$values = array();
parse_str($_POST['post_data'], $values);
$cart = $values['cart']; //This have no values in it,
foreach ( $cart as $cart_key => $cart_value ){
WC()->cart->set_quantity( $cart_key, $numberof_people);
WC()->cart->calculate_totals();
woocommerce_cart_totals();
}
wp_die();
}
add_action( 'wp_ajax_nopriv_update_order_review', 'anp_update_order_review' );
add_action( 'wp_ajax_update_order_review', 'anp_update_order_review' );

Answer 3

I've resolved the issue and managed to update the cart quantity and its price without an ajax call.
My functions.php file only includes a custom add_quantity.js file
function customjs_script_add_quanity_js() {
wp_enqueue_script( 'checkout_script', get_stylesheet_directory_uri() . '/assets/js/add_quantity.js', array('jquery') );
wp_localize_script( 'checkout_script', 'add_quantity', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'customjs_script_add_quanity_js' );
Above enqueue scripts Code goes in function.php file of your active child theme (or active theme).
updated add_quantity.js file
jQuery(function() {
jQuery( "form.checkout" ).on( "change", ".woocommerce-additional-fields select#_number_of_travlers_", function( ) {
var number_of_people = parseInt(jQuery(this).val());
if(number_of_people){
jQuery( 'input.qty' ).attr('value', number_of_people);
}else{
jQuery( 'input.qty' ).attr('value', 1);
}
jQuery(".cart [name='update_cart']").removeAttr('disabled').attr('aria-disabled','false').trigger("click");
});
});
Tested and works perfectly!