php - WooCommerce - change QTY triggers AJAX call in cart -

i update , reload cart via ajax when quantity of item in cart changed.

i can load in cart via ajax.

to load in cart php function looks this. (in functions.php)

function enqueue_cart_show_ajax() {      wp_register_script( 'cart-show-ajax-js', get_template_directory_uri() . '/js/cart-show-ajax.js', array( 'jquery' ), '', true );     wp_localize_script( 'cart-show-ajax-js', 'cart_show_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );     wp_enqueue_script( 'cart-show-ajax-js' );  } add_action('wp_enqueue_scripts', 'enqueue_cart_show_ajax');  function ajax_show_cart() {      echo do_shortcode( '[woocommerce_cart]' );      die();  }  add_action('wp_ajax_show_cart', 'ajax_show_cart'); add_action('wp_ajax_nopriv_show_cart', 'ajax_show_cart'); 

my jquery code looks (in cart-show-ajax.js)

jquery(function($) {      //if view-cart clicked, fill view-cart-popup window cart     $( '.view-cart' ).on('click', function(){         show_cart();      });      //main ajax function     function show_cart() {          $.ajax({             type: 'get',             url: cart_show_ajax.ajax_url,             data: {                 action: 'show_cart',             },             beforesend: function ()             {                 //you show loader here             },             success: function(data)             {                 //hide loader here                 $( '.view-cart-popup' ).html(data);                 activatereturntoshop();             },             error: function()            {                 //if ajax error has occured, here...                 $(".product-container").html('<p>there has been error</p>');             }         });      }  }); 

the html cart follows

<td class="product-quantity">     <div class="quantity">         <input type="number" step="1" min="0"          name="cart[1e334311e1ef4cf849abff19e4237358][qty]"          value="4" title="qty" class="input-text qty text" size="4">     </div> </td> 

my best guess can achieve if when input changed run function updates cart, runs existing show_cart() function.

i'm not sure how make function detect change input, grab new quantity of product , update amount in cart...

it looks like:

$( 'input.qty' ).on("change", function(){     // grab new product quantity     // update cart     show_cart(); }); 

anyone know how new quantity update cart it?

thank help!

okay figured out! can update cart item's quantities without refreshing via ajax (:

my functions.php looks this

//enqueue ajax scripts function enqueue_cart_qty_ajax() {      wp_register_script( 'cart-qty-ajax-js', get_template_directory_uri() . '/js/cart-qty-ajax.js', array( 'jquery' ), '', true );     wp_localize_script( 'cart-qty-ajax-js', 'cart_qty_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );     wp_enqueue_script( 'cart-qty-ajax-js' );  } add_action('wp_enqueue_scripts', 'enqueue_cart_qty_ajax');  function ajax_qty_cart() {      // set item key hash found in input.qty's name     $cart_item_key = $_post['hash'];      // array of values owned product we're updating     $threeball_product_values = wc()->cart->get_cart_item( $cart_item_key );      // quantity of item in cart     $threeball_product_quantity = apply_filters( 'woocommerce_stock_amount_cart_item', apply_filters( 'woocommerce_stock_amount', preg_replace( "/[^0-9\.]/", '', filter_var($_post['quantity'], filter_sanitize_number_int)) ), $cart_item_key );      // update cart validation     $passed_validation  = apply_filters( 'woocommerce_update_cart_validation', true, $cart_item_key, $threeball_product_values, $threeball_product_quantity );      // update quantity of item in cart     if ( $passed_validation ) {         wc()->cart->set_quantity( $cart_item_key, $threeball_product_quantity, true );     }      // refresh page     echo do_shortcode( '[woocommerce_cart]' );      die();  }  add_action('wp_ajax_qty_cart', 'ajax_qty_cart'); add_action('wp_ajax_nopriv_qty_cart', 'ajax_qty_cart'); 

my cart-qty-ajax.js looks this.

jquery( function( $ ) {      $( document ).on( 'change', 'input.qty', function() {          var item_hash = $( ).attr( 'name' ).replace(/cart\[([\w]+)\]\[qty\]/g, "$1");         var item_quantity = $( ).val();         var currentval = parsefloat(item_quantity);          function qty_cart() {              $.ajax({                 type: 'post',                 url: cart_qty_ajax.ajax_url,                 data: {                     action: 'qty_cart',                     hash: item_hash,                     quantity: currentval                 },                 success: function(data) {                     $( '.view-cart-popup' ).html(data);                 }             });            }          qty_cart();      });  }); 

works beautifully, though i'm not sure if 'good practice'. all!