将产品添加到 WooCommerce 单一产品的购物车后触发 JQuery 点击答案

【问题标题】：Trigger a JQuery click once product is added to cart on WooCommerce single products将产品添加到 WooCommerce 单一产品的购物车后触发 JQuery 点击
【发布时间】：2023-04-08 13:26:01
【问题描述】：

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

我找到了Run javascript code after ajax add to cart event in Woocommerce的答案，我对代码做了一些修改：

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”类按钮时触发mini-cart.php 侧边栏，它可以工作。但是随着 woocommerce 重新加载更新 mini-cart.php 的页面，因此触发器在重新加载页面之前工作。

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

【问题讨论】：

抱歉，Ajax 添加到购物车不会重新加载任何页面，这就是它使用 Ajax 的原因，以避免任何页面重新加载。因此，您似乎在单个产品页面上使用“正常添加到购物车”按钮，然后在通过表单发布数据时重新加载页面。所以你应该编辑你的问题，删除“Ajax”……
感谢您的回复，我将从我的问题中删除 AJAX

标签： php jquery wordpress woocommerce product

【解决方案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);

【讨论】：

感谢您的回复，经过多次尝试仍然无法正常工作。但我有一个想法。每当将产品添加到购物车时，woocommerce 都会显示一条消息“您的产品已添加到购物车”，此消息被包装在一个带有 .woocommerce-message 类的 div 中，我尝试使用 jQuery 并做了类似 $(".woocommerce-message").each(function() {if ($(this).css("visibility") == "visible") {$(".open-side-cart").click();} else {//nothing happen;} 的操作，但仍然不工作你能告诉为什么？我做错了什么？
@IamLearningPHP 我添加了一个测试警报，当在单个产品页面上将任何产品添加到购物车时，会显示警报，因此代码可以按需要工作（请参阅我更新的代码）。如果这个答案回答了你的问题，你可以请accept回答，如果你喜欢/想要你也可以请upvote回答，谢谢。
它工作！在我的情况下，延迟是解决方案，非常感谢

【解决方案2】：

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

在我的情况下，我无法使用 $ _POST ['add-to-cart'] 触发 jQuery。

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

使用此方法，我为每次出现此消息时创建了一个触发器，将点击 .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
    }
}

【讨论】：