在WooCommerce中添加到购物车后更改自定义Ajax添加到购物车按钮文本

Question

我使用了一个代码来改变"Add to Cart"按钮，如果产品已经在购物车中。非常感谢7uc1f3r。

/* for single product */
add_filter( 'woocommerce_product_single_add_to_cart_text', 'single_product_button_text' );
 
function single_product_button_text( $text ) {
 
    if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( get_the_ID() ) ) ) {
        $text = 'Product in cart';
    }
 
    return $text;
 
}
 
/* for archive/category pages */
add_filter( 'woocommerce_product_add_to_cart_text', 'products_button_text', 20, 2 );
 
function products_button_text( $text, $product ) {
 
    if( 
       $product->is_type( 'simple' )
       && $product->is_purchasable()
       && $product->is_in_stock()
       && WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) )
    ) {
 
        $text = 'Product in cart';
 
    }
 
    return $text;
 
}
function action_wp_footer() {
    ?>
    <script>
        jQuery(document).ready(function($) {
            var selector = '.add_to_cart_text:contains("Product in cart")';
            
            // Selector contains specific text
            if ( $( selector ).length > 0 ) {
                $( selector ).addClass( 'product-is-added' );
            } else {
                $( selector ).removeClass( 'product-is-added' );            
            }
            
        });
    </script>
    <?php
}
add_action( 'wp_footer', 'action_wp_footer' );

将产品添加到购物车后，我必须每次刷新页面以获得新的文本和按钮样式。

我还使用了Relabel "add to cart"按钮添加到购物车后在WooCommerce第二个功能代码使用AJAX改变按钮的文本和样式。文本会改变，但是所有的样式都会中断。

不幸的是，在echo '<div class="add_to_cart_text">' . $new_text . '</div>';行添加样式不起作用。

帮忙吗?

Answer 1

由于您的网站商店和档案页面是非常自定义的(没有默认的WooCommerce html结构)，您需要为您的网站制作一个非常自定义的jQuery代码。

您的Ajax添加到购物车按钮默认具有以下输出html示例:

<a href="?add-to-cart=1234" rel="nofollow" data-quantity="1" data-product_id="1234" class="add-to-cart-grid btn-link nasa-tip add_to_cart_button ajax_add_to_cart product_type_simple nasa-tiped" data-product_sku="AB123" data-tip="Add to Cart">
    <span class="add_to_cart_text">Add to Cart</span>
    <i class="cart-icon pe-7s-cart"></i>
</a>

您需要一个添加到购物车的Ajax有以下输出html(示例):

<a href="?add-to-cart=1234" rel="nofollow" data-quantity="1" data-product_id="1234" class="add-to-cart-grid btn-link nasa-tip add_to_cart_button ajax_add_to_cart product_type_simple nasa-tiped" data-product_sku="AB123" data-tip="Product in cart">
    <span class="add_to_cart_text product-is-added">Product in cart</span>
    <i class="cart-icon pe-7s-cart"></i>
</a>

所以知道我们可以管理所需的jQuery代码的自定义Ajax添加到购物车按钮的商店和存档页面…

尝试以下将改变您的自定义Ajax添加到购物车按钮在added_to_cart WooCommerce jQuery事件的文本:

add_action( 'wp_footer', 'ajax_button_text_js_script' );
function ajax_button_text_js_script() {
    $text = __('Product in cart', 'woocommerce');
    ?>
    <script>
        jQuery(function($) {
            var text = '<?php echo $text; ?>',      $this;
            $(document.body).on('click', '.ajax_add_to_cart', function(event){
                $this = $(this); // Get button jQuery Object and set it in a variable
            });
            $(document.body).on('added_to_cart', function(event,b,data){
                var buttonText = '<span class="add_to_cart_text product-is-added">'+text+'</span><i class="cart-icon pe-7s-cart"></i>';
                // Change inner button html (with text) and Change "data-tip" attribute value
                $this.html(buttonText).attr('data-tip',text);
            });
        });
    </script>
    <?php
}

代码放在活动子主题(或活动主题)的functions.php文件中。

Answer 2

我在一个网站上实现了类似的东西。

可能有用的是

.on('input change', function() { // Your code here }).change();

这更新了我的产品页面在实时，我相信你应该能够找到一种方法来实现它，以改变添加到购物车按钮上的文本。

我是JavaScript的新手，所以请原谅我，我希望我的回答至少有一点帮助。