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

推荐答案

更新 于2020年5月

对于WooCommerce版本从3.2到4+，优化了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).

隐藏查看购物车"按钮的另一部分位于末尾.

An additional section to hide the "View cart" button is located at the end.

代码:

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

                // (optional) Removing other previous "view cart" buttons
                $(".added_to_cart").remove();
            });
        });
    </script>
    <?php
}

代码进入您的活动子主题(活动主题)的functions.php文件中.
已测试并可以在店面主题上使用WooCommerce版本4.1.1和WordPress 4.5.1.

Code goes in functions.php file of your active child theme (active theme).
Tested and works on WooCommerce version 4.1.1 and WordPress 4.5.1 on Storefront theme.

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

1)您可以将此CSS规则添加到活动主题中的styles.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屋！