Question

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

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

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

Answer 1

对于添加到购物车中的加载图像，我可能会建议您在js中编写一个加载到该页面上的代码。

jQuery('a.add_to_cart_button').click(function(){jQuery(this).append('<img src="http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_3.gif" width="20px" height="20px"/>')});

用于加载图片的链接例如您可以将其替换为您想要的图像。

在将代码应用于文件之前，请尝试从浏览器控制台添加代码。

Answer 2

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

WooCommerce提供课程＆＃39; loading＆＃39;。只需将此类添加到“添加到购物车”按钮即可。

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

只要将产品添加到购物车，您就可以使用removeClass功能删除装载程序，如

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

要将WooCommerce Loader添加到特定部分，您可以使用这些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();
};

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

2 个答案: