Ajax上的JS警報已添加到購物車，以獲取Woocommerce中特定產品類別的數量

Question

在Woocommerce中，當到達特定類別的購物車中的特定產品數量時，我試圖顯示JavaScript“ Sweet alert”。 通過AJAX將商品添加到購物車，這就是為什么我要使用JavaScript警報（Sweet警報）的原因。

例如，如果購物車包含5個 “包”類別的產品 -顯示警報。

我研究並找到了以下有用的答案，並用它們來構建我的代碼。 但是，我正在努力將規則僅應用於特定類別的產品 。

• 在AJAX上顯示甜蜜提醒添加到購物車以獲取特定Woocommerce購物車產品數量
• 計算特定產品類別的購物車項目

目前，以下代碼成功觸發，但僅基於購物車中的產品數量。 它忽略產品類別規則：

循環瀏覽購物車項目並設置產品類別計數器：

// Wordpress Ajax: Get different cart items count
add_action( 'wp_ajax_nopriv_checking_items', 'checking_items' );
add_action( 'wp_ajax_checking_items', 'checking_items' );
function checking_items() {

  global $woocommerce, $product;
                $i=0;         
                // Set minimum product cart total
                $total_bags = 0;
                $total_shoes = 0;

    if( isset($_POST['added'])){
        // Loop through cart for product category
        foreach ( $woocommerce->cart->cart_contents as $product ) :
                    if ( has_term( 'bags', 'product_cat', $product['22'] ) ) {
                       $total_bags += $product['quantity'];
                    } else {
                       $total_shoes += $product['quantity'];
                    }
                endforeach;
    }
    die(); // To avoid server error 500
}

使用jQuery，如果滿足類別計數，則顯示JavaScript警報。

 // The Jquery script
add_action( 'wp_footer', 'item_check' );
function item_check() {
    ?>
    <script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.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'
                },
              //ONLY DISPLAY ALERT IF TOTAL ITEMS IS FROM CATEGORY BAGS
                success: function ($total_bags) {
                    if($total_bags == 5 ){
//DISPLAY JAVASCRIPT ALERT
const toast = swal.mixin({
  toast: true,
  showConfirmButton: false,
  timer: 3000
});
toast({
  type: 'success',
  title: '5 Items Added!'
})
                    }
                }
            });
        });
    });
    </script>
    <?php
}

Answer 1

您的代碼中有一些錯誤和錯誤。 請嘗試以下重新訪問的代碼：

// Wordpress Ajax: Get different cart items count
add_action( 'wp_ajax_nopriv_checking_items', 'checking_cart_items' );
add_action( 'wp_ajax_checking_items', 'checking_cart_items' );
function checking_cart_items() {
    if( isset($_POST['id']) && $_POST['id'] > 0 ){
        // Initialising variables
        $count      = 0;
        $product_id = $_POST['id'];
        $category   = 'bags';
        $category   = 't-shirts';

        // Loop through cart for product category
        foreach ( WC()->cart->get_cart() as $cart_item ) {
            if ( has_term( $category, 'product_cat', $cart_item['product_id'] ) ) {
               $count += $cart_item['quantity'];
            }
        }

        // Only if the added item belongs to the defined product category
        if( has_term( $category, 'product_cat', $_POST['id'] ) )
            echo $count; // Returned value to jQuery
    }

    die(); // To avoid server error 500
}

// The Jquery script
add_action( 'wp_footer', 'items_check' );
function items_check() {
    if(is_checkout()) return; // Except on checkout page
    ?>
    <script src="https://unpkg.com/sweetalert2@7.20.1/dist/sweetalert2.all.js"></script>
    <script type="text/javascript">
    jQuery( function($){
        // wc_add_to_cart_params is required to continue
        if ( typeof wc_add_to_cart_params === 'undefined' )
            return false;

        $(document.body).on( 'added_to_cart', function( event, fragments, cart_hash, $button ) {
            // The Ajax request
            $.ajax({
                type: 'POST',
                url: wc_add_to_cart_params.ajax_url,
                data: {
                    'action': 'checking_items',
                    'id'    : $button.data( 'product_id' ) // Send the product ID
                },
              //ONLY DISPLAY ALERT IF TOTAL ITEMS IS FROM CATEGORY BAGS
                success: function (response) {
                    console.log('response: '+response); // Testing: to be removed
                    if(response == 5 ){
                        //DISPLAY JAVASCRIPT ALERT
                        const toast = swal.mixin({
                          toast: true,
                          showConfirmButton: false,
                          timer: 3000
                        });
                        toast({
                          type: 'success',
                          title: '5 Items Added!'
                        })
                    }
                }
            });
        });
    });
    </script>
    <?php
}

代碼進入您的活動子主題（或活動主題）的function.php文件中。 經過測試和工作。

如果您在瀏覽器檢查器JavaScript控制台上查看，您會發現ajax的工作方式正確，每當該特定產品類別的商品計數時，就會返回：