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

Add functionality to ajax_add_to_cart button in woocommerce to close a custom modal after item was added to cart

Im trying to close a modal with javascript (doesnt matter if its with js or jquery or php), I’ve tried adding custom JS with a button pointer like this:

<script type="text/javascript">
(function($){
   $('.btn[data-product_id='11068651']').click( function(){
      document.querySelector(".speak-up-modal").style.display = "none";
   });
   $('.btn[data-product_id='11068652']').click( function(){
      document.querySelector(".speak-up-modal").style.display = "none";
   });
})(jQuery);
</script>

And add this to the wp_footer this way:

add_action( 'wp_footer', 'single_add_to_cart_event_button_function' );
function single_add_to_cart_event_button_function() {
    ?>
        <script type="text/javascript">
            (function($){
                $('.btn[data-product_id='11068651']').click( function(){
                    document.querySelector(".speak-up-modal").style.display = "none";
                });
                $('.btn[data-product_id='11068652']').click( function(){
                    document.querySelector(".speak-up-modal").style.display = "none";
                });
            })(jQuery);
        </script>
    <?php
}

But nothing works, this is how Im using the woocommerce buttons in the modal:

<a href="#" class="button add_to_cart_button ajax_add_to_cart btn" data-product_id="11068652" data-quantity="1" rel="nofollow">

And nothing I do adds the event to the button, any chance for some help in modifying/adding functionality to this button?

This is what I’ve tried:
Button:

<a href="#" class="button add_to_cart_button ajax_add_to_cart btn" data-product_id="11068652" data-quantity="1" rel="nofollow">

Inside the JS in footer itself where I initiate the modal

<script type="text/javascript">
(function($){
   $('.btn[data-product_id='11068651']').click( function(){
      document.querySelector(".speak-up-modal").style.display = "none";
   });
   $('.btn[data-product_id='11068652']').click( function(){
      document.querySelector(".speak-up-modal").style.display = "none";
   });
})(jQuery);
</script>

And in functions.php:

add_action( 'wp_footer', 'single_add_to_cart_event_button_function' );
function single_add_to_cart_event_button_function() {
    ?>
        <script type="text/javascript">
            (function($){
                $('.btn[data-product_id='11068651']').click( function(){
                    document.querySelector(".speak-up-modal").style.display = "none";
                });
                $('.btn[data-product_id='11068652']').click( function(){
                    document.querySelector(".speak-up-modal").style.display = "none";
                });
            })(jQuery);
        </script>
    <?php
}

Heres a staging env to check it out: https://wordpress-997383-4781804.cloudwaysapps.com/product/speak-up-digital/

Only in console the JS/jQuery code above works…

Tags:

2

Answers


  1. 0

    To close a modal this is tempting but wrong because modal affects the entire page :

    document.querySelector(".speak-up-modal").style.display = "none";

    Instead use the classic :

    $(".speak-up-modal").modal('hide');
    Login or Signup to reply.
  2. 0

    The main problem comes from the query selector used quotes in '.btn[data-product_id='11068651']' and in '.btn[data-product_id='11068652']'.

    You can try one of the following instead:

    1). Without quotes:

    (function($){
   $('.btn[data-product_id=11068651]').on('click', function(){
      $('.speak-up-modal').css('display', 'none');
   });
   $('.btn[data-product_id=11068652]').on('click', function(){
      $('.speak-up-modal').css('display', 'none');
   });
})(jQuery);

    2). With double quotes:

    (function($){
   $('.btn[data-product_id="11068651"]').on('click', function(){
      $('.speak-up-modal').css('display', 'none');
   });
   $('.btn[data-product_id="11068652"]').on('click', function(){
      $('.speak-up-modal').css('display', 'none');
   });
})(jQuery);

    3). With double quotes, delegating the click events and using hide():

    (function($){
   $(document.body).on('click', '.btn[data-product_id="11068651"]', function(){
      console.log("clicked"); // For testing
      $('.speak-up-modal').hide();
   });
   $(document.body).on('click', '.btn[data-product_id="11068652"]', function(){
      console.log("clicked"); // For testing
      $('.speak-up-modal').hide();
   });
})(jQuery);

    It should work.

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

Back To Top
Search