php - 在 ajax 添加到购物车上显示特定 Woocommerce 购物车商品数量的甜蜜警报

Question

问题:

我试图在调用 AJAX 时显示 JavaScript 警报。但只有当我刷新页面时，警报才会成功触发。

这里是触发 javascript IF 购物车商品 > 2 的函数的开头:

因此，如果 Woocommerce 购物车中有超过 2 件商品，请运行 Javascript 警报...

add_action( 'wp_footer', 'trigger_popup' );
function trigger_popup() {

  global $woocommerce;
  $maximum_num_products = 2;
  $cart_num_products = WC()->cart->get_cart_contents_count();

        if( $cart_num_products > $maximum_num_products ) {

然后我尝试在调用 ajax 时显示 javascript 警报:

我研究了Global Ajax Event Handlers我认为 $.ajaxComplete 是所需要的，但它不会触发 javascript。我还尝试设置 URL Ajax JS 处理程序以尝试触发警报...

    ?>
<script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"></script>
        <script type="text/javascript">

                //EXECUTE FOR AJAX?
                $( document ).ajaxComplete(function(){

                //URL NEEDED FOR AJAX TO WORK?
                  url: '/?wc-ajax=add_to_cart',

                    // ALERT CODE HERE
                  swal(
                    'You added all the items!',
                    'Proceed to checkout?',
                    'success')
                    //END OF ALERT CODE

        })(jQuery);
        </script>

<?php
  }
}       

仅供引用，这是 Javascript 的工作版本，会在页面刷新时触发警报，但不适用于 AJAX:

如果购物车中有超过 2 件商品，我会刷新页面。这成功触发了 JavaScript 警报。

    ?>
<script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"></script>
        <script type="text/javascript">
                  swal(
                    'You added all the items!',
                    'Proceed to checkout?',
                    'success')
        </script>
<?php
  }
}

如何在每次调用 Ajax 时获取在 Ajax 上触发的 Javascript 警报或检查是否满足 IF 条件？

谢谢!

Answer 1

尝试以下代码，其中 jQuery 代码将在“added_to_cart”委托(delegate)事件上发送 ajax 请求。根据该请求，php 将获取购物车商品计数并将其返回给 jQuery。如果该计数满足某些条件，它将显示您的甜蜜警报消息:

// Wordpress Ajax: Get different cart items count
add_action( 'wp_ajax_nopriv_checking_cart_items', 'checking_cart_items' );
add_action( 'wp_ajax_checking_cart_items', 'checking_cart_items' );
function checking_cart_items() {
    if( isset($_POST['added']) ){
        // For 2 different cart items
        echo json_encode( sizeof( WC()->cart->get_cart() ) );
    }
    die(); // To avoid server error 500
}

// The Jquery script
add_action( 'wp_footer', 'custom_popup_script' );
function custom_popup_script() {
    ?>
    <script src="https://unpkg.com/sweetalert2@8.8.1/dist/sweetalert2.all.min.js"></script>
    <script src="https://unpkg.com/promise-polyfill@8.1.0/dist/polyfill.min.js"></script>
    <script type="text/javascript">
    jQuery( function($){
        // The Ajax function
        $(document.body).on('added_to_cart', function() {
            console.log('event');
            $.ajax({
                type: 'POST',
                url: wc_add_to_cart_params.ajax_url,
                data: {
                    'action': 'checking_cart_items',
                    'added' : 'yes'
                },
                success: function (response) {
                    if( response >= 2 ){
                        swal(
                            'You added all the items!',
                            'Proceed to checkout?',
                            'success'
                        );
                    }
                }
            });
        });
    });
    </script>
    <?php
}

代码位于事件子主题(或事件主题)的 function.php 文件中。经过测试并有效。