Resumo de IA
Gostaria de personalizar o comportamento do campo Estado/Província/Região quando um utilizador seleciona o Reino Unido no seu campo de Endereço? Ao usar o esquema Internacional, o WPForms oculta o campo Estado/Província/Região por defeito para o Reino Unido, uma vez que o Reino Unido não utiliza estados no sentido tradicional. Se desejar recolher um valor como o país (Inglaterra, Escócia, País de Gales ou Irlanda do Norte) ou condado, pode fazê-lo com um trecho de código personalizado.
Este tutorial irá mostrar-lhe como reativar o campo Estado/Província/Região para o Reino Unido, alterar o seu rótulo e substituir a entrada de texto por uma lista suspensa de países do Reino Unido.
Criar o Trecho
Antes de começarmos, certifique-se de que consulta o nosso tutorial sobre como adicionar trechos de código personalizados ao seu site.
Este trecho faz duas coisas. Primeiro, remove o Reino Unido da lista de países que ocultam o campo Estado/Província/Região. Segundo, adiciona um pequeno pedaço de JavaScript ao frontend que atualiza o rótulo do campo e substitui a entrada de texto por uma lista suspensa sempre que o utilizador seleciona o Reino Unido.
Prossiga e adicione o seguinte trecho ao seu site.
/**
* Customize the Address field State/Province/Region input when
* the United Kingdom is selected in the International scheme.
*
* @link https://wpforms.com/developers/customizing-the-state-field-for-the-united-kingdom-in-the-international-address-scheme
*/
add_filter( 'wpforms_forms_fields_address_frontend_strings_list_countries_without_states', 'wpf_forms_fields_address_frontend_strings_list_countries_without_states' );
function wpf_forms_fields_address_frontend_strings_list_countries_without_states( $countries ) {
return array_diff( $countries, [ 'GB' ] );
}
add_action( 'wpforms_frontend_js', 'wpf_forms_fields_address_frontend_great_britain_countries_list' );
function wpf_forms_fields_address_frontend_great_britain_countries_list( $forms) {
$load = false;
foreach ( $forms as $form ) {
if ( wpforms_has_field_type( 'address', $form ) ) {
$load = true;
break;
}
}
if ( ! $load ) {
return;
}
?>
<script>
jQuery( document ).ready( function ( $ ) {
const countryLabel = 'Country'; // TODO: Change it if needed.
const countryPlaceholder = '--- Country ---'; // TODO: Change it if needed.
const gbCountries = [ // TODO: Update it if needed.
{ value: 'England', label: 'England' },
{ value: 'Scotland', label: 'Scotland' },
{ value: 'Wales', label: 'Wales' },
{ value: 'Northern Ireland', label: 'Northern Ireland' }
];
const originalFields = {};
$( '.wpforms-field-address-state' ).each( function () {
const $field = $( this ),
$label = $field.closest( '.wpforms-field-row-block' ).find( 'label' ),
fieldId = $field.attr( 'id' );
originalFields[ fieldId ] = {
label: $label.length ? $label.text() : '',
placeholder: $field.attr( 'placeholder' ) || '',
value: $field.val(),
};
} );
$( document )
.on( 'change', '.wpforms-field-address-country', function () {
const $countryField = $( this ),
$field = $( this ).closest( '.wpforms-field' ),
$stateField = $field.find( '.wpforms-field-address-state' ),
$stateLabel = $stateField.closest( '.wpforms-field-row-block' ).find( 'label' ),
stateFieldId = $stateField.attr( 'id' ),
stateFieldName = $stateField.attr( 'name' );
if ( $countryField.val() === 'GB' ) {
$stateLabel.text( countryLabel );
let selectHTML = `<select class="wpforms-field-address-state" id="${ stateFieldId }" name="${ stateFieldName }">`;
selectHTML += `<option value="">${ countryPlaceholder }</option>`;
$.each( gbCountries, function ( index, country ) {
selectHTML += `<option value="${ country.value }">${ country.label }</option>`;
} );
selectHTML += '</select>';
$stateField.replaceWith( selectHTML );
return;
}
// Replace the select field back to input text
if ( $stateField.is( 'select' ) ) {
$stateField.replaceWith( `<input type="text" class="wpforms-field-address-state" id="${ stateFieldId }" name="${ $stateField.attr( 'name' ) }" placeholder="${ originalFields[ stateFieldId ].placeholder }" value="${ originalFields[ stateFieldId ].value }">` );
}
// Replace label back.
if ( originalFields[ stateFieldId ] ) {
$stateLabel.text( originalFields[ stateFieldId ].label );
}
} );
} );
</script>
<?php
}
Personalizar o Trecho
O trecho foi concebido para ser ajustado para se adequar ao seu caso de uso. Aqui estão as três variáveis perto do topo do bloco JavaScript que poderá querer editar.
countryLabel: O rótulo exibido acima do campo quando o Reino Unido é selecionado. Está definido comoPaíspor defeito. Se preferirCondadoou qualquer outro rótulo, altere este valor.countryPlaceholder: O texto de exemplo exibido como a primeira opção na lista suspensa. Atualize isto para corresponder ao seu novo rótulo.gbCountries: A lista de opções exibidas na lista suspensa. Por defeito, contém Inglaterra, Escócia, País de Gales e Irlanda do Norte. Pode adicionar, remover ou renomear entradas conforme necessário. Por exemplo, se desejar recolher condados do Reino Unido em vez disso, substitua a lista pelos seus condados preferidos.
Quando o utilizador seleciona um país diferente do Reino Unido, o trecho restaura automaticamente a entrada de texto e o rótulo originais do campo Estado/Província/Região.
É tudo! Personalizou com sucesso o campo de Endereço para o esquema Internacional quando o Reino Unido é selecionado. Gostaria de explorar mais formas de personalizar os seus campos de formulário? Dê uma vista de olhos ao nosso tutorial sobre como escolher o formato correto do campo de endereço.