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

你也应该总是检查你的目标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支付带来麻烦。