woocommerce 使用 ajax 类将价格添加到购物车按钮

Question

在研究了这个问题后，我发现了将价格添加到“添加到购物车”按钮的代码，如下所示：

[$50 加入购物车]

由于某种原因，该代码不使用 ajax 类，因此当单击按钮时页面会重新加载。正常的默认按钮将使用 ajax 类，因此当它被点击时它不会重新加载页面，但会显示一条消息，表明它已被添加到购物车中。

我通过在 \woocommerce\loop\add-to-cart.php 将文件添加到我的主题来覆盖文件 add-to-cart.php

下面是不使用ajax类的代码：

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button product_type_simple add_to_cart_button ajax_add_to_cart">%s %s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( $product->id ),
        esc_attr( $product->get_sku() ),
        $product->is_purchasable() ? 'add_to_cart_button' : '',
        esc_attr( $product->product_type ),
        $product->get_price_html(),
        esc_attr( isset( $class ) ? $class : 'button' ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

如何修改它以使用默认添加到购物车按钮的 ajax 类？

提前致谢

Answer 1

根据我的经验，添加到购物车模板是一个非常危险的覆盖模板。您没有说您使用的是哪个版本的 WooCommerce，但我假设是 2.5？我假设是因为我帮助重写了 WooCommerce ajax 添加到购物车代码以触发 .ajax_add_to_cart 类，因为它解决了我在使用 Name Your Price 和 Subscriptions 扩展时遇到的一个复杂问题。但是由于您要覆盖模板，因此您不会获得 2.5 更新。

这是新的add-to-cart.php template 和更新的woocommerce_template_add_to_cart() 函数。

您可以看到通过数组上的implode() 在第一个中传递给模板并在第二个中定义的类。因此，要将那段代码导入您的代码中，您会得到：

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button product_type_simple add_to_cart_button ajax_add_to_cart">%s %s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( $product->id ),
        esc_attr( $product->get_sku() ),
        implode( ' ', array_filter( array(
                        'button',
                        'product_type_' . $product->product_type,
                        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
                        $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : ''
                ) ) ),
        esc_attr( $product->product_type ),
        $product->get_price_html(),
        esc_attr( isset( $class ) ? $class : 'button' ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

不过，我强烈建议您不要覆盖此模板。从您的代码中，我没有看到任何使其不同/自定义的修改，这基本上意味着您对升级问题敞开心扉，并且没有任何好处。

Answer 2

Button 已经有 ajax_add_to_cart 类来绑定 Ajax 调用。 只需确保您已启用 Ajax 添加到购物车按钮

转到Woocommerce > Settings > Products > Display 并检查Enable AJAX add to cart buttons on archives

此外，它仅在您从产品存档页面添加产品时有效，它不适用于产品单页。

参考：Configuring Woocommerce Settings