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

Posted 2023-03-21

【中文标题】WooCommerce Stripe 支付网关自定义 javascript 冲突

【英文标题】：WooCommerce Stripe payment gateway custom javascript conflict

【发布时间】：2021-05-29 22:40:16

【问题描述】：

我遇到了一个 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>

【问题讨论】：

请对以下答案提供一些反馈。

【参考方案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 支付方面遇到问题。

【讨论】：

不是我的问题，只是表示我同意您的建议 :) 但是，是的，完全同意将答案标记为已接受。很多人错过了这一步:(

我不是提问者。我只是喜欢你的回答。

嘿@LoicTheAztec，感谢您的回复。这解决了一个问题，感谢您的帮助。