php - 在覆盖 div 或工具提示中显示 woocommerce 消息而不刷新页面

Question

当用户在我的 woocommerce 商店中添加产品或获取信息消息时，我试图摆脱重定向/重新加载。我只想在工具提示或覆盖 div 中显示“已添加到购物车”消息，让他们继续购物而无需重新导航到商店。

AJAX 添加到购物车已启用

所以我的问题是：如何在不刷新整个页面的情况下显示此消息？

编辑：可能对任何人都有用，这是我的最终代码：

$('.add_to_cart_button, .single_add_to_cart_button').click(function(e) {
                var produkt_id;
                if ($(this).attr('data-product_id') == undefined) {
                    produkt_id = $('input[type=hidden]').val();
                } else {
                    produkt_id = $(this).attr('data-product_id');
                }


                var amount;
                if ($(this).hasClass('single_add_to_cart_button') == true) {
                    if ($('.qty').val() !== '1') {
                        amount = $('.qty').val();
                    }
                    console.log(amount + ' single_add_to_cart_button');
                }
                else {
                    amount = '1';
                    console.log(amount + ' add_to_cart_button');
                }




                function addToCart(produkt_id) {
                    $.ajax({
                        type: 'POST',
                        url: '?add-to-cart=' + produkt_id,
                        data: {'product_id': produkt_id,
                            'quantity': amount},
                        success: function(response, textStatus, jqXHR) {
                        // callback

                        }/*,
                         dataType: 'JSON'*/
                    });
                }
                e.preventDefault();
                addToCart(produkt_id);
   });

Answer 1

您的意思是这样的：如果您执行“addToChart”功能，它将执行 ajax 并在页面顶部创建一条消息

$(document).on('click','.add_to_cart_button',function(e) {
    e.preventDefault();
    addedToCart($(this).data('product_id'));
});
    function addedToCart(id){
        $.ajax({
          type: "POST",
          url: "some.php",
          data: { product_id: id},
          success: function(){
            $('body').prepend('<div style="position:fixed; height:20px; width:100%; background-color:red; text-align:center;">Added to chart</div>');
          }
        });
    }