Измените некоторые типы полей оформления заказа, используя jQuery для определенного состояния в Woocommerce.

Question

Я пытаюсь реализовать некоторые условные поля при оформлении заказа в Woocommerce.

Цель: если пользователь выбирает определенное состояние (CO), измените текстовые поля BILLING / SHIPPING CITY и POSTCODE, чтобы выбрать поля.Доставка должна обновляться в соответствии со значением POSTCODE.

Я использую Jquery для обновления полей CITY и POSTCODE, когда выбрано определенное состояние.Это работает нормально, однако доставка не обновляется, когда поля изменяются для выбора полей типа - выбор другого почтового индекса из поля выбора приводит к вращающемуся графическому обновлению в таблице просмотра / доставки заказа, но ничего не обновляется, чтобы отразить выбранное значение.

Доставка обновлений в порядке, когда поле POSTCODE является стандартным текстовым полем и изменяется с помощью ввода с клавиатуры.

С чем я сейчас работаю:

function city_to_dropdown( $fields ) {

    ?>
    <script type="text/javascript">

jQuery('#billing_state').on('change', function() {

            if (jQuery("select#billing_state option:checked").val()=='CO') {

              jQuery( document ).ready(function() {

              jQuery("#billing_city").replaceWith('<select id="billing_city" name="billing_city" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1">' +
             '<option value="" selected>- Select City -</option>' +
          '<option value="TEST1">TEST1</option>' +
          '<option value="TEST2">TEST2</option>' +
          '<option value="TEST3">TEST3</option>' +
          '<option value="TEST4">TEST4</option>' +
          '<option value="TEST5">TEST5</option>' +
        '</select>');
                            jQuery("#shipping_city").replaceWith('<select id="shipping_city" name="shipping_city" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1" >' +
          '<option value="" selected>- Select City -</option>' +
                                                                 '<option value="" selected>- Select City -</option>' +
          '<option value="TEST1">TEST1</option>' +
          '<option value="TEST2">TEST2</option>' +
          '<option value="TEST3">TEST3</option>' +
          '<option value="TEST4">TEST4</option>' +
          '<option value="TEST5">TEST5</option>' +
        '</select>');

              jQuery("#billing_postcode").replaceWith('<select id="billing_postcode" name="billing_postcode" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1" >' +
          '<option value="" selected>- Select Zip -</option>' +
                                                      '<option value="96734">96734</option>' +
          '<option value="96744">96744</option>' +
          '<option value="96795">96795</option>' +
          '<option value="96863-MCB">96863-MCB</option>' +

        '</select>');

              jQuery("#shipping_postcode").replaceWith('<select id="shipping_postcode" name="shipping_postcode" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1">' +
          '<option value="" selected>- Select Zip -</option>' +
                                                       '<option value="96734">96734</option>' +
          '<option value="96744">96744</option>' +
          '<option value="96795">96795</option>' +
          '<option value="96863-MCB">96863-MCB</option>' +

        '</select>');
              } ); 
            } else {

              jQuery("#billing_city").replaceWith('<input type="text" class="input-text address-field " name="billing_city" id="billing_city" placeholder="" value="" autocomplete="address-level2">');
              jQuery("#billing_postcode").replaceWith('<input type="text" class="input-text address-field " name="billing_postcode" id="billing_postcode" placeholder="" value="" autocomplete="postal-code">');            
              jQuery("#shipping_city").replaceWith('<input type="text" class="input-text address-field " name="shipping_city" id="shipping_city" placeholder="" value="" autocomplete="address-level2">');
              jQuery("#shipping_postcode").replaceWith('<input type="text" class="input-text address-field " name="shipping_postcode" id="shipping_postcode" placeholder="" value="" autocomplete="postal-code">');
            }

        });





    </script>       

    <?php




}
add_filter( 'woocommerce_after_checkout_billing_form', 'city_to_dropdown' );

Спасибо!

Answer 1

Поскольку штат "CO" не существует по умолчанию в Woocommerce для любой страны, я использовал "CA" (Калифорния) в качестве штата (и США в качестве страны) для целей тестирования .

Итак, я пересмотрел, оптимизировал и сжал ваш код (отделяя платежи от доставки).

Попробуйте вместо этого следующее:

add_action( 'wp_footer', 'change_checkout_fields_script' );
function change_checkout_fields_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):
    ?>
    <script type="text/javascript">
        jQuery(function($){
            var state = 'CO';

            // Utility function to convert billing or shipping city and postcode checkout fields based on state
            function cityPostcodeChange( state, type, update = false ) {
                if ($('#'+type+'_state').val() == state) {
                    $('#'+type+'_city').replaceWith('<select id="'+type+'_city" name="'+type+'_city" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1">' +
                    '<option value="" selected>- Select City -</option>' +
                    '<option value="TEST1">TEST1</option>' +
                    '<option value="TEST2">TEST2</option>' +
                    '<option value="TEST3">TEST3</option>' +
                    '<option value="TEST4">TEST4</option>' +
                    '<option value="TEST5">TEST5</option>' +
                    '</select>');
                    $('#'+type+'_postcode').replaceWith('<select id="'+type+'_postcode" name="'+type+'_postcode" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1" >' +
                    '<option value="" selected>- Select Zip -</option>' +
                    '<option value="96734">96734</option>' +
                    '<option value="96744">96744</option>' +
                    '<option value="96795">96795</option>' +
                    '<option value="96863-MCB">96863-MCB</option>' +
                    '</select>');
                } else {
                    $(''+type+'_city').replaceWith('<input type="text" class="input-text address-field " name="'+type+'_city" id="'+type+'_city" placeholder="" value="" autocomplete="address-level2">');
                    $('#'+type+'_postcode').replaceWith('<input type="text" class="input-text address-field " name="'+type+'_postcode" id="'+type+'_postcode" placeholder="" value="" autocomplete="postal-code">');
                }
                // Update checkout
                if( update )
                    $('body').trigger('update_checkout');
            }

            // 1. Once DOM is loaded
            cityPostcodeChange( state, 'billing' );
            cityPostcodeChange( state, 'shipping' );

            // 2. On "state" field change event
            $('#billing_state').on('change', function() {
                cityPostcodeChange( state, 'billing', true );
            });
            $('#shipping_state').on('change', function() {
                cityPostcodeChange( state, 'shipping', true );
            });
        });
    </script>
    <?php
    endif;
};

Код входит в файл function.php вашей активной дочерней темы (или активной темы).Протестировано и работает.

---

С "CA" (Калифорния) в качестве штата (И США в качестве страны):