Добавьте значок загрузки во время транзакции процесса платежей WooCommerce PayPal

#jquery #wordpress #woocommerce #paypal

Вопрос:

Недавно я начал использовать новый плагин для платежей PayPal WooCommerce.

Проблема, с которой я сталкиваюсь, заключается в том, что клиенты выбирают обработку кредитных карт (что похоже на то, что предлагает Stripe). Люди вводят данные своей карты и нажимают «Заказать». Затем экран становится белесым, и в течение примерно 15 секунд ничего не происходит. Там нет загрузки, ничего, кроме неподвижного экрана в течение 15 секунд или около того.

Это время слишком много для многих (если не для большинства) людей, которые думают, что есть какая-то проблема, и пытаются либо перезагрузить страницу, либо оставить ее.

Я пытаюсь найти решение этой проблемы. Самым простым способом было бы добавить заметку под формой кредитной карты, например «Пожалуйста, не обновляйте страницу во время обработки транзакции», и это помогло бы большинству людей. Я мог бы добавить некоторый код с помощью плагина «Фрагменты кода», но я не знаю, какой именно код.

Я уверен, что я не единственный, у кого есть эта проблема, так что, если бы кто-нибудь мог помочь, это было бы здорово.

Ответ №1:

У меня была похожая проблема. Я написал пользовательский плагин jquery и отслеживаю изменение класса в форме.woocommerce-проверка

Плагин code 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 resu<
    }
    
    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 resu<
    }
})();
 

Функция отслеживает изменение формы.woocommerce-оформление заказа

 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