将产品添加到 WooCommerce 单品购物车后触发 JQuery 次点击

Question

我试图在 woocommerce 上使用 mini-cart.php 制作侧边栏，到目前为止我还不错，但我想在点击页面产品上的“添加到购物车”按钮后触发侧边栏。

我找到了答案并对代码做了一些修改：

add_action( 'wp_footer', 'trigger_for_ajax_add_to_cart' );
 function trigger_for_ajax_add_to_cart() {
 ?>
    <script type="text/javascript">
        (function($){
            $('body').on( 'click', '.single_add_to_cart_button', function(){
                $( ".open-side-cart" ).trigger( "click" );
            });
        })(jQuery);
    </script>
 <?php
}

我想要的是在用户单击“.single_add_to_cart_button”class 按钮时触发 mini-cart.php 侧边栏，它起作用了。但由于 woocommerce 重新加载页面更新 mini-cart.php，因此触发器在之前重新加载页面。

有没有办法在重新加载页面后触发？

Answer 1

因为您没有使用 Ajax 添加到购物车，当产品添加到购物车时，页面会随着产品数据的发布而重新加载……然后您可以检查 $_POST['add-to-cart'] 以显示活动部分您的 jQuery 脚本，一旦页面重新加载如下：

add_action( 'wp_footer', 'trigger_for_ajax_add_to_cart' );
function trigger_for_ajax_add_to_cart() {
    if ( isset($_POST['add-to-cart']) && $_POST['add-to-cart'] > 0
    && isset($_POST['quantity']) && $_POST['quantity'] > 0 ) :
    ?>
    <script type="text/javascript">
        (function($){
            $( ".open-side-cart" ).trigger( "click" );

            // Display an alert for testing purpose (To be removed)
            alert('".open-side-cart" Click!');
        })(jQuery);
    </script>
    <?php
    endif;
}

代码进入活动子主题（或活动主题）的 functions.php 文件。已测试并有效。

在某些情况下您可能需要添加延迟，因此在这种情况下您可以替换为：

        $( ".open-side-cart" ).trigger( "click" );

通过以下代码块：

        setTimeout(function(){
            $( ".open-side-cart" ).trigger( "click" );
        }, 500);

Answer 2

谢谢@LoicTheAztec 我找到了解决方案。

在我的例子中，我无法使用 $ _POST ['add-to-cart'] 触发 jQuery。

我的解决方案是使用另一种方法，每次将产品添加到购物车时都会出现一条消息并显示“（产品名称）已添加到购物车”文本出现在 div 内class .woocommerce-message.

使用此方法我创建了一个触发器，每次出现此消息时都会单击 class .open-side-cart 并且会出现侧推车

代码：

add_action( 'wp_footer', 'trigger_for_ajax_add_to_cart' );

function trigger_for_ajax_add_to_cart() {
    //Only trigger if is single product page
    if ( is_product() )  {
    ?>
            <script type="text/javascript">
                (function($){
                        //If .woocommerce-message is visible
                        $(".woocommerce-message").each(function() {
                                if ($(this).css("visibility") == "visible") {

                                    //Trigger side cart .open-side-cart
                                    setTimeout(function(){
                                        $( ".open-side-cart" ).click();
                                    }, 500);

                                    //Nothing Happen
                                } else {
                                        return false;
                                }
                        });
                })(jQuery);
            </script>
    <?php
    }
}

将产品添加到 WooCommerce 单品购物车后触发 JQuery 次点击

Trigger a JQuery click once product is added to cart on WooCommerce single products

php

wordpress

jquery

product

woocommerce