将数量字段添加到 WooCommerce 商店页面上的 Ajax 添加到购物车按钮 [英] Add a quantity field to Ajax add to cart button on WooCommerce shop page

问题描述

我是 Woocommerce 的新手.我试图在商店页面中显示数量框.我使用了下面的代码，它按预期工作:

I am new to Woocommerce. I was trying to show the quantity box in the shop page. I have used the below code and it's working as expected:

add_action( 'woocommerce_before_shop_loop', 'handsome_bearded_guy_select_variations' );

function handsome_bearded_guy_select_variations() {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 30 );
}

但问题是 ajax 添加到购物车按钮被默认按钮替换了.

But the problem is that ajax add to cart button got replaced with default one.

如何为 Woocommerce 档案页面启用添加到购物车按钮带有数量字段的 ajax 功能?

How can I enable back the ajax functionality on add to cart button with quantity field for Woocommerce archives pages?

推荐答案

更新 2021年

对于从 3.2 到 5+ 的 WooCommerce 版本，优化了 jQuery 代码并删除了数量错误.添加到购物车后添加数量重置.

以下自定义函数挂钩在 woocommerce_loop_add_to_cart_link 过滤器挂钩中，并为 WooCommerce 存档页面和其他产品循环上的每个产品添加数量输入字段.我们在这里主要使用原始的 WooCommerce 代码.

The following custom function is hooked in woocommerce_loop_add_to_cart_link filter hook and adds a quantity input field to each product on WooCommerce archives pages and other product loops. We use here mostly the original WooCommerce code.

当客户更改数量时，需要一些 jQuery 代码来更新添加到购物车按钮上的 data-quantity 属性.可能需要一些样式，这取决于您的客户希望(和您的主题).

A bit of jQuery code is necessary to update the data-quantity attribute on the add to cart button when customer changes the quantity. Some styling might be needed, depending on your client wishes (and on your theme).

用于隐藏查看购物车"的附加部分按钮位于末尾.

代码:

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        // Embedding the quantity field to Ajax add to cart button
        $html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
            woocommerce_quantity_input( array(), $product, false ),
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            esc_html( $product->add_to_cart_text() )
        );
    }
    return $html;
}

add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
    ?>
    <script type='text/javascript'>
        jQuery(function($){
            // Update data-quantity
            $(document.body).on('click input', 'input.qty', function() {
                $(this).parent().parent().find('a.ajax_add_to_cart').attr('data-quantity', $(this).val());
                $(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
            }).on('click', '.add_to_cart_button', function(){
                var button = $(this);
                setTimeout(function(){
                    button.parent().find('.quantity > input.qty').val(1); // reset quantity to 1
                }, 1000); // After 1 second

            });
        });
    </script>
    <?php
}

代码位于您的活动子主题(活动主题)的functions.php 文件中.
在店面主题的 WooCommerce 4.1.1 版和 WordPress 4.5.1 版上进行了测试和工作.

隐藏查看购物车"；按钮 (使用 Ajax 添加到购物车时):

1).您可以将此 CSS 规则添加到位于活动主题中的 style.css 文件中:

1). You can add this CSS rule to the styles.css file located in your active theme:

a.added_to_cart.wc-forward {
    display:none;
}

2).您可以使用以下挂钩函数(第一个选项是最好的方法):

2). You can use the following hoocked function (first option is the best way):

add_action( 'wp_head' , 'hide_ajax_view_cart_button' );
function hide_ajax_view_cart_button(){
    if( is_shop() || is_product_category() || is_product_tag() ): ?>
    <style>
        a.added_to_cart.wc-forward {
            display:none;
        }
    </style>
    <?php endif;
}

代码位于您的活动子主题(活动主题)的 function.php 文件中.

这篇关于将数量字段添加到 WooCommerce 商店页面上的 Ajax 添加到购物车按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！