Woocommerce自动完成邮政编码字段

Question

当用户开始输入字段时，如何使woocommerce结帐页面中的邮政编码字段基于列表（zip01，zip02，zip03）提出建议。就像jqueryui autocomplete。

$fields['billing']['billing_postcode'] = array(
    'type' => 'select',
    'class' => array( 'form-row-wide', 'address-field' ),
    'validate' => array( 'postcode' ),
    'autocomplete' => 'postal-code',
    'options' => array( 'zip01'=>'zip01', 'zip02'=>'zip02'),
    'required' => true
);

Answer 1

考虑到选项的来源是PHP，您可以使用datalist html元素为输入创建选项......

<input list="zipcodeoptions" name="zipcode">

<datalist id="zipcodeoptions">
    <?php
    foreach($fields['billing']['billing_postcode']['options'] as $key => $value)
        echo "<option value=\"".$value."\">";
    ?>
</datalist>

<强> EDITED ：

好的，所以你必须在Woocommerce中这样做...在阅读你的链接后，我认为选项覆盖billing_postcode将其变成选择挂钩woocommerce_checkout_fields过滤器...

// Hook in
add_filter('woocommerce_checkout_fields','custom_override_checkout_fields');

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields($fields) {

    // Just changing what is needed to turn it into a select.
    // Modify other options if you need.
    $fields['billing']['billing_postcode']['type'] = 'select';
    $fields['billing']['billing_postcode']['options'] = array('zip01' => "zip01",
                                                              'zip02' => "zip02",
                                                              'zip03' => "zip03");

    return $fields;
}

或者如果您想同时为结算和送货地址执行此操作，您可以加入woocommerce_default_address_fields ...

// Hook in
add_filter('woocommerce_default_address_fields','custom_override_default_address_fields');

// Our hooked in function - $fields is passed via the filter!
function custom_override_default_address_fields($address_fields) {

    // Just changing what is needed to turn it into a select.
    // Modify other options if you need.
    $address_fields['postcode']['type'] = 'select';
    $address_fields['postcode']['options'] = array('zip01' => "zip01",
                                                   'zip02' => "zip02",
                                                   'zip03' => "zip03");

    return $address_fields;
}

我希望它有所帮助

Answer 2

您的代码仅在您拥有主题的引导程序时才有效。

Answer 3

基于WP dev doc: including css javascript已在默认wordpress脚本中注册的Jquery自动完成UI，我只需要调用它：

此代码转到主题文件夹上的 function.php ：

// Load ui.autocomplete javascript and style
 function add_theme_scripts() { 
    if ( is_checkout() ) {
        wp_enqueue_style( 'jquery-ui-base', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css', false,'1.0','all');
        wp_enqueue_script( 'jquery-ui-autocomplete' );
        wp_enqueue_script( 'resource.zip', get_theme_file_uri() . '/js/resource.zip.js', array( 'jquery', 'jquery-ui-autocomplete' ),'1.1',true);
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

这是 resource.zip.js ：

( function( $ ) {
    var availableZip = [
        'ZIP01',
        'ZIP02',
        'ZIP03'
    ];
    $( "#billing_postcode" ).autocomplete({
      source: availableZip,
      select: function (event, ui) {
        $( "#billing_postcode" ).val( ui.item.value );
        jQuery('body').trigger('update_checkout');
        return false;
      }
    });
    $( "#billing_postcode" ).on( "autocompleteselect", function( event, ui ) {
        jQuery('body').trigger('update_checkout');
        return false;
    } );
} )( jQuery );

发现运费成本更新的js目标函数触发器是'update_checkout'。这段代码适合我，它在台式机上使用鼠标，键盘和带触摸屏的设备进行测试。