WooCommerce Ajax Cart Update Stopped Working

Question

I found a function to automatically update the cart when the quantity of an item is changed, and it was working until WooCommerce's 3.2.0 updated (latest update 3.2.1). I'm pretty sure something changed within this code:

add_action('woocommerce_cart_updated', 'wac_update');
function wac_update() {
    // is_wac_ajax: flag defined on wooajaxcart.js

    if ( !empty($_POST['is_wac_ajax'])) {
        $resp = array();
        $resp['update_label'] = __( 'Update Cart', 'woocommerce' );
        $resp['price'] = 0;

        // render the cart totals (cart-totals.php)
        ob_start();
        do_action( 'woocommerce_after_cart_table' );
        do_action( 'woocommerce_cart_collaterals' );
        do_action( 'woocommerce_after_cart' );
        $resp['html'] = ob_get_clean();

        // calculate the item price
        if ( !empty($_POST['cart_item_key']) ) {
            $items = WC()->cart->get_cart();
            $cart_item_key = $_POST['cart_item_key'];

            if ( array_key_exists($cart_item_key, $items)) {
                $cart_item = $items[$cart_item_key];
                $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
                $price = apply_filters( 'woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key );
                $resp['price'] = $price;
            }
        }

        echo json_encode($resp);
        exit;
    }
}

My Javascript still working but here it is for a reference:

function refreshCart() {
    jQuery('.cart-builder .qty').on('change', function(){
        var form = jQuery(this).closest('form');

        // emulates button Update cart click
        jQuery("<input type='hidden' name='update_cart' id='update_cart' value='1'>").appendTo(form);

        // plugin flag
        jQuery("<input type='hidden' name='is_wac_ajax' id='is_wac_ajax' value='1'>").appendTo(form);

        var el_qty = jQuery(this);
        var matches = jQuery(this).attr('name').match(/cart\[(\w+)\]/);
        var cart_item_key = matches[1];
        form.append( jQuery("<input type='hidden' name='cart_item_key' id='cart_item_key'>").val(cart_item_key) );

        // get the form data before disable button...
        var formData = form.serialize();

        jQuery("input[name='update_cart']").val('Updating...').prop('disabled', true);

        jQuery.post( form.attr('action'), formData, function(resp) {
                // ajax response
                jQuery('.cart-collaterals').html(resp.html);

                el_qty.closest('.cart_item').find('.product-subtotal').html(resp.price);

                console.log(resp.test);

                jQuery('#update_cart').remove();
                jQuery('#is_wac_ajax').remove();
                jQuery('#cart_item_key').remove();

                jQuery("input[name='update_cart']").val(resp.update_label).prop('disabled', false);
            },
            'json'
        );
    });
}

I've been looking through the change log, https://github.com/woocommerce/woocommerce/blob/master/CHANGELOG.txt , but I can't find what would be conflicting now. Like I said, it was working perfectly before this updated.

Answer 1

Ok here is a simpler solution, I am just appending a script to the bottom of the cart page but you could also enqueue it with wp_enqueue_script function which is the best way. All it does it simulates the pressing of the update cart button.

function cart_update_qty_script() {
    if (is_cart()) :
        ?>
        <script type="text/javascript">
            (function($){
                $(function(){
                    $('div.woocommerce').on( 'change', '.qty', function(){
                        $("[name='update_cart']").trigger('click');
                    });
                });
            })(jQuery);
        </script>
        <?php
    endif;
}

add_action( 'wp_footer', 'cart_update_qty_script' );