douyi4991
2015-08-25 05:25
浏览 72
已采纳

WooCommerce - 更改QTY触发购物车中的AJAX调用

I would like to update and then reload my cart via AJAX when the quantity of an item in the cart is changed.

I can already successfully load in my cart via AJAX.

To load in my cart my php function looks like this. (in my 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 like this (in cart-show-ajax.js)

jQuery(function($) {

    //If view-cart is clicked, fill the view-cart-popup window with the 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 could show a loader here
            },
            success: function(data)
            {
                //Hide loader here
                $( '.view-cart-popup' ).html(data);
                activateReturnToShop();
            },
            error: function()
           {
                //If an ajax error has occured, do something here...
                $(".product-container").html('<p>There has been an error</p>');
            }
        });

    }

});

The HTML for the cart is as 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 is that I can achieve this if when the input is changed I run a function that updates the cart, then simply runs the existing show_cart() function.

I'm not sure about how to make a function that will detect the change to input, grab the new quantity of the product and update the amount in the cart...

It could looks something like:

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

Anyone know how to get the new quantity update the cart with it?

Thank you for all your help!

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

相关推荐 更多相似问题