woocommerce如何在点击添加到购物车按钮时显示加载图标

Question

我希望在“添加到购物车”中显示一个微调器图标。按钮正在处理中。 我使用此代码：

'.'

用户点击“添加到购物车”后，效果很好。按钮，但我想在成功执行后删除此图标。

Answer 1

它不需要使用您自己的加载器或微调器图标，因为WooCommerce本身在前端提供了自己的加载器。以下是使用加载程序代码的流程。

点击添加到购物车按钮后。在您的点击功能中添加此行，它会在特定部分添加加载程序

block( $( 'div.summary.entry-summary' ) );

现在，当产品成功添加到购物车并且您的ajax响应成功时，添加此行以删除加载器。它从该部分删除了加载器。

unblock( $( 'div.summary.entry-summary' ) );

如果您希望通过指定所需元素来增加其范围，此代码会阻止和取消阻止特定部分。

这些是负责应用和删除加载器的函数。

var is_blocked = function( $node ) {
    return $node.is( '.processing' ) || $node.parents( '.processing' ).length;
};

var block = function( $node ) {
    if ( ! is_blocked( $node ) ) {
        $node.addClass( 'processing' ).block( {
            message: null,
            overlayCSS: {
                background: '#fff',
                opacity: 0.6
            }
        } );
    }
};

var unblock = function( $node ) {
    $node.removeClass( 'processing' ).unblock();
};