wc_countries-状态选择下拉列表-woocommerce [英] wc_countries - states selection dropdown - woocommerce
问题描述
我正在努力用默认的WooCommerce国家/地区设置表单,并说明选择下拉列表.
I am struggling to set up a form with a default WooCommerce country and states selection dropdowns.
基本上,我想显示国家选择",然后根据国家选择显示状态选择.因此,如果用户选择英国,则会显示带有州选择的新下拉列表.
Basically, I want to show Country selection and then state selection based on the country selection. So if the user chooses UK, the new dropdown with states selection will show.
我了解到了:
<?php
global $woocommerce;
$countries_obj = new WC_Countries();
$countries = $countries_obj->__get('countries');
$default_country = $countries_obj->get_base_country();
$default_county_states = $countries_obj->get_states( $default_country );
echo '<div id="ships_from_countries_field">' . __('Countries') . '';
woocommerce_form_field('my_country_field', array(
'type' => 'select',
'class' => array( 'chzn-drop' ),
'label' => __('Item ships from - country'),
'placeholder' => __('Select a Country'),
'options' => $countries
)
);
echo '</div>';
echo '<div id="ships_from_state_field">' . __('States') . '';
woocommerce_form_field('my_state_field', array(
'type' => 'select',
'class' => array( 'chzn-drop' ),
'label' => __('Item ships from - state'),
'placeholder' => __('Select a State'),
'options' => $default_county_states
)
);
echo '</div>';
?>
国家/地区"下拉列表显示国家/地区和国家/地区下拉列表,显示商店基地的状态-英国
Countries dropdown is displaying countries and states dropdown displaying states of the shop base - UK
但是如何使它们协同工作并保存值?
But how do I make them work together and save the values?
找不到任何信息,有人有做这项工作的经验吗?
Cannot find any info, anybody has any experience making this work?
推荐答案
首先,有一个国家和州的类型..您不需要做很多事情...就像这样...
first of, there's a type for country and state.. you don't need to do much... it's just like this...
echo '<div id="ships_from_countries_field">' . __('Countries') . '';
woocommerce_form_field('my_country_field', array(
'type' => 'country',
'class' => array( 'chzn-drop' ),
'label' => __('Item ships from - country'),
'placeholder' => __('Select a Country')
)
);
echo '</div>';
echo '<div id="ships_from_state_field">' . __('States') . '';
woocommerce_form_field('my_state_field', array(
'type' => 'state',
'class' => array( 'chzn-drop' ),
'label' => __('Item ships from - state'),
'placeholder' => __('Select a State')
)
);
echo '</div>';
记下它们的类型...它们不是select类型.
take note of their type... they're not of type select.
现在解决您的问题.
PHP
您需要具有针对国家和州的本地化脚本...我不会继续使用 wp_localize_script()
.如果需要,请阅读链接.这是其中的一部分.
you need to have localized script for country and state... I won't go on how to use wp_localize_script()
. Read the link if you need to. Here's a part of it.
$wc_country = array(
'country' => json_encode( array_merge( WC()->countries->get_allowed_country_states(), WC()->countries->get_shipping_country_states() ) )
);
wp_localize_script( 'my-js', 'my_js', $wc_country );
javascript
这样,在您的my-js
脚本(脚本文件)中,您可以读取如下状态:
with that, in your my-js
script (a script file) you can read the state like this:
var states_json = my_js.countries.replace( /"/g, '"' ),
states = $.parseJSON( states_json );
然后您必须在您所在的国家/地区添加更改事件,然后根据所选国家/地区重新填充州/省...
you then have to add a change event on your country and repopulate state based on what country was selected...
示例:states["PH"]
如果所选国家是菲律宾
example: states["PH"]
if country selected is Philippines
00: "Metro Manila"
ABR: "Abra"
AGN: "Agusan del Norte"
AGS: "Agusan del Sur"
AKL: "Aklan"
ALB: "Albay"
ANT: "Antique"
APA: "Apayao"
AUR: "Aurora"
BAN: "Bataan"
BAS: "Basilan"
BEN: "Benguet"
BIL: "Biliran"
.....
WSA: "Samar"
ZAN: "Zamboanga del Norte"
ZAS: "Zamboanga del Sur"
ZMB: "Zambales"
ZSI: "Zamboanga Sibugay"
然后您可以使用jQuery构建这样的选项.
you can then build your options like this using jQuery..
var options = '',
state = states[ country ]; // country can be: var country = $('country').val();
for( var index in state ) {
if ( state.hasOwnProperty( index ) ) {
options = options + '<option value="' + index + '">' + state[ index ] + '</option>';
}
}
这篇关于wc_countries-状态选择下拉列表-woocommerce的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!