WooCommerce 函数 Jquery 并在其内部 PHP

Question

我要满足一个条件：subtotal > 500 && customer is friend to fadeIn a element.代码：

function customer_type_js(){
        $subtotal = $wc_cart->subtotal;
    echo "<script type='text/javascript'>
        jQuery(document).ready(function () {
            jQuery('#customer_type').on('change', function() {
                var customer_type = jQuery('#customer_type').val();
                console.log(customer_type);
                if(customer_type == 'friend'){
                    jQuery('#billing_field').fadeIn();
                    jQuery('.std-checkout-button').fadeOut();
                }
                jQuery('body').trigger('update_checkout');
            });
        });     
        </script>";
}
add_action( 'woocommerce_before_checkout_form', 'customer_type_js');

Critiera：如果选择 frind，则显示 billing_field。但我还想要另一个条件。如果 cuustomer_type 是朋友 && $subtotal >500 显示 woocommerce_eu_vat

jQuery('#woocommerce_eu_vat_number').fadeIn();

我尝试了以下设置但无济于事：

function customer_type_js(){
        $subtotal = $wc_cart->subtotal;
    echo "<script type='text/javascript'>
        jQuery(document).ready(function () {
            jQuery('#customer_type').on('change', function() {
                var customer_type = jQuery('#customer_type').val();
                console.log(customer_type);
                if(customer_type == 'friend'){
if($subtotal > 500){
                        jQuery('#woocommerce_eu_vat_number').fadeIn();
}
                    jQuery('#billing_field').fadeIn();
                    jQuery('.std-checkout-button').fadeOut();
                }
                jQuery('body').trigger('update_checkout');
            });
        });     
        </script>";
}
add_action( 'woocommerce_before_checkout_form', 'customer_type_js');

Answer 1

首先将所有js移动到另一个文件中。它应该只在 jQuery('#customer_type').on('change') 事件上调用，最好是 jQuery('#customer_type').change(function(){ ... });

关于钩子-你可以不用js画东西，在你可以使用jquery监听器触发这个事件之后。

这样会更好:

add_action( 'woocommerce_before_checkout_form', function() {
    if (something) {
         if (anotherOne) {
            echo 'jQuery("#anotherEl").fadeIn()';
            return;
         }

         echo 'jQuery("#woocommerce_eu_vat_number").fadeIn()';
    }
});

或显示具有任何 id 的元素并尝试触发它。你也不能在 js 中使用 php 代码。可以在 php 生成期间在 js 中填充一些内容，但这是一个糟糕的解决方案。也不要忘记在条件后使用 return 来防止其他操作。

Answer 2

试试下面的钩子函数，你现在会得到购物车小计，因为 $wc_cart->subtotal 在这个钩子中没有输出任何东西，因为 $wc_cart 参数没有退出：

add_action( 'woocommerce_after_order_notes', 'custom_checkout_jquery_script', 30, 1 );
function custom_checkout_jquery_script( $checkout ) {
    $subtotal = (float) WC()->cart->subtotal;
    ?>
    <script type="text/javascript">
        (function($){
            var a = '#customer_type'
                b = <?php echo $subtotal; ?>;
            $(a).on( 'change', function() {
                var c = $(this).val(),
                    d = '#woocommerce_eu_vat_number',
                    e = '#billing_field',
                    f = '.std-checkout-button';
                console.log(c);
                if( c == 'friend' && b >= 500){
                    $(d).fadeIn();
                    $(e).fadeIn();
                    $(f).fadeOut();
                } else {
                    $(d).fadeOut();
                    $(e).fadeOut();
                    $(f).fadeIn();
                }
                $(document.body).trigger('update_checkout');
            });
        })(jQuery);
    </script>
    <?php
}

代码进入您的活动子主题（或主题）的 function.php 文件。 已测试并有效。

You can also try to replace WC()->cart->subtotal by WC()->cart->cart_contents_total which is the non discounted cart item subtotal excluding vat

WooCommerce 函数 Jquery 并在其内部 PHP

WooCommerce function with Jquery and inside it PHP

php

jquery

wordpress

woocommerce

checkout