Question 3458 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce function that triggers jquery code

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?

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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
   }
    Login or Signup to reply.
  3. 0

    Reason need to check.

    1. Maybe Because your id (pop-up) is not placed in your HTML.
    2. Maybe your jQuery is not loaded.
    3. Check in the console what kind of error you found.
    4. your PHP function should properly closed.
      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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search