CODEWITHSUNDEEP
jquerywordpresswoocommercecheckoutshipping-method
Mastafu
Mastafu

Reputation: 43

Refresh function based on chosen shipping method in WooCommerce checkout page

So I have this code, which detects delivery method and adds extra select with options.

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>';
    }
}

The problem is that when changing delivery options, this function is not fired. So it works only on page reload.

jQuery('body').trigger('update_checkout'); doesn't help.

Any idea?

Upvotes: 1

Views: 2099

Answers (1)

7uc1f3r
7uc1f3r

Reputation: 29624

You can show/hide your custom field using jQuery

So you get:

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 );

Upvotes: 1

Related Questions