带有 Jquery 和 PHP 的 WooCommerce 函数答案

【问题标题】：WooCommerce function with Jquery and inside it PHP带有 Jquery 和 PHP 的 WooCommerce 函数
【发布时间】：2018-03-22 22:00:24
【问题描述】：

我想满足一个条件：小计 > 500 && 客户是朋友来淡入一个元素。代码：

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');

条件：如果选择了 frind，则显示 billing_field。但我还想要另一个条件。如果客户类型是朋友 && $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');

【问题讨论】：

那么...问题是什么？您使用的是双引号，因此 $subtotal 变量被扩展为实际值。就 javascript 而言，这将读取 if(750 > 500) { 的 $wc_cart->subtotal 值 750，所以这应该可以工作。你有任何错误吗？

标签： php jquery wordpress woocommerce checkout

【解决方案1】：

试试下面的钩子函数，你现在会得到购物车小计，因为$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 文件中。经过测试并且可以工作。

您也可以尝试将WC()->cart->subtotal 替换为WC()->cart->cart_contents_total，这是不包括增值税的非打折购物车商品小计

【讨论】：

谢谢，我会试试这个。 WC()->cart->subtotal 是否不包括运费和税金？还是我需要添加 - $cart_object->shipping_tax_total;？

【解决方案2】：

首先将所有 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 来防止其他操作。

【讨论】：