如何在 Woocommerce 中的“添加到购物车”按钮上显示加载图标

Question

我想当用户单击“添加到购物车”按钮时在“添加到购物车”按钮上显示加载符号。目前在我的网站中，当用户单击该按钮时，它会在 2-4 秒内不执行任何操作，并显示“查看购物车”按钮。

我想在这 4 秒内显示一些加载或旋转图标。是否可以？有人可以指导我吗

链接： http: //www.myeatable.com/cnc-ongole/

Answer 1

我有一个更好的解决方案，不需要在按钮上附加一些图像。

WooCommerce 提供了一个“加载”类。只需将此类附加到“添加到购物车”按钮即可。

$( '.add_to_cart_button' ).on( 'click', function(){
   $(this).addClass('loading');
});

一旦产品添加到购物车，您就可以使用removeClass函数来删除加载程序，例如

 $(this).removeClass('loading');

为了将 WooCommerce 加载程序添加到特定部分，您可以使用这些 WooCommerce 函数

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

这两个函数通过传递特定的 id 或类来阻止和解除阻止特定的部分。

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();
};