在所有瀏覽器中添加到購物車后顯示彈出窗口

Question

我有一個 WooCommerce 網上商店，當人們點擊“添加到購物車”時，我希望在其中顯示一個彈出窗口。

我寫了一些如下所示的代碼，它也可以正常工作。 問題是它只適用於谷歌瀏覽器，而不是例如 Safari。

我確定問題是因為在 Safari 中單擊“添加到購物車”時頁面會重新加載，但我該如何解決？

頭文件

        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>';
        }
    

附加銷售.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" );
  });

});

    

Answer 1

在將產品添加到購物車后，您可以使用下面的 Woocommerce 觸發器來觸發您的彈出窗口。

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