Personalização do campo «Estado» para o Reino Unido no esquema de endereços internacional

Gostaria de personalizar o comportamento do campo «Estado/Província/Região» quando um utilizador seleciona o Reino Unido no campo «Endereço»? Ao utilizar o esquema internacional, o WPForms oculta por predefinição o campo «Estado/Província/Região» para o Reino Unido, uma vez que o Reino Unido não utiliza estados no sentido tradicional. Se preferir recolher um valor como o país (Inglaterra, Escócia, País de Gales ou Irlanda do Norte) ou o 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 o campo de introdução de texto por um menu suspenso com os países do Reino Unido.


Criar o snippet

Antes de começarmos, não se esqueça de consultar o nosso tutorial sobre como adicionar trechos de código personalizados ao seu site.

Este trecho de código faz duas coisas. Em primeiro lugar, remove o Reino Unido da lista de países que ocultam o campo «Estado/Província/Região». Em segundo lugar, adiciona um pequeno trecho de JavaScript ao front-end que atualiza o rótulo do campo e substitui o campo de introdução de texto por um menu suspenso sempre que o utilizador seleciona o Reino Unido.

Vá em frente 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 snippet

Este trecho de código foi concebido para ser adaptado ao seu caso de utilização. Aqui estão as três variáveis, situadas na parte superior do bloco de JavaScript, que poderá querer editar.

  • countryLabel: O rótulo exibido acima do campo quando o Reino Unido é selecionado. Está definido como Country por predefinição. Se preferir County ou qualquer outro rótulo, altere este valor.
  • countryPlaceholder: O texto provisório apresentado como primeira opção no menu suspenso. Altere-o para que corresponda ao seu novo rótulo.
  • gbCountries: A lista de opções apresentada no menu suspenso. Por predefinição, esta lista inclui Inglaterra, Escócia, País de Gales e Irlanda do Norte. Pode adicionar, remover ou renomear entradas conforme necessário. Por exemplo, se preferir recolher dados sobre os condados do Reino Unido, substitua a lista pelos condados da sua preferência.

Quando o utilizador seleciona um país que não seja o Reino Unido, o fragmento de código restaura automaticamente o campo de introdução de texto «Estado/Província/Região» e o respetivo rótulo.

É isso! Personalizou com sucesso o campo «Endereço» para o esquema internacional quando o Reino Unido é selecionado. Gostaria de explorar mais formas de personalizar os campos do seu formulário? Consulte o nosso tutorial sobre como escolher o formato correto para o campo «Endereço».