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

Posted 2023-02-24

【中文标题】WooCommerce - 更改数量触发购物车中的 AJAX 调用

【英文标题】：WooCommerce - change QTY triggers AJAX call in cart

【发布时间】：2015-11-18 16:35:33

【问题描述】：

当购物车中的商品数量发生变化时，我想通过 AJAX 更新并重新加载我的购物车。

我已经可以通过 AJAX 成功加载到我的购物车了。

要加载到我的购物车中，我的 php 函数如下所示。 （在我的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 中）

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() 函数，我可以实现这一点。

我不确定如何创建一个函数来检测输入的变化、获取产品的新数量并更新购物车中的数量......

它可能看起来像：

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

有人知道如何获取新数量并用它更新购物车吗？

感谢您的帮助！

【参考方案1】：

好的，我想通了！ 我现在可以在不通过 AJAX 刷新的情况下更新购物车商品的数量（：

我的functions.php看起来像这样

//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 看起来像这样。

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

    );

);

效果很好，但我不确定这是否是“好习惯”。 谢谢大家！

【讨论】：

结帐页面上也可以吗？在结帐页面，客户可以更改数量。

为什么是 preg_replace && filter_var？以某种方式增加安全性？

【参考方案2】：

如果您自己编写脚本而不是任何插件，这是解决此问题的简单方法。下面的代码将帮助您在显示迷你购物车的自定义弹出窗口中更新数量下拉更改的购物车： 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');
        
    

    );

 );

*在上面的脚本中，.qty 是数字下拉列表的类别。 *仅传递两个值，即 cart_item_key 和数量。 *SITE_URL 是域名 *传递两个值，即数量和购物车项目键

在functions.php中放置以下脚本

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