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

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

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

更新

我还使用了 Relabel "add to cart" button after add to cart in WooCommerce 第二个功能代码来使用 AJAX 更改按钮的文本和样式。文本发生了变化，但所有样式都中断了。

很遗憾，在echo '<div class="add_to_cart_text">' . $new_text . '</div>'; 行上添加样式不起作用。

有什么帮助吗？

Answer 1

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

可能有帮助的是

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

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

我是 JavaScript 新手，所以请多多包涵，我希望我的回答至少有点帮助。

Answer 2

由于您的网站商店和档案页面非常自定义（没有默认的 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>

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

尝试以下操作，这将更改 added_to_cart WooCommerce jQuery 事件上自定义 Ajax 添加到购物车按钮上的文本：

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 文件中。经过测试并且可以工作。