Tuto : Comment ajouter un champ d’adresse auto-complète à vos formulaires dans Shopify

vignette
L’ajout de la saisie automatique de l’adresse sur vos formulaires améliore considérablement l’expérience de l’utilisateur (UX).

Autocomplete permet aux utilisateurs de sélectionner rapidement une adresse parmi les suggestions générées en temps réel au fur et à mesure de leur saisie.

Partout où vous pouvez améliorer l’expérience utilisateur, c’est l’occasion de vous différencier de vos concurrents et c’est exactement ce que vous pouvez faire en ajoutant la saisie automatique des adresses à vos formulaires.

Cet article vous montre comment ajouter la saisie automatique des champs d’adresse dans Shopify à l’aide de l’API Google Places. Ce faisant, vous améliorez l’expérience de l’utilisateur tout en vous assurant que les adresses soumises sont valides en utilisant la puissance de Google Maps.

Vous trouverez ci-dessous le code et le style nécessaires pour ajouter la fonction de remplissage automatique à vos formulaires d’adresse. Amusez-vous bien !

Etape 1 : Ajouter le nom d’ID dans le champ d’adresse
Ajouter le nom d’ID « Adresse de recherche » dans le champ d’adresse
<input type=« text » id=« search-address » value=«  »>
 
Etape 2 : Ajouter le code JavaScript dans votre boutique en ligne

Le service Lieux est une bibliothèque autonome, distincte du code principal de l’API JavaScript de Maps. Pour utiliser les fonctionnalités contenues dans cette bibliothèque, vous devez d’abord la charger à l’aide du paramètre libraries de l’URL bootstrap de l’API Maps :

 
 
 
 
 
 
 
<script src=« //maps.googleapis.com/maps/api/js?key=GOOGLE-API-KEY&libraries=places&callback=PlaceAutocompleteSearch » async defer></script>
<script>
  function PlaceAutocompleteSearch() {
    var input = document.getElementById(‘search-address’);
    var autocomplete = new google.maps.places.Autocomplete(input);
  }
</script>

Vous devez inclure une clé API avec chaque demande d’API JavaScript Maps. Dans l’exemple suivant, remplacez GOOGLE-API-KEY par votre clé API (la chaîne cryptée). Suivez ces étapes pour obtenir une clé API Google :

Accédez à la console de la plate-forme Google Cloud.

Dans le menu déroulant Projet, sélectionnez ou créez le projet pour lequel vous souhaitez ajouter une clé API.
Dans le menu Navigation, sélectionnez APIs & Services > Credentials.
Sur la page Informations d’identification, cliquez sur Créer des informations d’identification > Clé API.
La boîte de dialogue de création de clé API affiche votre clé API nouvellement créée (une chaîne cryptée).
Cliquez sur Fermer.

La nouvelle clé API est répertoriée dans la page Informations d’identification sous Clés API.

(N’oubliez pas de restreindre la clé API avant de l’utiliser en production.)

C’est fini pour vous. Nous espérons que cet article vous a aidé à apprendre comment ajouter la saisie automatique des champs d’adresse dans Shopify.

Poster un Commentaire

Laisser un commentaire

  S’abonner  
Notifier de