php - 覆盖 Woocommerce Checkout 的前端 JS

Question

我需要在加载结账页面时隐藏帐单地址、城市、州和邮政编码字段，以便使用我们的地址验证脚本。下面的代码实现了我们想要的，但是在这个过程中为时已晚。您会看到这些字段，直到它运行 updated_checkout 事件，但在该过程中为时已晚。然而，在 init_checkout 上运行它似乎还为时过早，因为还有其他原因强制显示这些字段。在 init_checkout 和 updated_checkout 之间有什么我应该注意的吗？

jQuery( "body" ).on( "updated_checkout", function() {
  jQuery("#billing_country_field,
  #billing_address_1_field
  #billing_address_2_field,
  #billing_city_field,
  #billing_state_field,
  #billing_postcode_field").css("display", "none");
});

Answer 1

当 DOM 首次加载时，字段无论如何都会出现。

我尝试过从“body”委托(delegate)的所有可用的javascript事件:adding_to_cart adding_to_cart change click country_to_state_changed country_to_state_changing init_checkout update_checkout updated_wc_div wc_fragment_refresh wc_fragment_refreshed。这些字段总是会出现一点。

唯一的方法是在加载一些 CSS 规则时隐藏结账表单，您将添加到事件主题 styles.css 文件中:

form.checkout.woocommerce-checkout{
    visibility:hidden;
    opacity:0;
}

还有一些 jQuery，它会在显示结帐表单之前首先隐藏您的字段:

add_filter( 'wp_footer', 'custom_checkout_script' );
function custom_checkout_script( ){
    if( ! is_checkout() ) return;
    ?>
    <script type="text/javascript">
    jQuery(function($){
        var events = 'update_checkout',
            billingFields = '#billing_country_field,#billing_address_1_field,#billing_address_2_field';
        billingFields += ',#billing_city_field,#billing_state_field,#billing_postcode_field';

        $('body').on( events, function(){
            $(billingFields).hide( 0,function(){
                $('form.checkout.woocommerce-checkout').css('visibility','visible').fadeIn({ duration: 1000 });
            });
        });
    });
    </script>
    <?php
}

此代码位于事件子主题(或主题)的 function.php 文件中或任何插件文件中。

所有代码都在 Woocommerce 3+ 上进行了测试并且可以正常工作。