問題描述
在 Woocommerce 中，當達到購物車中特定類別的特定產品數量時，我嘗試顯示 JavaScript甜蜜警報".商品通過 AJAX 添加到購物車，這就是我想使用 JavaScript 警報(甜蜜警報)的原因.
例如如果購物車包含 5 個產品，屬于 Bags" 類別 - 顯示警報.
我已經研究并找到了以下有用的答案，并使用它們來構建我的代碼.但是，我正在努力將規則應用于僅計算特定類別中的產品.
如果您查看瀏覽器檢查器 javascript 控制臺，您會看到 ajax 以正確的方式工作，每次為該特定產品類別計數時返回:
In Woocommerce I'm trying to display a JavaScript "Sweet alert" when a specific count of products in the cart from a specific category is reached. Items are added to the cart via AJAX which is why I want to use a JavaScript alert (Sweet alert).
e.g. IF cart contains 5 products from category "Bags" - Display alert.
I have researched and found the following helpful answers and used them to build out my code. However, I am struggling with applying the rule to only count products from a specific category.
- Display a sweet alert on AJAX add to cart for a specific Woocommerce cart product count
- Counting cart-items of specific product category
At the moment, the code below successfully triggers, but only based on the number of products in the cart. It ignores the product category rule:
Loop Through cart items and set the product category counter:
// 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 }Using jQuery, if count of category met, display JavaScript alert.
// 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 }解決方案There is some errors and mistakes in your code. Try this revisited code instead:
// 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 }Code goes in function.php file of your active child theme (or active theme). Tested and works.
If you look on your browser inspector javascript console, you will see that ajax is working in the right way, returning each time the items count for that specific product category:
這篇關于將 ajax 上的 JS 警報添加到購物車以獲取 Woocommerce 中的特定產品類別計數的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！