显示数量框，并在Woocommerce商店页面中启用添加到购物车ajax [英] Show quantity box with add to cart ajax enabled in 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?

推荐答案

更新 (2019年)-删除了数量错误

Updated (2019) - Removed the quantity bug

这可以通过以下代码完成，该代码与原始代码非常相似，在专用的woocommerce_loop_add_to_cart_link过滤器挂钩和一些jQuery中使用自定义的挂钩函数.

This can be done with the following code, that is very similar to the original one, using a custom hooked function in dedicated woocommerce_loop_add_to_cart_link filter hook and a bit of jQuery.

现在，由于像以前一样使用ajax，一旦添加到购物车中，您将在右侧获得附加按钮查看购物车"(您可以隐藏:最后查看方式).

Now as it's ajax powered like before, once adding to cart, you will get the additional button "View cart" on right side (that you can hide: see at the end how).

您将不得不对此做一些CSS样式...

You will have to make some CSS styling on this...

代码:

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

        // Adding embeding <form> tag and the quantity field
        $html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s',
            '<form class="cart">',
            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() ),
            '</form>'
        );
    }
    return $html;
}

add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
    <script type='text/javascript'>
        ?>
        jQuery(function($){
            // Update quantity
            $(".add_to_cart_button.product_type_simple").on('click input', function() {
                $(this).data('quantity', $(this).parent().find('input.qty').val() ); 
            });        

            // On "adding_to_cart" delegated event, removes others "view cart" buttons 
            $(document.body).on("adding_to_cart", function() {
                $(".added_to_cart").remove();
            });
        });
    </script>
    <?php //endif;
}

代码进入您的活动子主题(活动主题)的function.php文件中.经过测试并可以正常工作.

Code goes in function.php file of your active child theme (active theme). Tested and works.

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

然后您可以首先将其从jQuery代码中删除:

Then you can first remove this from the jQuery code:

// On "adding_to_cart" delegated event, removes others "view cart" buttons
$(document.body).on("adding_to_cart", function() {
    $(".added_to_cart").remove();
});

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

1) You can add this CSS rule to your 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文件中.

经过测试可以正常工作.

tested and works.

这篇关于显示数量框，并在Woocommerce商店页面中启用添加到购物车ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！