时间戳

首页 > 解决方案 > 在所有浏览器中添加到购物车后显示弹出窗口

javascript - 在所有浏览器中添加到购物车后显示弹出窗口

问题描述

我有一个 WooCommerce 网上商店，当人们单击“添加到购物车”时，我希望在其中出现一个弹出窗口。

我已经编写了一些代码，如下所示，它也可以正常工作。问题是它只适用于谷歌浏览器，而不是例如 Safari。

我确定问题是因为在 Safari 中单击添加到购物车时页面重新加载，但我该如何解决呢？

头文件.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>';
        }

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

});

标签： javascriptphpajaxwoocommerce

解决方案

将产品添加到购物车后，您可以使用下面的 Woocommerce 触发器来触发弹出窗口。

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

推荐阅读