Personalizzazione del campo Stato per il Regno Unito nello schema di indirizzo internazionale

Desideri personalizzare il comportamento del campo Stato/Provincia/Regione quando un utente seleziona il Regno Unito nel tuo campo Indirizzo? Utilizzando lo schema Internazionale, WPForms nasconde il campo Stato/Provincia/Regione per impostazione predefinita per il Regno Unito, poiché il Regno Unito non utilizza gli stati nel senso tradizionale. Se desideri raccogliere un valore come il paese (Inghilterra, Scozia, Galles o Irlanda del Nord) o la contea, puoi farlo con uno snippet di codice personalizzato.

Questo tutorial ti mostrerà come riattivare il campo Stato/Provincia/Regione per il Regno Unito, modificarne l'etichetta e sostituire l'input di testo con un menu a discesa dei paesi del Regno Unito.


Creazione dello Snippet

Prima di iniziare, assicurati di consultare il nostro tutorial su come aggiungere snippet di codice personalizzati al tuo sito.

Questo snippet fa due cose. In primo luogo, rimuove il Regno Unito dall'elenco dei paesi che nascondono il campo Stato/Provincia/Regione. In secondo luogo, aggiunge un piccolo pezzo di JavaScript al frontend che aggiorna l'etichetta del campo e sostituisce l'input di testo con un menu a discesa ogni volta che l'utente seleziona il Regno Unito.

Procedi e aggiungi il seguente snippet al tuo sito.

/**
 * 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
}

Personalizzazione dello snippet

Lo snippet è progettato per essere adattato al tuo caso d'uso. Ecco le tre variabili vicino all'inizio del blocco JavaScript che potresti voler modificare.

  • countryLabel: L'etichetta mostrata sopra il campo quando viene selezionato il Regno Unito. Per impostazione predefinita è impostata su Paese . Se preferisci Contea o qualsiasi altra etichetta, modifica questo valore.
  • countryPlaceholder: Il testo segnaposto mostrato come prima opzione nel menu a discesa. Aggiornalo per corrispondere alla tua nuova etichetta.
  • gbCountries: L'elenco delle opzioni mostrate nel menu a discesa. Per impostazione predefinita, contiene Inghilterra, Scozia, Galles e Irlanda del Nord. Puoi aggiungere, rimuovere o rinominare le voci secondo necessità. Ad esempio, se desideri raccogliere le contee del Regno Unito, sostituisci l'elenco con le tue contee preferite.

Quando l'utente seleziona un paese diverso dal Regno Unito, lo snippet ripristina automaticamente l'input di testo e l'etichetta originali di Stato/Provincia/Regione.

Fatto! Hai personalizzato con successo il campo Indirizzo per lo schema Internazionale quando viene selezionato il Regno Unito. Desideri esplorare altri modi per personalizzare i tuoi campi modulo? Dai un'occhiata al nostro tutorial su come scegliere il formato corretto del campo indirizzo.