国際住所体系における英国の「州」フィールドのカスタマイズ

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