将数量选择添加到 woocommerce 购物车小部件

Question

我喜欢为客户提供在 woocommerce 购物车小部件中添加更多产品的选项。

到目前为止，我设法找到了这段代码：

add_filter( 'woocommerce_widget_cart_item_quantity', 'add_minicart_quantity_fields', 10, 3 );
function add_minicart_quantity_fields( $html, $cart_item, $cart_item_key ) {
    $product_price = apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $cart_item['data'] ), $cart_item, $cart_item_key );

    return woocommerce_quantity_input( array('input_value' => $cart_item['quantity']), $cart_item['data'], false ) . $product_price;
}

该代码使数量选择在购物车中可见。 但问题是当我们改变数量时，没有发生任何变化...... 如果我理解正确的话，我应该添加一个 Ajax 请求来在用户添加或删除产品时更改产品的数量。

Answer 1

我还想在 Woocommerce 购物车中添加数量按钮小部件.我通过将您的代码与此答案的修改版本相结合来实现此目的：https://stackoverflow.com/a/69218525/4234891

我们将通过 AJAX 发送数量，在后端更新数量，然后将购物车小计发回。

所以首先像你已经做的那样创建数量按钮。在functions.php 添加：

add_filter('woocommerce_widget_cart_item_quantity', 'add_minicart_quantity_fields', 10, 3);
function add_minicart_quantity_fields($html, $cart_item, $cart_item_key)
{
    $product_price = apply_filters('woocommerce_cart_item_price', WC()->cart->get_product_price($cart_item['data']), $cart_item, $cart_item_key);

    return woocommerce_quantity_input(array('input_value' => $cart_item['quantity']), $cart_item['data'], false) . $product_price;
}

接下来，注册 JavaScript。在functions.php 添加:

add_action('wp_enqueue_scripts', function () {
    wp_register_script('custom-cart-widget', get_stylesheet_directory_uri() . '/js/cart-widget.js', ['jquery'], '1.0', true);
    wp_localize_script('custom-cart-widget', 'cart_widget_qty_ajax', ['ajax_url' => admin_url('admin-ajax.php')]);
    wp_enqueue_script('custom-cart-widget');
});

接下来，添加将通过 AJAX 调用的函数。在functions.php 添加:

function ajax_change_widget_cart_qty()
{
    // 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
    $cart_item_values = WC()->cart->get_cart_item($cart_item_key);

    // Get the quantity of the item in the cart
    $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, $cart_item_values, $product_quantity);

    // Update the quantity of the item in the cart
    if ($passed_validation) {
        WC()->cart->set_quantity($cart_item_key, $product_quantity, true);
    }

    wp_send_json_success(['subtotal_html' => WC()->cart->get_cart_subtotal()]);
}

add_action('wp_ajax_change_widget_cart_qty', 'ajax_change_widget_cart_qty');
add_action('wp_ajax_nopriv_change_widget_cart_qty', 'ajax_change_widget_cart_qty');

最后，创建一个文件你的主题/js/cart-widget.js和添加:

jQuery(document).ready(function($) {
    jQuery(document).on('change', '.woocommerce.widget_shopping_cart input.qty', function(){
        var value = $(this).val();
        if (!isNaN(value) && value > 0) {
            var holder = $(this).closest('li');
            if (holder.length) {
                var removeButton = $(holder).find('.remove_from_cart_button');
                if (removeButton.length) {
                    var itemHash = removeButton.attr('data-cart_item_key');
                    if (itemHash) {

                        holder.block({
                            message: null,
                            overlayCSS: {
                                opacity: 0.6
                            }
                        });

                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            url: cart_widget_qty_ajax.ajax_url,
                            data: {
                                action: 'change_widget_cart_qty',
                                hash: itemHash,
                                quantity: value,
                            },
                            success: function(response) {
                                if (response.data.subtotal_html) {
                                    var miniCart = $(holder).closest('div.widget_shopping_cart_content');
                                    if (miniCart.length) {
                                        var subTotalHolder = $(miniCart).find('.woocommerce-mini-cart__total .woocommerce-Price-amount.amount');
                                        if (subTotalHolder) {
                                            subTotalHolder.replaceWith(response.data.subtotal_html);
                                        }
                                    }
                                }
                            },
                            complete: function() {
                                holder.css( 'opacity', '1' ).unblock();
                            },
                        });
                    }
                }

            }
        }
    });
});