ajax 上的 JS 警报添加到购物车以获取 Woocommerce 中的特定产品类别计数

Posted 2023-05-08

【中文标题】ajax 上的 JS 警报添加到购物车以获取 Woocommerce 中的特定产品类别计数

【英文标题】：JS alert on ajax add to cart for specific product category count in Woocommerce

【发布时间】：2018-11-06 07:08:24

【问题描述】：

在 Woocommerce 中，当达到购物车中特定类别的特定产品数量时，我试图显示 javascript“甜蜜警报”。商品通过 AJAX 添加到购物车，这就是我想使用 JavaScript 警报（Sweet alert）的原因。

例如如果购物车包含类别 “包” 中的 5 种产品 - 显示警报。

我研究并找到了以下有用的答案，并使用它们来构建我的代码。但是，我正在努力将规则应用于仅计算特定类别的产品。

Display a sweet alert on AJAX add to cart for a specific Woocommerce cart product count Counting cart-items of specific product category

目前，以下代码成功触发，但仅基于购物车中的产品数量。它忽略了产品类别规则：

循环通过购物车项目并设置产品类别计数器：

// 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

【问题讨论】：

嗯.. 您没有从 checks_items() 函数返回任何内容

我需要显式返回变量吗？...我尝试在函数中的 IF 之后添加 return $total_bags;，但似乎没有改变 checking_items() 函数的行为

【参考方案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 以正确的方式工作，每次该特定产品类别的项目计数时都会返回：

【讨论】：

谢谢@LoicTheAztec，我已经尝试了上面的代码，但它似乎对我不起作用？项目成功添加到购物车，但没有任何触发。我查看了检查器，我收到了admin-ajax.php - 400 Bad Request 当代码被停用时我没有收到此错误...我以前从未见过此错误？

@TheNattyProfessor 我刚刚重新测试了代码，它工作得很好……所以还有一些其他的代码自定义，你的主题中的某些东西或一个冲突的插件。

愚蠢的错误，这只是我在代码中的错字——上面的例子现在可以工作了！就一个问题，不考虑有没有第二类？例如IF category == bags, display alert 1....IF category == shoes, display alert 2

我已经发布了新问题here 并在此处对我的问题中的链接进行了投票。感谢您的帮助:)