基于 WooCommerce 结帐页面中选择的运输方式的刷新功能

Question

所以我有这个代码，它检测交付方式并添加额外的选择选项。

add_filter( 'woocommerce_review_order_before_payment', 'localdealers_checkout_fields' );
function localdealers_checkout_fields() {
    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping = $chosen_methods[0];

    if ( 0 === strpos( $chosen_shipping, 'local_pickup:2' ) ) {
        
        echo '<div id="localdealers_checkout_field" class="row"><div class="col-12 col-lg-6 offset-lg-6">
        <h3>' . __('Local dealer', 'my_theme_slug') . 
        '<span>(extra paid)</span></h3>'
        ;

        // The selector
        woocommerce_form_field( 'local_dealers', array(
        'type'        => 'select',
        'required'    => true,
        'class'       => array('my-field-class form-row-wide'),
        'label'       => __('Chose location', 'my_theme_slug'),
        'options'     => array(
            '' => __('Location address', 'my_theme_slug'),
            'option1' => 'Address 1',
            'option2' => 'Address 2'
        )
        ), WC()->checkout->get_value( 'local_dealers' ));
        echo '</div></div>';
    }
}

问题在于，当更改交付选项时，此函数不会被触发。所以它只适用于页面重新加载。

jQuery('body').trigger('update_checkout'); 没有帮助。

有什么想法吗？

Answer 1

您可以使用 jQuery 显示/隐藏您的自定义字段

所以你得到：

function action_woocommerce_review_order_before_payment() {
    echo '<div id="localdealers_checkout_field" class="row"><div class="col-12 col-lg-6 offset-lg-6">
    <h3>' . __('Local dealer', 'my_theme_slug') . '<span>(extra paid)</span></h3>';

    // The selector
    woocommerce_form_field( 'local_dealers', array(
        'type'        => 'select',
        'required'    => true,
        'class'       => array('my-field-class form-row-wide'),
        'label'       => __('Chose location', 'my_theme_slug'),
        'options'     => array(
            ''        => __('Location address', 'my_theme_slug'),
            'option1' => 'Address 1',
            'option2' => 'Address 2'
        )
    ), WC()->checkout->get_value( 'local_dealers' ));
    
    echo '</div></div>';
    
    // Chosen shipping method
    $chosen_shipping_methods = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping_method = substr( $chosen_shipping_methods[0], 0, strpos( $chosen_shipping_methods[0], ':' ) );
    
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        var selector = '#localdealers_checkout_field';
        // Once DOM is loaded
        <?php if ( $chosen_shipping_method != 'local_pickup' ) { ?>
            $( selector ).hide();
        <?php } ?>
        
        // On live "change event"
        $( 'form.checkout' ).on( 'change', 'input[name^="shipping_method"]', function() {
            var c_s_m = $( this ).val();
            
            // Check if string contains substring
            if ( c_s_m.indexOf( 'local_pickup' ) >= 0 ) {
                $( selector ).show();   
            } else {
                $( selector ).hide();               
            }
        });
    });
    </script>
    <?php
}
add_action( 'woocommerce_review_order_before_payment', 'action_woocommerce_review_order_before_payment', 10, 0 );