Iam trying to trigger a popup by simulating a button click with a simple JS function when a product from a specific category is added to the woocommerce cart. I have seen some do it in simmilair functions, but I cant figure this one to work.
I have composed the following function that runs if the category is in cart and if the page is the checkout page:
add_action( 'woocommerce_before_checkout_form', 'check_category_in_cart' );
function check_category_in_cart() {
$cat_in_cart = false;
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
if ( has_term( 'test', 'product_cat', $cart_item['product_id'] ) ) {
$cat_in_cart = true;
break;
}
}
if ( $cat_in_cart ) {
<script>
jQuery(document).ready(function($) {
$('#pop-up').trigger('click');
});
</script>
}
}
This function makes my website not function. Anyone has an idea how I can get this to work?
use setTimeout(). try the below code.
add_action( 'woocommerce_before_checkout_form', 'check_category_in_cart' );
function check_category_in_cart() {
$cat_in_cart = false;
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
if ( has_term( 'test', 'product_cat', $cart_item['product_id'] ) ) {
$cat_in_cart = true;
break;
}
}
if ( $cat_in_cart ) { ?>
<script>
jQuery(document).ready(function($) {
setTimeout(function(){
$('#pop-up').trigger('click');
}, 10);
});
</script>
<?php }
}
jQuery(document).ready(function($) {
setTimeout(function(){
$('#pop-up').trigger('click');
}, 10);
jQuery(document).on('click','#pop-up',function(){
alert('trigger');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="pop-up">popup</button>PHP waits for a php valid code in <?php ?> tags, but you are placing JavaScript, so you have to close the PHP tag before <script> and open a new one after the </script>. Otherwise your jQuery code is fine.
if ( $cat_in_cart ) {
?>
<script>
jQuery(function() {
$('#pop-up').trigger('click');
});
</script>
<?php
}
Reason need to check.
if ( $cat_in_cart ) {
?>
<script>
jQuery(document).ready(function($) {
$('#pop-up').trigger('click');
});
</script>
<?php
}
if all is good then you can try.
jQuery(document).ready(function($) {
var timeInterVal = setInterval(CheckId, 1000);
CheckId function(){
var id = $("#pop-up");
if(id.length!=0){
$('#pop-up').trigger('click');
clearInterval(timeInterVal);
}
}
});
This will work if your Id not found once your id placed then this will stop the timer and trigger pop-up. Thanks.