如何检测使用结帐块添加的 WooCommerce 结帐表单中的错误？

Question

我有一个使用结帐块的 WooCommerce 商店。我想使用 Google Analytics 跟踪哪些 WooCommerce 结帐字段为空或填写不正确。检查应在用户单击“立即付款”按钮后进行。

在旧的“短代码结帐”中，只需侦听内置的 WooCommerce 事件，然后查找具有

woocommerce-invalid-required-field

类的字段即可轻松完成此操作：

jQuery( document.body ).on( 'checkout_error', function(){...

但是，到目前为止，我还没有找到与我可以收听的“checkout_error”等效的内容。

Answer 1

为了检测用户点击“立即付款”按钮后表单中何时出现错误，您需要使用以下解决方案。

由于“订阅”将在与每个字段的每次交互时触发，因此我们需要确保它仅在单击“支付”按钮后触发一次。我在其位置留下了评论。

let pay_btn_clicked = false;

// here you need to write a function that changes the value of "pay_btn_clicked" to true, when the button is clicked

const { subscribe, select } = wp.data;
            
subscribe(() => {
    const checkoutData = select('wc/store/checkout');

    if ( pay_btn_clicked ) {
        if ( checkoutData.hasError() ) {
            console.error('There was an error in checkout');
        } else {
            console.error('There were no errors in checkout');
        }
    }

    pay_btn_clicked = false;
});