woocommerce产品变体选择警告框自定义

Question

我想要显示引导模式，而不是默认的警告框。

我尝试了下面的方法。但不能舔。

    jQuery(document).on("click", ".single-product .single_add_to_cart_button", function(){
        jQuery('#Content').modal("show");
        return false;
    });

​

​

Answer 1

Petar的答案更适合我，但是return false应该在if ($( this ).is('.disabled')) {..}中，这样才能让botton在启用的情况下工作，如下所示：

$('.single_add_to_cart_button').on('click', function (event) {

    if ($(this).is('.disabled')) {
        event.preventDefault();

        if ($(this).is('.wc-variation-is-unavailable')) {

            //Do your thing for unavailable variation

        } else if ($(this).is('.wc-variation-selection-needed')) {

            //Do your thing for not selected variation

        }
 return false;
    }
   
});

Answer 2

这是一个jQuery解决方案，它将停止警报，并允许您执行自己的操作。你可以根据需要添加你自己的验证，它对我来说工作得很好，尽管我认为使用wc_add_notice会是一个更好的解决方案，我不能弄明白。

$('.single_add_to_cart_button').click(function(e){
    e.preventDefault(); // Stop the button
    // Do your custom validation here
    return false; // Prevent the Alert from firing
});

Answer 3

您可以使用基于CSS类选择器的方法。

基本上，您使用的是单击事件，并使用几个基于CSS选择器的嵌套条件语句来执行代码。当代码执行时，您将返回false以防止触发警报。

因为我们将".disabled“类限制在".single_add_to_cart_button”上，所以在主题JS中的任何地方使用它都是安全的。

经过测试，它可以正常工作。

来源：https://github.com/woocommerce/woocommerce/blob/master/assets/js/frontend/add-to-cart-variation.js#L94

$('.single_add_to_cart_button').on('click', function (event) {

        if ($(this).is('.disabled')) {
            event.preventDefault();

            if ($(this).is('.wc-variation-is-unavailable')) {

                //Do your thing for unavailable variation

            } else if ($(this).is('.wc-variation-selection-needed')) {

                //Do your thing for not selected variation

            }

        }
        return false;
    });