Shopify : pré-remplir les champs d’adresse de livraison des pages de paiement

Lors du développement de Gojji, un site web de livraison de repas sains et bios à domicile, je devais pré-remplir l’adresse de livraison de l’internaute dans les pages de paiement de Shopify. Bien que Shopify ne permette pas de faire cela de manière native, il existe une alternative assez simple, qui nécessite néanmoins l’utilisation d’une touche de Javascript / jQuery.

Récupérer l’adresse de l’utilisateur

Pour récupérer l’adresse de l’utilisateur, on met en place dans le code HTML un formulaire permettant de recueillir l’adresse de l’utilisateur. Un exemple simple qui demande le code postal de l’utilisateur :

<input type="text" id="zipcode" placeholder="Saisissez votre code postal" name="zipcode">

Il faudra mettre en place plusieurs champs pour récupérer l’ensemble des informations de l’internaute.

La deuxième étape consiste à récupérer, à l’aide de jQuery, l’information saisie dans ce champ texte. L’exemple ci-dessous stocke le code postal saisi dans une variable, à chaque fois que l’utilisateur sort du champs texte.

$(function() {
$('#zipcode').on('focusout', function() {
var zipcode = $(this).val();
});
});

Transmettre ce code postal au checkout de Shopify

Pour transmettre cette valeur aux pages de paiement, et pré-remplir les champs, il faut ajouter des paramètres dans l’URL des pages de paiement. Lors du chargement de ces pages de paiement, les valeurs des paramètres de l’URL seront pré-remplies dans les champs, à condition de respecter une convention de nomage stricte.

Pour rappel, le code HTML pour générer un bouton d’accès au checkout est le suivant :

<form action="/cart" method="post" id="checkoutButton">
<button type="submit" name="checkout">Commander</button>
</form>

Pour pré-remplir les champs d’adresse des pages de paiement, il suffit de changer l’attribut action de la balise <form>. Par exemple, pour transmettre le code postal :

action="/cart?checkout[shipping_address][zip]=75009"

Le champs « code postal » de la page d’adresse du checkout de Shopify sera surchargé avec la valeur « 75009 ». Une touche de jQuery permet de modifier la valeur action du formulaire à la volée, en fonction des valeurs saisies par l’utilisateur.

Liste des attributs disponibles

Il est possible de passer un attribut par type de champ dans le lien vers le checkout. Liste non-exhaustive :

  • checkout[email]
  • checkout[shipping_address][first_name]
  • checkout[shipping_address][last_name]
  • checkout[shipping_address][company]
  • checkout[shipping_address][address1]
  • checkout[shipping_address][address2]
  • checkout[shipping_address][city]
  • checkout[shipping_address][country]
  • checkout[shipping_address][phone]
  • checkout[shipping_address][zip]

Exemple de pré-remplissage de plusieurs champs

Pour pré-remplir plusieurs champs en un seul coup, il faut passer plusieurs paramètres dans l’attribut action du formulaire permettant d’aller au checkout :

action="/cart?checkout[shipping_address][address1]=3 Rue de la Tour&amp;amp;checkout[shipping_address][city]=Paris&amp;amp;checkout[shipping_address][zip]=75116"

Le clic sur le bouton généré redirigera vers les pages de paiement, et les 3 champs « adresse », « code postal » et « ville » seront pré-remplis.

Il est possible, en théorie, de pré-remplir n’importe quel champ du checkout de Shopify de cette façon.



Autres articles à découvrir



Remplissage automatique des codes reçus par SMS

Mettez en place sur votre site web le remplissage des codes reçus par SMS, à l’aide d’un simple attribut HTML.

Comment devenir un développeur web éco‑responsable ?

Quand on est développeur, il est possible d’agir à notre échelle et de faire certains gestes simples, permettant de diminuer l’impact écologique de nos sites web.

Astuce Mac : masquer le fil d’actualités Facebook sur Safari

J’ai trouvé une astuce pour masquer uniquement le fil d’actualités de Facebook. Et l’astuce est toute simple ! Suivez le guide.




Un projet à soumettre,
ou une question à me poser ?

×

Rentrons en contact

Un projet à soumettre, une demande de devis ou simplement une question? Contactez-moi et nous discuterons ensemble de vos objectifs afin de cerner vos attentes. Je vous guiderai afin de trouver les solutions adaptées à vos besoins.