时间戳

首页 > 解决方案 > 在 WooCommerce PayPal Payments 处理交易时添加加载图标

jquery - 在 WooCommerce PayPal Payments 处理交易时添加加载图标

问题描述

我最近开始使用新的WooCommerce PayPal Payments插件。

我遇到的问题是当客户选择信用卡处理（看起来像 Stripe 提供的）时。人们输入他们的卡详细信息，然后单击“订购”。然后屏幕变白，大约 15 秒内没有任何反应。没有加载，只有 15 秒左右的静止屏幕。

对于许多（如果不是大多数）人来说，这个时间太多了，他们认为存在某种问题并尝试重新加载页面或离开它。

我正在努力寻找解决方案。最简单的方法是在信用卡表格下添加一条注释，例如“请不要在交易处理过程中刷新页面”，这对大多数人来说都是诀窍。我可以使用 Code Snippets 插件添加一些代码，但我不知道具体是哪个代码。

我敢肯定我不是唯一一个遇到这个问题的人，所以如果有人可以提供一些帮助，那就太棒了。

标签： jquerywordpresswoocommercepaypal

解决方案

我有类似的问题。我编写了自定义 jquery 插件并跟踪 form.woocommerce-checkout 上的更改类

代码 jquery 插件

(function(){
    // Your base, I'm in it!
    var originalAddClassMethod = jQuery.fn.addClass;
    
    var originalRemoveClassMethod = jQuery.fn.removeClass;

    jQuery.fn.addClass = function(){
        // Execute the original method.
        var result = originalAddClassMethod.apply( this, arguments );

        // trigger a custom event
        jQuery(this).trigger('cssClassChanged');

        // return the original result
        return result;
    }
    
    jQuery.fn.removeClass = function(){
        // Execute the original method.
        var result = originalRemoveClassMethod.apply( this, arguments );

        // trigger a custom event
        jQuery(this).trigger('cssClassChanged');

        // return the original result
        return result;
    }
})();

该功能跟踪变化的形式。woocommerce-checkout

jQuery(document).ready(function () {
    jQuery('form.woocommerce-checkout').bind('cssClassChanged', function(){ 

        if (jQuery(this).hasClass("processing")) {
            // stripe is processing
        } else {
            // strpipe isn't processing
        }
    });
});

您需要将此代码添加到 js 文件中的主题或插件中

推荐阅读