根据单选按钮显示/隐藏WooCommerce运费 [英] Show/Hide WooCommerce Shipping Rates Based on Radio Buttons

问题描述

一段时间以来，我一直在寻找解决方案...我试图根据添加到Woocommerce结帐页面上的单选按钮选项来显示或隐藏特定的运费.但是我对Ajax&一无所知我相信它需要的jQuery.

I've been looking for a solution to this for a while now... I am trying to show or hide specific shipping rates based on a radio button option added to the Woocommerce checkout page. But I don't know anything about Ajax & JQuery which I believe it requires.

基本上，如果用户选择收音机 option_1 ，它将仅显示' flat_rate:1 '& " flat_rate:2 ".如果用户选择广播 option_2 ，它将仅显示' flat_rate:3 '& ' flat_rate:4 '

Basically if a user selects radio option_1 it will ONLY show 'flat_rate:1' & 'flat_rate:2'. If the user selects radio option_2 it will ONLY show 'flat_rate:3' & 'flat_rate:4'

点击此处查看结帐屏幕示例

这是我在结帐页面上显示的单选按钮的代码:

Here is the code for my radio buttons displayed on checkout page:

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 "提供的答案:显示/隐藏基于WooCommerce结帐字段值

The closest example I've seen comes from an answer provided by 'LoicTheAztec' in this post here: Show/hide shipping methods based on a WooCommerce checkout field value

我对此完全迷失了，我尝试解决的越多，我就越困惑.

I'm completely lost with this and the more I try to solve it, the more I get confused.

推荐答案

以下是在结帐页面上基于多个单选按钮选择显示隐藏运输方法的正确方法，该方法需要使用PHP，Ajax，jQuery和WC Session.

Here is the correct way to show hide shipping methods based on multiple radio buttons choice on checkout page, that requires to use PHP, Ajax, jQuery and WC Session.

在 业务"单选按钮被选中(默认选项)，和运输方式将被隐藏，所以客户只能选择或运送方式.

When "Business" radio button is selected (default choice), flat_rate:3 and flat_rate:4 shipping methods will be hidden, so customer will only be able to choose flat_rate:1 or flat_rate:2 shipping methods.

如果选择了住宅" 单选按钮，则flat_rate:1和flat_rate:2送货方式将被隐藏，因此客户只能选择flat_rate:3或flat_rate:4送货方式.

If "Residential" radio button is selected then flat_rate:1 and flat_rate:2 shipping methods will be hidden, so customer will only be able to choose flat_rate:3 or flat_rate:4 shipping methods.

代码:

// 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文件中.经过测试，可以正常工作.

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

基于此相关线程的代码:

Code based on this related threads:

• 删除运费如果在WooCommerce Checkout中选中了自定义复选框
• 显示/隐藏基于WooCommerce结帐字段值的送货方式

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

这篇关于根据单选按钮显示/隐藏WooCommerce运费的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！