在ajax添加到购物车上显示甜蜜提醒，以获取特定的Woocommerce购物车项目数 [英] Display a sweet alert on ajax add to cart for a specific Woocommerce cart item count

问题描述

问题:

我正在尝试在调用AJAX时显示JavaScript警报.但是，只有在刷新页面时，警报才会成功触发.

I am trying to display a JavaScript alert when AJAX is called. But the alert only fires successfully when I refresh the page.

这是触发javascript IF购物车项目> 2的函数的开始:

因此，如果Woocommerce购物车中有2个以上的商品，请运行Javascript警报...

So if there are more than 2 items in the Woocommerce cart, run the Javascript alert...

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警报:

我研究了全局Ajax事件处理程序，并且我认为 $.ajaxComplete 是所需要的，但不会触发javascript.我还试图设置URL Ajax JS处理程序，以尝试触发警报...

I researched Global Ajax Event Handlers and I think $.ajaxComplete is whats needed, but it doesn't trigger the javascript. I'm also trying to set the URL Ajax JS Handler in an attempt to trigger the alert...

    ?>
<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警报.

If there are more than 2 items in the cart, AND I refresh the page. This successfully triggers the javascript alert.

    ?>
<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时获取Javascript警报以在Ajax上触发或检查是否满足IF条件?

How can I get the Javascript alert to trigger on Ajax OR check if the IF conditions have been met, each time Ajax is called?

谢谢！

推荐答案

尝试以下代码，其中jQuery代码将在"add_to_cart"委托事件上发送ajax请求.在该请求下，php将获得购物车商品计数并将其返回给jQuery.如果该计数满足某些条件，它将显示您的提醒消息:

Try the following code where jQuery code will send an ajax request on "added_to_cart" delegated event. On that request php will get the cart item count and will return it to jQuery. If that count met some condition, it will display your sweet-alert message:

// 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文件中.经过测试，可以正常工作.

Code goes in function.php file of your active child theme (or active theme). Tested and works.

这篇关于在ajax添加到购物车上显示甜蜜提醒，以获取特定的Woocommerce购物车项目数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！