Woocommerce 自动填充邮政编码字段答案

【问题标题】：Woocommerce autocomplete postalcode fieldWoocommerce 自动填充邮政编码字段
【发布时间】：2017-10-11 05:28:19
【问题描述】：

当用户开始输入字段时，如何使 woocommerce 结帐页面中的邮政编码字段根据列表（zip01、zip02、zip03）提出建议。就像 jqueryui 自动完成一样。

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

【问题讨论】：

标签： jquery wordpress jquery-ui autocomplete woocommerce

【解决方案1】：

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

【讨论】：

我可以在源代码中找到 bootstrap.min.css，但我如何确定它是基于 bootstrap 框架构建的？

【解决方案2】：

考虑到您的选项来源是 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>

已编辑：

好的，所以您必须在 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;
}

希望对你有帮助

【讨论】：

是的，但它需要以 wordpress 和 woocommerce 的方式编写。我知道很多：tutorial customising checkout fields using actions and filters.
我明白了...我不知道 Woocommerce，但请检查编辑后的答案，看看这是否是您要查找的内容。
我试过了，它会以

【解决方案3】：

基于WP dev doc: including css javascript已经在默认wordpress脚本中注册的Jquery Autocomplete 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'。这段代码对我有用，它在桌面上用鼠标、键盘和带触摸屏的设备进行了测试。

【讨论】：