WooCommerce-更改数量触发购物车中的AJAX呼叫 [英] WooCommerce - change QTY triggers AJAX call in cart

问题描述

当购物车中的物品数量发生更改时，我想通过AJAX更新然后重新加载我的购物车.

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

我已经可以通过AJAX成功加载购物车.

I can already successfully load in my cart via AJAX.

要加载到我的购物车中，我的php函数如下所示. (在我的functions.php中)

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');

我的Jquery代码如下(在cart-show-ajax.js中)

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>');
            }
        });

    }

});

购物车的HTML如下

<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>

我的最佳猜测是，如果更改输入后，我运行了一个更新购物车的函数，然后仅运行了现有的show_cart()函数，便可以实现这一目标.

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...

它可能看起来像:

$( '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?

感谢您的所有帮助！

推荐答案

好的，所以我知道了！ 我现在可以更新购物车商品的数量，而无需通过AJAX(:

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

我的functions.php看起来像这样

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');

我的cart-qty-ajax.js看起来像这样.

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!

这篇关于WooCommerce-更改数量触发购物车中的AJAX呼叫的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！