通过产品页面上的 Ajax 回调显示 woocommerce 通知

Question

我正在尝试在产品页面中显示 woocommerce 通知。该通知应由 ajax 回调函数显示，由按钮触发。

回调正常，但没有显示通知。

这是我的代码：

jQuery/AJAX

$(document).ready(function() {
            
    $('#return-button').on('click', function (event) {
        event.preventDefault();

        var id = $(this).val();

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'my_custom_function',
                product_id: id
            },
            success: function(response) { 
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

PHP回调

function my_custom_function() {
    error_log('Function called');

    wc_add_notice("Success!", "notice");
    wc_print_notices();

    wp_die();
}

正确的做法是什么？

Answer 1

解决方案

wc_print_notices()默认效果是回显通知的HTML代码。 my_custom_function回显的内容对应AJAX成功函数中的response参数。所以它必须是 DOM.

中的 displayed/inserted

注意：wc_print_notices() 也可以 return 值而不是回显。这可以通过将 $return 参数设置为 true 1.

来完成

这是工作代码：

jQuery/AJAX

$(document).ready(function() {
            
    $('#return-button').on('click', function (event) {
        event.preventDefault();

        var id = $(this).val();

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'my_custom_function',
                product_id: id
            },
            success: function(response) { 
                $('woocommerce-notices-wrapper').append(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

PHP回调：

function my_custom_function() {
    error_log('Function called');

    wc_add_notice("Success!", "notice");
    wc_print_notices();
        
    wp_die();
}

通过产品页面上的 Ajax 回调显示 woocommerce 通知

Display woocommerce notice through Ajax callback on product page

php

ajax

wordpress

jquery

woocommerce