Personalizzazione del campo "Stato" per il Regno Unito nello schema degli indirizzi internazionali

Desideri personalizzare il comportamento del campo "Stato/Provincia/Regione" quando un utente seleziona il Regno Unito nel campo "Indirizzo"? Quando si utilizza lo schema internazionale, WPForms nasconde per impostazione predefinita il campo "Stato/Provincia/Regione" per il Regno Unito, poiché il Regno Unito non utilizza gli stati nel senso tradizionale del termine. Se desideri invece 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 il campo di immissione testo con un menu a tendina contenente i paesi del Regno Unito.


Creazione dello snippet

Prima di iniziare, assicurati di dare un'occhiata al nostro tutorial su come aggiungere frammenti di codice personalizzati al tuo sito.

Questo frammento di codice svolge due funzioni. Innanzitutto, rimuove il Regno Unito dall'elenco dei paesi per i quali è nascosto il campo "Stato/Provincia/Regione". In secondo luogo, aggiunge un breve codice JavaScript all'interfaccia utente che aggiorna l'etichetta del campo e sostituisce il campo di immissione testo con un menu a tendina ogni volta che l'utente seleziona il Regno Unito.

Aggiungi pure il seguente frammento di codice 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

Il frammento di codice è pensato per essere adattato alle tue esigenze. Ecco le tre variabili che trovi nella parte superiore del blocco JavaScript e che potresti voler modificare.

  • countryLabel: L'etichetta visualizzata sopra il campo quando si seleziona il Regno Unito. È impostata su Country per impostazione predefinita. Se preferisci County o qualsiasi altra etichetta, modificare questo valore.
  • countryPlaceholder: Il segnaposto visualizzato come prima opzione nel menu a tendina. Modificalo in modo che corrisponda alla tua nuova etichetta.
  • gbCountries: L'elenco delle opzioni visualizzate nel menu a tendina. Per impostazione predefinita, contiene Inghilterra, Scozia, Galles e Irlanda del Nord. È possibile aggiungere, rimuovere o rinominare le voci in base alle proprie esigenze. Ad esempio, se si desidera invece raccogliere le contee del Regno Unito, sostituire l'elenco con le contee preferite.

Quando l'utente seleziona un Paese diverso dal Regno Unito, il frammento ripristina automaticamente il testo originale relativo allo Stato/Provincia/Regione e la relativa etichetta.

Ecco fatto! Hai personalizzato con successo il campo "Indirizzo" per lo schema internazionale quando viene selezionato il Regno Unito. Vuoi scoprire altri modi per personalizzare i campi del tuo modulo? Dai un'occhiata al nostro tutorial su come scegliere il formato corretto per il campo "Indirizzo".