以编程方式触发 WooCommerce 优惠券表格

Question

我正在尝试将 Yotpo Rewards 与 WordPress 上的 WooCommerce 结帐流程集成。到目前为止，我有一个脚本可以获取优惠券代码并将其插入优惠券输入表单中。但我一直无法弄清楚如何从这个脚本提交表单。

document.body.addEventListener("yotpoLoyaltyDiscountApplied", function(e) {
    var discountCodeInput = document.getElementById('coupon_code');

    // Apply the value from e.detail.discountCode in the discount code's input box
    if (discountCodeInput) {
        discountCodeInput.value = e.detail.discountCode;
    }

    var form = document.querySelector('.checkout_coupon');
    if (form) {
        form.submit();
    }
});

一旦此脚本运行，优惠券代码已成功应用于表单，我可以在屏幕上明显地验证它，但随后页面会重新呈现。

Answer 1

我找到了这个问题的答案。要触发优惠券表格，我可以使用

form.querySelector('button').click()

所以完整的脚本是：

document.body.addEventListener("yotpoLoyaltyDiscountApplied", function(e) {
    var discountCodeInput = document.getElementById('coupon_code');

    // Apply the value from e.detail.discountCode in the discount code's input box
    if (discountCodeInput) {
        discountCodeInput.value = e.detail.discountCode;
    }

    var form = document.querySelector('.checkout_coupon');
    if (form) {
        form.querySelector('button').click()
    }
});