Переопределение калькулятора доставки woocommerce в детской теме

Question

Я переопределил калькулятор доставки woocommerce, и он работает.Однако, когда я меняю страны, появляется поле ввода «Состояние», когда я установил его как скрытое поле.Если я затем вернусь в свою родную страну, Австралию, поле State останется, но станет выпадающим и заполнится штатами Австралии.Это поле является частью файла shipping-calculator.php оригинальной темы, а не моей дочерней темы.

Я не уверен, как это происходит, так как моя дочерняя тема работает нормально, пока я не поменяю страну.Я пытаюсь включить использование виджета AddressFinder в калькулятор доставки своей корзины, когда клиент из Австралии, и не использую его, если клиент из другой страны.

defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_shipping_calculator' ); ?>

<script>

(function(){

      var cartwidget, initAF = function(){
        cartwidget = new AddressFinder.Widget(
          document.getElementById('address_field'),
          '<AddressFinder Key Here>',
          'AU',
          {
            "address_params": {}
          }
        );

        cartwidget.on("result:select", function(fullAddress, metaData) {
          var combinedAddressLine1And2;

            if ( metaData.address_line_2 ) {
              combinedAddressLine1And2 = metaData.address_line_1 + ', ' + metaData.address_line_2
            } else {
              combinedAddressLine1And2 = metaData.address_line_1 
            }

          if ( document.getElementById("calc_shipping_country").value == "Australia" ) {
            document.getElementById('calc_shipping_address_1').value = combinedAddressLine1And2;
            document.getElementById('calc_shipping_state').value = metaData.state_territory;
            document.getElementById('calc_shipping_postcode').value = metaData.postcode;
          } else {
            document.getElementById('calc_shipping_address_1').value = '';
            document.getElementById('calc_shipping_state').value = '';
            document.getElementById('calc_shipping_postcode').value = '';
          }

          //window.alert(document.getElementById('calc_shipping_address_1').value);
          document.getElementById('calc_shipping_city').value = metaData.locality_name;

        }); 
      };

      function downloadAF(f){
        var script = document.createElement('script');
        script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
        script.async = true;
        script.onload=f;
        document.body.appendChild(script);
      };

      document.addEventListener("DOMContentLoaded", function () {
        downloadAF(initAF);
      });

  })();

function country_updated() {
    if ( document.getElementById("calc_shipping_country").value == "Australia") {
        document.getElementById("address_field").type = 'text';
        document.getElementById("calc_shipping_city").type = 'hidden';
    } else {
        document.getElementById("calc_shipping_city").type = 'text';
        document.getElementById("address_field").type = 'hidden';
    }
}

</script>


<form class="woocommerce-shipping-calculator" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">

    <?php printf( '<a href="#" class="shipping-calculator-button">%s</a>', esc_html( ! empty( $button_text ) ? $button_text : __( 'Calculate shipping', 'woocommerce' ) ) ); ?>

    <section class="shipping-calculator-form" style="display:none;">

        <?php if ( apply_filters( 'woocommerce_shipping_calculator_enable_country', true ) ) : ?>
            <p class="form-row form-row-wide" id="calc_shipping_country_field">
                <select name="calc_shipping_country" id="calc_shipping_country" class="country_to_state country_select" onchange="country_updated()">
                    <option value=""><?php esc_html_e( 'Select a country&hellip;', 'woocommerce' ); ?></option>
                    <?php
                    foreach ( WC()->countries->get_shipping_countries() as $key => $value ) {
                        echo '<option value="' . esc_attr( $key ) . '"' . selected( WC()->customer->get_shipping_country(), esc_attr( $key ), false ) . '>' . esc_html( $value ) . '</option>';
                    }
                    ?>
                </select>
            </p>
        <?php endif; ?>

        <p class="form-row form-row-wide" id="shipping_address_field">
            <input type="text" placeholder="<?php esc_attr_e( 'Enter Address Here', 'woocommerce' ); ?>" id="address_field" name="address_field" placeholder="Enter address here" class="address-search">
        </p>

        <p class="form-row form-row-wide" id="calc_shipping_address_field_1">
            <input type="hidden" name="calc_shipping_address_1" id="calc_shipping_address_1" />
        </p>

        <p class="form-row form-row-wide" id="calc_shipping_city_field">
            <input type="hidden" name="calc_shipping_city" id="calc_shipping_city" />
        </p>

        <p class="form-row form-row-wide" id="calc_shipping_state_field">
            <input type="hidden" name="calc_shipping_state" id="calc_shipping_state" />
        </p>

        <p class="form-row form-row-wide" id="calc_shipping_postcode_field">    
            <input type="hidden" name="calc_shipping_postcode" id="calc_shipping_postcode" />
        </p>

        <p><button type="submit" name="calc_shipping" value="1" class="button"><?php esc_html_e( 'Update', 'woocommerce' ); ?></button></p>
        <?php wp_nonce_field( 'woocommerce-shipping-calculator', 'woocommerce-shipping-calculator-nonce' ); ?>
    </section>
</form>

<?php do_action( 'woocommerce_after_shipping_calculator' ); ?>

Когда клиент из Австралии- он должен отображать ввод выбора страны и поле ввода адреса - на котором есть виджет AddressFinder.Когда клиент находится в другой стране, он должен отображать выбор страны и поле ввода города.Вместо этого, когда выбрана другая страна, также отображается поле состояния.И при переходе обратно в Австралию поле штата остается.

Answer 1

Я разобрался в проблеме.В выборе «Страна» я оставил его класс следующим образом: class = "country_to_state country_select" - так что это явно заполняло и вызывало поле ввода State.Я также понял, что мой javascript должен был проверять значение выбора страны для «AU», а не «Австралия».