WooCommerce Stripe 支付网关自定义 javascript 冲突

Question

我遇到了 JS 冲突问题，这是由自定义 jQuery 脚本引起的，该脚本会在结帐更新后更改文本。当包含此脚本时，我的 WooCommerce 网站上的 Stripe 支付网关不允许输入信用卡和借记卡字段。

我仍然喜欢运行的脚本，但不知道如何 resolve/avoid 冲突，所以目前，我不得不忽略它。有谁知道为什么下面会引起冲突？

<script>
jQuery(document).ready(function(){
    jQuery( 'body' ).on( 'updated_checkout', function() {
        var replaced = jQuery(".woocommerce-checkout #order_review .product-info .variation dd.variation-Extras p").html().replace('&nbsp;Booking Fee×1 ( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>0.00</span> - One Time ) ,','Booking Fee (£0.00)');
        jQuery(".woocommerce-checkout #order_review .product-info .variation dd.variation-Extras p").html(replaced);
    });
});
</script>

Answer 1

在 WooCommerce 结帐中，元素 class product-info 不存在，正确的元素 class 是 product-name。

此外，您还应始终检查您定位的 html 元素对象是否存在，而不是 undefined，然后尝试对其使用 replace() 方法。

所以没有 javascript 冲突，但是 抛出 jQuery 错误 ，这会禁用某些 jQuery 进程：

Uncaught TypeError: Cannot read property 'replace' of undefined

它会禁用所有在它之后执行的 jQuery 个进程。

改用以下重新访问的代码：

<script>
jQuery(function($){
    $(document.body).on('updated_checkout', function() {
        var varExtrasObj     = $('.woocommerce-checkout #order_review .product-name .variation dd.variation-Extras p'),
            varExtrasObjHtml = varExtrasObj.html();

        if ( varExtrasObjHtml !== undefined ) {
            var stingToReplace   = '&nbsp;Booking Fee×1 ( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>0.00</span> - One Time ) ,',
                stingReplacement = 'Booking Fee (£0.00)',
                theReplacement   = varExtrasObjHtml.replace( stingToReplace, stingReplacement );

            varExtrasObj.html(theReplacement);
        }
    });
});
</script>

它现在应该可以正常工作，不会给 Stripe 支付带来麻烦。

WooCommerce Stripe 支付网关自定义 javascript 冲突

WooCommerce Stripe payment gateway custom javascript conflict

html

javascript

jquery

stripe-payments

woocommerce