Résumé de l'IA
Souhaitez-vous personnaliser le comportement du champ « État/Province/Région » lorsqu'un utilisateur sélectionne le Royaume-Uni dans votre champ « Adresse » ? Lorsque vous utilisez le schéma international, WPForms masque par défaut le champ « État/Province/Région » pour le Royaume-Uni, car ce pays n'utilise pas le concept d'« État » au sens traditionnel du terme. Si vous souhaitez plutôt recueillir une valeur telle que le pays (Angleterre, Écosse, Pays de Galles ou Irlande du Nord) ou le comté, vous pouvez le faire à l'aide d'un extrait de code personnalisé.
Ce tutoriel vous montrera comment réactiver le champ « État/Province/Région » pour le Royaume-Uni, modifier son libellé et remplacer le champ de saisie de texte par une liste déroulante des pays du Royaume-Uni.
Création de l'extrait
Avant de commencer, n'oubliez pas de consulter notre tutoriel sur la manière d'ajouter des extraits de code personnalisés à votre site.
Cet extrait de code remplit deux fonctions. Tout d'abord, il supprime le Royaume-Uni de la liste des pays pour lesquels le champ « État/Province/Région » est masqué. Ensuite, il ajoute un petit bout de code JavaScript à l'interface utilisateur qui met à jour le libellé du champ et remplace le champ de saisie de texte par un menu déroulant dès que l'utilisateur sélectionne le Royaume-Uni.
N'hésitez pas à ajouter le bout de code suivant à votre 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
}
Personnalisation de l'extrait
Cet extrait de code est conçu pour être adapté à votre cas d'utilisation. Voici les trois variables situées en haut du bloc JavaScript que vous pourriez vouloir modifier.
countryLabel: Le libellé qui s'affiche au-dessus du champ lorsque le Royaume-Uni est sélectionné. Il est défini surCountrypar défaut. Si vous préférezCountyou pour toute autre étiquette, modifiez cette valeur.countryPlaceholder: Le texte par défaut qui apparaît en première position dans la liste déroulante. Modifiez-le pour qu'il corresponde à votre nouvelle libellé.gbCountries: La liste des options affichées dans le menu déroulant. Par défaut, elle comprend l'Angleterre, l'Écosse, le Pays de Galles et l'Irlande du Nord. Vous pouvez ajouter, supprimer ou renommer des entrées selon vos besoins. Par exemple, si vous souhaitez plutôt recenser les comtés du Royaume-Uni, remplacez la liste par vos comtés de prédilection.
Lorsque l'utilisateur sélectionne un pays autre que le Royaume-Uni, l'extrait rétablit automatiquement le champ de saisie « État/Province/Région » et son libellé d'origine.
Et voilà ! Vous avez réussi à personnaliser le champ « Adresse » pour le schéma international lorsque le Royaume-Uni est sélectionné. Souhaitez-vous découvrir d'autres façons de personnaliser les champs de votre formulaire ? Consultez notre tutoriel sur la manière de choisir le bon format pour le champ « Adresse ».