CODEWITHSUNDEEP
javascriptphpajaxwoocommerce
DanielJh
DanielJh

Reputation: 23

Show popup after add-to-cart in all browsers

I have a WooCommerce webshop where I would like to have a popup appear when people click on "Add to cart".

I have written some code as seen below and it also works as it should. The problem is that it only works in Google Chrome, and not e.g. Safari.

I'm sure the problem is because of the page reloads when you click add to cart in Safari, but how can I fix it?

header.php

        if (!wp_is_mobile()) {
            echo '<div class="additional-popup">';
            echo '<div class="popup-top">';
                echo '<h3>Added to cart <i class="far fa-check-circle"></i></h3>';
                echo '<div class="additional-btns">';
                    echo '<span class="additional-btn continue">Continue shopping</span>';
                    echo '<a href="" class="additional-btn go-cart">Go to cart</a>';
                echo '</div>';
            echo '</div>';
            echo '<div class="popup-bottom">';
                echo '<h4>Others saw too ...</h4>';
                echo do_shortcode('[products limit="3" columns="3" orderby="rand"]');
            echo '</div>';
        echo '</div>';
        }

additional-sales.js

$(document).ready(function(){

  $( ".single_add_to_cart_button" ).click(function() {
    $( ".additional-popup" ).addClass( "show" );
    $( "body" ).addClass( "stocked" );
  });

  $( ".continue" ).click(function() {
    $( ".additional-popup" ).removeClass( "show" );
    $( "body" ).removeClass( "stocked" );
  });

});

Upvotes: 2

Views: 2356

Answers (1)

Ozgur Sar
Ozgur Sar

Reputation: 2204

You can use Woocommerce's trigger below to trigger your popup after a product has been added to cart.

jQuery(document).ready(function($){
    $('body').on( 'added_to_cart', function(){
        //your popup trigger code here;
    });
});

Upvotes: 1

Related Questions