WooCommerce – change QTY triggers AJAX call in cart

2 comments

1. Okay so I figured it out!
   I can now update cart item’s quantities without refreshing via AJAX (:

   my functions.php looks like 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 as the hash found in input.qty's name
       $cart_item_key = $_POST['hash'];
   
       // Get the array of values owned by the product we're updating
       $threeball_product_values = WC()->cart->get_cart_item( $cart_item_key );
   
       // Get the quantity of the item in the 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 the quantity of the item in the cart
       if ( $passed_validation ) {
           WC()->cart->set_quantity( $cart_item_key, $threeball_product_quantity, true );
       }
   
       // Refresh the 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 like this.

   jQuery( function( $ ) {
   
       $( document ).on( 'change', 'input.qty', function() {
   
           var item_hash = $( this ).attr( 'name' ).replace(/cart[([w]+)][qty]/g, "$1");
           var item_quantity = $( this ).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 this is ‘good practice’.
   Thanks all!

2. This is a easy ways to resolve this if your are doing the scripting your selves instead of any plugin. Below code will help you to update the cart on quantity dropdown change in customize pop up window where mini cart is displaying:
   javascript:

   $(document).on('click', '.qty', function (e)
       {
        e.preventDefault();
        var qty = $(this).val();
        var cart_item_key = $(this).attr("id");
   
      $.ajax({
           type: 'POST',
           dataType: 'json',
           url: '<?php echo SITE_URL; ?>/wp-admin/admin-ajax.php',
           data: {action : 'update_item_from_cart', 'cart_item_key' : cart_item_key, 'qty' : qty,  },
           success: function (data) {
              alert('Updated successfully.');
           if (data) {
               alert('You missed something');
           }else{
               alert('Updated Successfully');
           }
       }
   
       });
   
    });
   

   *In above script .qty is class of the number dropdown.
   *Pass two values only i.e cart_item_key and quantity.
   *SITE_URL is domain name
   *pass two values i.e. qty and cart item key

   in functions.php place the below script

   function update_item_from_cart() {
        $cart_item_key = $_POST['cart_item_key'];   
        $quantity = $_POST['qty'];     
   
       // Get mini cart
       ob_start();
   
       foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item)
       {
           if( $cart_item_key == $_POST['cart_item_key'] )
           {
               WC()->cart->set_quantity( $cart_item_key, $quantity, $refresh_totals = true );
           }
       }
       WC()->cart->calculate_totals();
       WC()->cart->maybe_set_cart_cookies();
       return true;
   }
   
   add_action('wp_ajax_update_item_from_cart', 'update_item_from_cart');
   add_action('wp_ajax_nopriv_update_item_from_cart', 'update_item_from_cart');
   

Comments are closed.