php - 显示/隐藏基于单选按钮的 WooCommerce 运费

Question

我一直在寻找解决方案...我正在尝试根据添加到 Woocommerce 结帐页面的单选按钮选项来显示或隐藏特定运费。但我对 Ajax 和 JQuery 一无所知，我认为这是它所需要的。

基本上，如果用户选择广播option_1，它只会显示“flat_rate:1”和“flat_rate:2”。如果用户选择单选option_2，它将仅显示“flat_rate:3”和“flat_rate:4”

Click here for example of checkout screen

以下是结帐页面上显示的单选按钮的代码:

add_action( 'woocommerce_review_order_before_payment','tc_checkout_radio_choice' );
function tc_checkout_radio_choice() {
$businesstype = array(
   'type' => 'radio',
   'class' => array( 'business_residential' ),
   'required' => true,
   'options' => array(
       'option_1' => 'Business',
       'option_2' => 'Residential',
),
);
   echo '<div id="checkout-radio">';
   echo '<h3>Select Your Business Type</h3>';
   woocommerce_form_field( 'radio_choice', $businesstype );
   echo '</div>';
}

我见过的最接近的例子来自“LoicTheAztec”提供的答案。 ' 在这篇文章中:Show/hide shipping methods based on a WooCommerce checkout field value

我完全迷失了这个问题，我越尝试解决它，我就越感到困惑。

Answer 1

这是在结帐页面上基于多个单选按钮选择显示隐藏送货方式的正确方法，需要使用 PHP、Ajax、jQuery 和 WC Session。

当选择“商务”单选按钮(默认选择)时，flat_rate:3 和 flat_rate:4 送货方式将被隐藏，因此客户只能选择 flat_rate:1 或 flat_rate:2 运送方式。

如果选择“住宅”单选按钮，则flat_rate:1和flat_rate:2运输方式将被隐藏，因此客户只会可以选择 flat_rate:3 或 flat_rate:4 运送方式。

代码:

// Display a Custom radio buttons fields for shipping options
add_action( 'woocommerce_review_order_before_payment','checkout_customer_type_radio_buttons' );
function checkout_customer_type_radio_buttons() {
    $field_id = 'customer_type';

    echo '<div id="customer-type-radio">';
    echo '<h3>' . __("Select Your Business Type", "woocommerce") . '</h3>';

    // Get the selected radio button value (if selected)
    $field_value = WC()->session->get( $field_id );

    // Get customer selected value on last past order
    if( empty($field_value) )
        $field_value = WC()->checkout->get_value( $field_id );

    // The default value fallback
    if( empty($field_value) )
        $field_value = 'Business';

    woocommerce_form_field( $field_id, array(
        'type' => 'radio',
        'class' => array( $field_id ),
        'required' => true,
        'options' => array(
            'Business'      => __('Business', 'woocommerce'),
            'Residential'   => __('Residential', 'woocommerce'),
        ),
    ), $field_value );

    echo '</div>';
}

// Conditionally show/hide shipping methods
add_filter( 'woocommerce_package_rates', 'shipping_package_rates_filter_callback', 100, 2 );
function shipping_package_rates_filter_callback( $rates, $package ) {
    $customer_type = WC()->session->get( 'customer_type' ); // Get the customere type

    if ( $customer_type === 'Business' ) {
        if( isset( $rates['flat_rate:3'] ) )
            unset( $rates['flat_rate:3'] );

        if( isset( $rates['flat_rate:4'] ) )
            unset( $rates['flat_rate:4'] );
    } 
    elseif ( $customer_type === 'Residential' ) {
        if( isset( $rates['flat_rate:1'] ) )
            unset( $rates['flat_rate:1'] );

        if( isset( $rates['flat_rate:2'] ) )
            unset( $rates['flat_rate:2'] );
    }

    return $rates;
}

// function that gets the Ajax data
add_action( 'wp_ajax_get_customer_type', 'wc_get_customer_type' );
add_action( 'wp_ajax_nopriv_get_customer_type', 'wc_get_customer_type' );
function wc_get_customer_type() {
    $field_id = 'customer_type';

    if ( isset($_POST[$field_id]) && ! empty($_POST[$field_id]) ){
        WC()->session->set($field_id, $_POST[$field_id] );
    } 

    echo json_encode( WC()->session->get( $field_id ) );

    die(); // (required)
}

// The Jquery Ajax script
add_action( 'wp_footer', 'custom_checkout_ajax_jquery_script' );
function custom_checkout_ajax_jquery_script() {
    $field_id = 'customer_type';

    if( WC()->session->__isset($field_id) ) 
        WC()->session->__unset($field_id);

    // Only on checkout when billing company is not defined
    if( is_checkout() && ! is_wc_endpoint_url() ):
    ?>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof wc_checkout_params === 'undefined') 
            return false;

        var fieldId = 'p#customer_type_field input';

        function userTypeTriggerAjax( customerType ){
            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'get_customer_type',
                    'customer_type': customerType,
                },
                success: function (result) {
                    // Trigger refresh checkout
                    $('body').trigger('update_checkout');
                    console.log(result);
                }
            });
        }

        // On start
        if( $(fieldId).val() != '' ) {
            userTypeTriggerAjax( $(fieldId).val() );
        }

        // On change
        $(fieldId).change( function () {
            userTypeTriggerAjax( $(this).val() );
        });
    });
    </script>
    <?php
    endif;
}

// Enabling, disabling and refreshing session shipping methods data
add_action( 'woocommerce_checkout_update_order_review', 'refresh_shipping_methods', 10, 1 );
function refresh_shipping_methods( $post_data ){
    $bool = true;

    if ( in_array( WC()->session->get('customer_type' ), ['Business', 'Residential'] ) )
        $bool = false;

    // Mandatory to make it work with shipping methods
    foreach ( WC()->cart->get_shipping_packages() as $package_key => $package ){
        WC()->session->set( 'shipping_for_package_' . $package_key, $bool );
    }
    WC()->cart->calculate_shipping();
}

代码位于事件子主题(或事件主题)的functions.php 文件中。经过测试并有效。

基于此相关线程的代码:

• Remove shipping cost if custom checkbox is checked in WooCommerce Checkout
• Show/hide shipping methods based on a WooCommerce checkout field value