JavaScript WooCommerce表单验证在添加到购物车之前添加到购物车Buton

Question

我有一个自定义页面，显示带有变体的产品，自定义字段和添加到购物车按钮。 当单击添加到购物车按钮时，我需要在 javascript 中触发一些验证，但如果表单未验证，则无法执行添加到购物车。

我想知道是否有可能实现。

首先，我尝试按照此处的说明进行操作： WooCommerce添加到购物车验证：防止添加到购物车

它工作得很好，我希望能够使用此代码，但对我来说不能，因为： - 我使用的是自定义页面，而不是通常的 wooCommerce 产品页面 - 这意味着在验证后，我被重定向到标准的 wooCommerce 页面，该页面是空白的

这就是为什么我真的需要使用Javascript来执行此操作： - JavaScript 或 jQuery 函数在添加到购物车点击时触发 - 然后函数检查它一切正常 - 如果是，则可以将产品添加到购物车 - 如果否，则显示警报，用户保持在同一页面上，没有添加到购物车。

我试图尽可能清楚。 希望我能得到一些帮助。

多谢。

Answer 1

请尝试以下方式：

function so_validate_add_cart_item( $passed, $product_id, $quantity, $variation_id = '', $variations= '' ) {
<script>
jQuery(function($){
jQuery(document).on('click', '.single_add_to_cart_button', function (e) {
e.preventDefault();
// your validation here
});  
});
</script>
}
add_filter( 'woocommerce_add_to_cart_validation', 'so_validate_add_cart_item', 10, 5 );