Personalizar o Campo de Estado para o Reino Unido no Esquema de Endereço Internacional

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 como País por defeito. Se preferir Condado ou 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.