Покажите приятное предупреждение о добавлении ajax в корзину для определенного количества товаров в Woocommerce.

Question

Проблема:

Я пытаюсь отобразить предупреждение JavaScript при вызове AJAX.Но оповещение срабатывает только успешно, когда я обновляю страницу.

Вот начало функции, которая запускает элементы корзины 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 ) {

Затем я пытаюсь отобразить предупреждение Javascript при вызове ajax:

Я исследовал Глобальные обработчики событий Ajax , и я думаю, что $. AjaxComplete - это то, что нужно, но он не запускает JavaScript.Я также пытаюсь установить URL Ajax JS Handler в попытке вызвать предупреждение ...

    ?>
<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
  }
}       

Как FYI, это рабочая версия 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
  }
}

Как получить предупреждение Javascript для запуска на Ajax ИЛИ проверять, выполняются ли условия IF, каждый раз при вызове Ajax?

Спасибо!

Answer 1

Я хотел бы добавить, что в настоящее время существует плагин, который предоставляет API отдыха для корзины.

https://wordpress.org/plugins/cart-rest-api-for-woocommerce/

с этим плагином, который вы можете прослушивать для события добавления элементаи получите количество предметов

(function($) {
  $(document.body).on("added_to_cart", function() {
    $.get("/wp-json/wc/v2/cart/count-items", function(data) {
      console.log(data)
    });
  });
})(jQuery);

Answer 2

Попробуйте следующий код, где код jQuery будет отправлять ajax-запрос на делегированное событие «Added_to_cart».По этому запросу 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 вашей активной дочерней темы (или активной темы).Проверено и работает.