Dans le but d’améliorer l’expérience utilisateur des internautes, l’aide au remplissage des formulaires de façon automatique peut être intéressante.
Pour cela Google Place autocomplete permet de remplir automatiquement les champs d’adresses (rue, ville, code postal, pays) à partir d’une proposition de Google.
Pour commencer dans votre page html, faire appel à l’API Javascript Places Autocomplete
|
1 |
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=votre_cle_api" type="text/javascript"> |
N’oubliez pas de remplacer votre_cle_api par votre api key que vous pouvez obtenir ici.
Maintenant, dans votre fichier HTML, il faut créer un formulaire comme celui-ci
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<form> <div> <label>Adresse</label> <input id="user_input_autocomplete_address" placeholder="Votre adresse..."> </div> <div> <label>Numéro</label> <input id="street_number" name="street_number" disabled> </div> <div> <label>Route</label> <input id="route" name="route" disabled> </div> <div> <label>Code postal</label> <input id="postal_code" name="postal_code" disabled> </div> <div> <label>Ville</label> <input id="locality" name="locality" disabled> </div> <div> <label>Pays</label> <input id="country" name="country" disabled> </div> <div> <label>Latitude</label> <input id="latitude" name="latitude" disabled> </div> <div> <label>Longitude</label> <input id="longitude" name="longitude" disabled> </div> </form> |
L’id de chacun des champs a son importance pour que toutes les informations de l’api soient correctement replacées dans les champs appropriés.
Maintenant, un peu de javascript pour faire la liaison entre l’api et le formulaire.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<script type="text/javascript"> // Lie le champs adresse en champs autocomplete afin que l'API puisse afficher les propositions d'adresses function initializeAutocomplete(id) { var element = document.getElementById(id); if (element) { var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] }); google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged); } } // Injecte les données dans les champs du formulaire lorsqu'une adresse est sélectionnée function onPlaceChanged() { var place = this.getPlace(); for (var i in place.address_components) { var component = place.address_components[i]; for (var j in component.types) { var type_element = document.getElementById(component.types[j]); if (type_element) { type_element.value = component.long_name; } } } var longitude = document.getElementById("longitude"); var latitude = document.getElementById("latitude"); longitude.value = place.geometry.location.lng(); latitude.value = place.geometry.location.lat(); } // Initialisation du champs autocomplete google.maps.event.addDomListener(window, 'load', function() { initializeAutocomplete('user_input_autocomplete_address'); }); </script> |
Et voilà, une façon simple de proposer aux internautes une aide à la saisie pour la partie adresse.
Source : https://www.lewagon.com/blog/tuto-google-place-autocomplete
Le genre de petit script qui peut vraiment aider les sites e-commerce ! Merci pour l’astuce !
Un problème: les champs ne sont pas effacés entre chaque recherche. Si par exemple l’utilisateur a commis une erreur et modifie son adresse et si cette nouvelle adresse ne contient par exemple pas de numéro de rue, le précédent numéro va rester dans les champs