javascript - WooCommerce:根据选择的运输方式显示或隐藏结帐字段和部分

Question

我有一个 woocommerce 结帐页面，我设法根据所选的运输方式找到并操作下面的代码，它将通过切换类隐藏/显示交付字段、取货字段、计费字段和整个运输部分:

/* This piece of code will hide fields for the chosen method.
.hide_pickup {
    display: none !important;
}
*/
 
// Hide Local Pickup shipping method
add_filter( 'woocommerce_checkout_fields', 'hide_local_pickup_method' );
function hide_local_pickup_method( $fields_pickup ) {
    // change below for the method
    $shipping_method_pickup ='local_pickup:2';
    // change below for the list of fields. Add (or delete) the field name you want (or don’t want) to use
    $hide_fields_pickup = array( 'billing_company', 'billing_state');
 
    $chosen_methods_pickup = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping_pickup = $chosen_methods_pickup[0];
 
    foreach($hide_fields_pickup as $field_pickup ) {
        if ($chosen_shipping_pickup == $shipping_method_pickup) {
            $fields_pickup['billing'][$field_pickup]['required'] = false;
            $fields_pickup['billing'][$field_pickup]['class'][] = 'hide_pickup';
        }
        $fields_pickup['billing'][$field_pickup]['class'][] = 'billing-dynamic_pickup';
    }
    return $fields_pickup;
}
// Local Pickup - hide fields
add_action( 'wp_head', 'local_pickup_fields', 999 );
function local_pickup_fields() {
    if (is_checkout()) :
    ?>
    <style>
        .hide_pickup {display: none!important;}
        .hide_shipping {display: none!important;}
        .hide_delivery_date_field {display: none!important;}
        .hide_delivery_time_field {display: none!important;}
        .hide_pickup_date_field {display: none!important;}
        .hide_pickup_time_field {display: none!important;}
    </style>
    <script>
        jQuery( function( $ ) {
            if ( typeof woocommerce_params === 'undefined' ) {
                return false;
            }
            $(document).on( 'change', '#shipping_method input[type="radio"]', function() {
                // change local_pickup:4 accordingly
            $('.billing-dynamic_pickup').toggleClass('hide_pickup', this.value == 'local_pickup:2');
            $('.woocommerce-shipping-fields').toggleClass('hide_shipping', this.value == 'local_pickup:2');
            $('#coderockz_woo_delivery_delivery_date_section').toggleClass('hide_delivery_date_field', this.value == 'local_pickup:2'); 
            $('#coderockz_woo_delivery_delivery_time_section').toggleClass('hide_delivery_time_field', this.value == 'local_pickup:2'); 
            $('#coderockz_woo_delivery_pickup_date_section').toggleClass('hide_pickup_date_field', this.value == 'flat_rate:1' || this.value == 'free_shipping:3'); 
            $('#coderockz_woo_delivery_pickup_time_section').toggleClass('hide_pickup_time_field', this.value == 'flat_rate:1' || this.value == 'free_shipping:3'); 
            });
        });
    </script>
    <?php
    endif;
}

现在，如果我在页面上并切换运输方式，这可以正常工作。唯一的问题是，当我在上一页选择送货方式，然后进入结帐页面时，它不起作用。以下是我添加的内容以尝试解决此问题，但它并没有隐藏我希望的部分。

  add_filter('woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields');

function xa_remove_billing_checkout_fields($fields) {
$shipping_flat_rate ='flat_rate:1'; // Set the desired shipping method to hide the checkout field(s).
$shipping_pickup ='local_pickup:2'; // Set the desired shipping method to hide the checkout field(s).
$shipping_free ='free_shipping:3'; // Set the desired shipping method to hide the checkout field(s).
global $woocommerce;
    
unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_state']);
    
$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
$chosen_shipping = $chosen_methods[0];

if ($chosen_shipping == $shipping_flat_rate  || $chosen_shipping == $shipping_free) {
//hide local pickup date field
//hide local pickup time field  
unset($fields['order']['coderockz_woo_delivery_pickup_date_field']);
unset($fields['order']['coderockz_woo_delivery_pickup_time_field']);
    
    ?>
    <script type="text/javascript">
 
    jQuery('#coderockz_woo_delivery_pickup_date_section').hide();
    jQuery('#coderockz_woo_delivery_pickup_time_section').hide();
</script>
<?php
     
} else if ($chosen_shipping == $shipping_pickup) {
//hide delivery date field
//hide delivery time field
//hide shipping section 
    ?>
<script type="text/javascript">
jQuery('#coderockz_woo_delivery_delivery_date_section').hide();
jQuery('#coderockz_woo_delivery_delivery_time_section').hide(); 
jQuery('.woocommerce-shipping-fields').hide();  
</script>
<?php
}
return $fields;
    
}

Answer 1

您只需要对 jQuery 代码进行一些小的更改(删除一些无用的代码):

<script>
jQuery( function($) {
    function toggleFieldsClasses( value ) {
        // change local_pickup:4 accordingly
        $('.billing-dynamic_pickup').toggleClass('hide_pickup', value == 'local_pickup:2');
        $('.woocommerce-shipping-fields').toggleClass('hide_shipping', value == 'local_pickup:2');
        $('#coderockz_woo_delivery_delivery_date_section').toggleClass('hide_delivery_date_field', value == 'local_pickup:2'); 
        $('#coderockz_woo_delivery_delivery_time_section').toggleClass('hide_delivery_time_field', value == 'local_pickup:2'); 
        $('#coderockz_woo_delivery_pickup_date_section').toggleClass('hide_pickup_date_field', value == 'flat_rate:1' || value == 'free_shipping:3'); 
        $('#coderockz_woo_delivery_pickup_time_section').toggleClass('hide_pickup_time_field', value == 'flat_rate:1' || value == 'free_shipping:3');
    }
    
    // Once DOM is loaded
    toggleFieldsClasses( $('#shipping_method input[type="radio"]:checked').val() );
    
    // On change
    $( document.body ).on( 'change', '#shipping_method input[type="radio"]', function() {
        toggleFieldsClasses( this.value );
    });
});
</script>

未经测试，当从购物车到结帐页面时，它现在应该可以正常工作。