更改WooCommerce中Add to Cart之后的自定义Ajax Add to Cart按钮文本

Question

如果商品已经在购物车中，我使用一个代码来更改商品的“添加到购物车”按钮的文本和样式。为此，非常感谢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' );

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

有人帮忙吗？

Answer 1

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

默认情况下，Ajax add to cart按钮有以下输出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>

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文件中。经过测试并起作用。