当前位置: 首页 > 知识库问答 >
问题:

在WooCommerce shop页面的Ajax Add to cart按钮中添加一个quantity字段

阮健
2023-03-14

我是木材贸易的新手。我试图在商店页面中显示数量框。我已经使用了下面的代码,它的工作与预期的一样:

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 add to cart按钮被默认按钮替换了。

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

共有2个答案

花稳
2023-03-14

执行上面的所有操作,没有“数量错误”。

代码:

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(){
    //if( is_shop() || is_product_category() || is_product_tag() ): ?>
    <script type='text/javascript'>
        jQuery(function($){
            // Update quantity on 'a.button' in 'data-quantity' attribute (for ajax)
            $(".add_to_cart_button.product_type_simple").on('click', function() { var $button = $(this); $button.data('quantity', $button.parent().find('input.qty').val()); });        
            // remove old "view cart" text, only need latest one thanks!
            $(document.body).on("adding_to_cart", function() {
                $("a.added_to_cart").remove();
            });
        });
    </script>
    <?php //endif;
}

参考资料:

@LoictheAztec在2018年2月11日以上的条目。

@BraciaWrite's和@AndrewMclagan's分别于2015年12月11日和2018年3月15日在GitHub上登录。

https://gist.github.com/webaware/6260326

注:

代码应该在按下“add_to_cart”按钮时执行检查,而不是在数量更改时执行检查。

在WooCommerce产品的自定义页面上运行此代码时,我注释掉了函数“archives_quantity_fields_script”下的if和endif语句。

希望这有帮助!

翁良弼
2023-03-14

2021年更新

对于从3.2到5+的WooCommerce版本,优化了jQuery代码并删除了一个数量bug。添加到推车后重置添加数量。

下面的自定义函数挂接在woocommerce_loop_add_to_cart_link筛选器钩子中,并为WooCommerce档案页面和其他产品循环上的每个产品添加一个数量输入字段。这里我们主要使用原始的WooCommerce代码。

当客户更改数量时,需要一些jQuery代码来更新add to cart按钮上的Data-Quantity属性。可能需要一些样式,这取决于您的客户的愿望(以及您的主题)。

隐藏“查看购物车”按钮的附加部分位于末尾。

代码:

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 add to cart时):

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

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

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

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文件中。

 类似资料:
  • 本文向大家介绍使用jQuery在移动页面上添加按钮和给按钮添加图标,包括了使用jQuery在移动页面上添加按钮和给按钮添加图标的使用技巧和注意事项,需要的朋友参考一下 创建按钮 data-role=button 给HTML元素添加 data-role="button" 属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标

  • 问题内容: 我的网站上有一个jqgrid(版本3.5.3),它是通过对Web服务的Ajax调用获取结果的。查询通常很复杂,加载结果需要花费几秒钟的时间。加载时,用户会看到一个框[Loading …]。 如果用户意识到他们在搜索错误的内容,则客户端要求向网格添加一个取消按钮,这将: 使网格忘记刚刚请求的数据 保留先前搜索中已加载的结果 似乎没有内置任何功能,因此我可能正在寻找一些技巧来实现这一目标。

  • 如何将下面的图像放入中,并在JPanel的顶部调整,它看起来与图像类似,但有正确缠绕的按钮?(现在它们的形状为1行4列) 后续:从+优秀的一个--至少我的坏方法

  • 我有一些问题在按钮中添加代码,所以示例:我在数量上输入2它将*价格和数量示例400*2=800,但当我再次输入2意味着800x2=1600,有人能指导我吗?谢谢,最后2行显示了错误。 `private void jButton2ActionPerformed(java.awt.event.ActionEvt){ int id=integer.parseint(jTextField1.getText

  • 如何更改代码以使其只适用于已定义的产品类别?