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

Question

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

我仍然希望脚本运行，但不知道如何解决/避免冲突，所以目前我不得不省略它。有谁知道为什么下面会导致冲突？

<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 结帐中，元素类 product-info 不存在，而正确的元素类是 product-name。

此外，在尝试对其使用 replace() 方法之前，您应该始终检查您所定位的 html 元素对象是否存在且不存在undefined。

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

未捕获的类型错误：无法读取未定义的属性“替换”

它会禁用所有在它之后执行的 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 支付方面遇到问题。