[英]JS alert on ajax add to cart for multiple product categories count in Woocommerce
In Woocommerce I'm trying to display a JavaScript "Sweet alert" when a specific count of products in the cart from a specific product category is reached, AND another alert when a specific count of products from a secondary category is reached. 在Woocommerce中,我试图在到达特定商品类别中购物车中特定数量的商品时显示JavaScript“甜警报”,并在达到次要类别中特定商品数量时显示另一个警报。
Items are added to the cart via AJAX which is why I want to use a JavaScript alert (Sweet alert). 通过AJAX将商品添加到购物车,这就是为什么我要使用JavaScript警报(Sweet警报)的原因。
eg 例如
The code below can work for scenario 1 and 2 , but does handle number 3 . 下面的代码可以用于方案1和2 ,但是可以处理编号3 。
I have been helped with this answer code to which works for a single product category: 此回答代码可帮助我在单个产品类别上使用:
// 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'];
//ELSE IF STATEMENT HERE?
}
}
// 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
}
How can I handle 2 different product categories? 如何处理2种不同的产品类别?
Any help is appreciated. 任何帮助表示赞赏。
To make it work for 2 different product categories displaying a Sweet alert when 5 items from one of those product categories have been added to cart: 为了使它适用于2种不同的产品类别,当其中一个产品类别中的5个项目已添加到购物车时,显示甜蜜警报:
// 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
$counts = array();
$product_id = $_POST['id'];
$categories = array('bags', 'shoes');
// Loop through cart for product categories count
foreach ( WC()->cart->get_cart() as $cart_item ) {
if ( has_term( $categories[0], 'product_cat', $cart_item['product_id'] ) )
$counts[0] += $cart_item['quantity'];
if ( has_term( $categories[1], 'product_cat', $cart_item['product_id'] ) )
$counts[1] += $cart_item['quantity'];
}
// Return the product category count that belongs to the added item
if( has_term( $categories[0], 'product_cat', $product_id ) )
echo json_encode(array( strtoupper($categories[0]) => $counts[0])); // Returned value to jQuery
if( has_term( $categories[1], 'product_cat', $product_id ) )
echo json_encode(array( strtoupper($categories[1]) => $counts[1])); // 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) {
$.each( JSON.parse(response), function( category, count ) {
if( count == 5 ){
// Display javascript alert
const toast = swal.mixin({
toast: true,
showConfirmButton: false,
timer: 3000
});
toast({
type: 'success',
title: "You've added 5 "+category+"!"
});
}
// The below line is just for testing: to be removed
console.log('category: '+category+' | count: '+count);
});
}
});
});
});
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme). 代码进入您的活动子主题(或活动主题)的function.php文件中。 Tested and works.
经过测试和工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.