在子主题中覆盖 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 小部件。当客户来自另一个国家时，它应该显示国家选择和城市输入字段。 Instead, when another country is selected, the state field shows as well.而当改回澳大利亚时，State 字段仍然存在。

Answer 1

我发现了这个问题。在“国家”选择中，我将它的类保留为：class="country_to_state country_select" - 所以这显然是在填充并调用 State 输入字段。我还意识到我的 javascript 应该检查“AU”而不是“Australia”的国家选择值。