Ajax上的JS警报已添加到购物车，以获取Woocommerce中特定产品类别的数量 [英] JS alert on ajax add to cart for specific product category count in Woocommerce
问题描述
在Woocommerce中，当达到特定类别的购物车中的特定产品数量时，我试图显示JavaScript"Sweet alert".物品通过AJAX添加到购物车，这就是为什么我要使用JavaScript警报(Sweet警报)的原因.
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).
例如如果购物车包含购物袋" -显示警报中的 5个产品.
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
}
使用jQuery，如果满足类别计数，则显示JavaScript警报.
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
}
代码进入您的活动子主题(或活动主题)的function.php文件中.经过测试，可以正常工作.
Code goes in function.php file of your active child theme (or active theme). Tested and works.
如果您在浏览器检查器javascript控制台上查看，您会发现ajax的工作方式正确，每当该特定产品类别的项目计数时，就会返回:
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中特定产品类别的数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
