Configuration API avancée
Pour obtenir des options de configuration plus avancées, utilisez la configuration API au lieu de l'assistant d'installation. Cela peut être utile pour mettre en œuvre des caractéristiques précises d'AdresseComplète en ce qui concerne la sélection des adresses.
Selon la présentation de formulaire ci-dessous :
<div class="input-line">
<label for="chercher">Chercher</label>
<input id="chercher" type="text" placeholder="Chercher" autofocus />
</div>
<div class="input-line">
<label for="ligne1">Ligne 1</label>
<input id="ligne1" type="text" placeholder="Ligne 1" />
</div>
<div class="input-line">
<label for="ligne2">Ligne 2</label>
<input id="ligne2" type="text" placeholder="Ligne 2" />
</div>
<div class="input-line">
<label for="ville">Ville</label>
<input id="ville" type="text" placeholder="Ville" />
</div>
<div class="input-line">
<label for="province">Province</label>
<input id="province" type="text" placeholder="Province" />
</div>
<div class="input-line">
<label for="code-postal">Code Postal</label>
<input id="code-postal" type="text" placeholder="Code Postal" />
</div>
<div class="input-line">
<label for="pays">Pays</label>
<input id="pays" type="text" placeholder="Pays" />
</div>
<div class="input-line">
<label for="ac_um">Unités multiples</label>
<input id="ac_um" type="text" placeholder="Unités multiples" />
</div>
<div class="input-line">
<label for="ac_ilrc">Commercial/Résidentiel </label>
<input id="ac_ilrc" type="text" placeholder="Commercial/Résidentiel" />
</div>
Une configuration API type pourrait ressembler à ceci :
<script type="text/javascript">
var fields = [
{ element: "chercher", field: "chercher", mode: pca.fieldMode.SEARCH },
{ element: "ligne1", field: "ligne1", mode: pca.fieldMode.POPULATE },
{ element: "ligne2", field: "ligne2", mode: pca.fieldMode.POPULATE },
{ element: "ville", field: "ville", mode: pca.fieldMode.POPULATE },
{ element: "province", field: "province", mode: pca.fieldMode.POPULATE },
{ element: "code-postal", field: "code-postal" },
{ element: "pays", field: "pays", mode: pca.fieldMode.COUNTRY }
{ element: "ac_um", field: "{AcMu}", mode: pca.fieldMode.POPULATE },
{ element: "ac_ilrc", field: "{AcIlrc}", mode: pca.fieldMode.POPULATE }
],
options = {
key: "AA11-AA11-AA11-AA11"
},
control = new pca.Address(fields, options);
</script>
Voici les sections de cette configuration :
- fields
La section où sont définis les champs d'AdresseComplète : « element » sert à définir l'identifiant de l'élément que vous voulez utiliser; « field » sert à définir le champ d'AdresseComplète que vous voulez associer à cet élément et « mode » vous permet de sélectionner le mode d'opération du champ. - options
C'est ici que vous définissez les options de commande d'AdresseComplète. - control
C'est ici que l'occurrence d'entité d'AdresseComplète est mise en œuvre à l'aide de pca.Address(fields, options)
Options
- key (obligatoire)
Il s'agit de la clé qui permet d'authentifier la demande. Celle-ci peut être copiée à partir de l'exemple de codes d'installation d'AdresseComplète. - name
Référence pour le contrôle, utilisé comme identification pour fournir le soutien ARIA. - populate
La valeur par défaut est « vrai ». Utilisé pour activer ou désactiver le contenu de tous les champs. - onlyInputs
La valeur par défaut est « faux ». Seuls les champs de saisie seront remplis. - autoSearch
La valeur par défaut est « faux ». La recherche sera déclenchée selon les points d'intérêt des champs. - prompt
La valeur par défaut est « faux ». Affiche un message demandant à l'utilisateur de donner plus de détails. - promptDelay
La valeur par défaut est « 0 ». Temps (en millisecondes) avant que le contrôle demande à l'utilisateur de donner plus de détails. - setCursor
La valeur par défaut est « faux ». Met à jour le champ de saisie avec le texte de la recherche en cours. - minSearch
La valeur par défaut est « 1 ». La recherche sera déclenchée selon les points d'intérêt des champs. - maxItems
La valeur par défaut est « 0 ». Nombre maximal d'éléments à présenter (0 = désactivé). - manualEntry
La valeur par défaut est « faux ». Si aucun résultat n'est trouvé, il est possible de cliquer sur le message pour désactiver la fonction de contrôle. - disableTime
La valeur par défaut est « 60000 ». Temps (en millisecondes) pour désactiver la fonction de contrôle aux fins de saisie manuelle. - suppressAutocomplete
La valeur par défaut est « vrai ». Supprime la fonction implicite de saisie semi-automatique du navigateur pour les champs de recherche. - setCountryByIP
La valeur par défaut est « faux ». Définit automatiquement le pays selon l'adresse IP de l'utilisateur. - culture
Fixe la culture pour les étiquettes, p. ex. « en-us », « fr-ca ». - languagePreference
Langue de préférence pour l'adresse sélectionnée, p. ex. « eng », « fra ».
Modes des champs
- pca.fieldMode.DEFAULT
Il s'agit du mode par défaut qui combine les commandes des modes des champs SEARCH et POPULATE. - pca.fieldMode.POPULATE
Ce mode définit l'élément du champ d'AdresseComplète lorsque l'utilisateur sélectionne une adresse. L'utilisation de ce champ ne déclenche pas une recherche par AdresseComplète. - pca.fieldMode.COUNTRY
Ce mode fournit un sélecteur de pays et peut être utilisé pour définir le pays dans lequel AdresseComplète effectuera sa recherche. - pca.fieldMode.SEARCH
Cette commande définit le champ en tant que champ de recherche d'AdresseComplète. La saisie dans ce champ déclenche une recherche par l'entremise d'une commande d'AdresseComplète. - pca.fieldMode.NONE
Ce champ sera ignoré. - pca.fieldMode.PRESERVE
Cette commande permet de verrouiller un champ de sorte qu'il ne peut être modifié par AdresseComplète.
Options avancées d'AdresseComplète
Déclencher une activité lorsqu'une adresse est trouvée
Vous pouvez faire en sorte qu'une activité soit déclenchée quand AdresseComplète trouve une adresse, p. ex. l'affichage d'un message de réussite. Pour ce faire, insérez le code suivant dans l'en-tête de votre page, puis ajoutez l'activité dans la section pertinente du code.
<script type="text/javascript">
addressComplete.listen('load', function(control) {
control.listen("populate", function (address) {
//add custom code here
});
});
</script>
Accéder au contenu d'une réponse de recherche d'une adresse
Vous pouvez accéder au contenu des réponses d'une demande d'AdresseComplète, puis le modifier si vous devez utiliser les divers éléments de l'adresse. Insérez le code ci-dessous dans votre page, puis modifiez-le pour accéder à la
<script type="text/javascript">
addressComplete.listen('load', function(control) {
control.listen("populate", function (address) {
document.getElementById("line1").value = address.Line1;
});
});
</script>
AdresseComplète modifie ou étend le formulaire
Pour certaines présentations et mises en page, AdresseComplète peut étendre des éléments de votre formulaire, surtout les éléments très courts. Pour éviter que cela se produise, insérez la commande d'AdresseComplète dans des balises DIV dont la largeur définie est la même que celle de vos champs. Cela peut être effectué en utilisant un code semblable à celui de l'exemple suivant :
<script type="text/javascript">
addressComplete.listen('ready', function() {
addressComplete.setWidth(300);
addressComplete.setHeight(300);
});
</script>
Modifier la couleur et la taille de la police du menu déroulant
Vous pouvez modifier la couleur et la taille de la police des caractères du menu déroulant de recherche d'AdresseComplète en ajoutant le code ci-dessous à l'en-tête de votre page :
<style type="text/css">
.pca .pcatext {
font: 15px Verdana;
color: #4682b4;
}
</style>
Activer et désactiver une commande de façon dynamique
Il se peut que vous vouliez que la recherche d'AdresseComplète ne s'active qu'à des moments précis sur certaines pages plutôt que d'être toujours active. Utilisez le code ci-dessous pour activer ou désactiver la commande.
<script type="text/javascript">
addressComplete.listen('ready', function() {
addressComplete.enable();
addressComplete.disable();
});
</script>
Définir le pays de façon dynamique
Il se peut que vous vouliez définir le pays de la commande d'AdresseComplète de façon dynamique en fonction des sélections de l'utilisateur ou de la page sur laquelle se trouve l'utilisateur. Cela remplace la fonction par défaut qui définit le pays selon l'adresse IP de l'utilisateur. Utilisez le code ci-dessous.
<script type="text/javascript">
addressComplete.listen('ready', function() {
addressComplete.setCountry("France");
});
</script>
Définir des lieux pour lesquels la livraison n'est pas offerte
S'il y a des régions pour lesquelles la livraison n'est pas offerte, vous pouvez faire en sorte que cette information soit communiquée à vos clients lorsqu'ils cherchent leur adresse. Le code ci-dessous montre comment y parvenir en recherchant une province dans les réponses fournies à partir de la recherche d'adresse et grâce à l'affichage d'un message d'erreur lorsque les résultats d'une recherche d'adresse présentent une adresse dans une province précise. Cette fonction peut être adaptée à d'autres éléments d'adresse, tels que des villes ou des codes postaux.
<script type="text/javascript">
addressComplete.listen('load', function(control) {
control.listen("populate", function (address) {
if ( address.ProvinceCode == "ON" || address.ProvinceCode == "QC") {
//EXAMPLE – do not deliver to ON or QC
alert("Sorry we do not deliver to this address");
}
});
});
</script>
Options de paramètres de contrôle supplémentaires
Vous pouvez remplacer les options de contrôle supplémentaires afin de modifier son style de manière plus approfondie.
<script type="text/javascript">
addressComplete.listen('options', function(options) {
options.bar = options.bar || {};
options.bar.showCountry = false;
options.bar.showLogo = true;
options.bar.logoLink = false;
});
</script>
Réglage de la langue du contrôle
Vous pouvez régler la langue de l'interface utilisateur de contrôle en tout temps pour l'adapter à la culture de la langue de la page en cours.
<script type="text/javascript">
addressComplete.listen('ready', function() {
addressComplete.setCulture("fr-CA");
});
</script>
Changer le texte des messages dans le contrôle
Vous pouvez définir le contenu des messages affichés pour les utilisateurs.
<script type="text/javascript">
pca.messages.en.DIDYOUMEAN = "Did you mean:";
pca.messages.en.NORESULTS = "No results found";
pca.messages.en.KEEPTYPING = "Keep typing your address to display more results";
pca.messages.en.RETRIEVEERROR = "Record could not be retrieved";
pca.messages.en.SERVICEERROR = "Service Error:";
pca.messages.en.COUNTRYSELECT = "Select Country";
pca.messages.en.NOLOCATION = "Sorry, we could not get your location";
pca.messages.en.NOCOUNTRY = "Sorry, we could not find this country";
</script>
Version actuelle : 2.3
