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

18 février 2017

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 :

&lt;input type="text" id="zipcode" placeholder="Saisissez votre code postal" name="zipcode"&gt;

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 :

&lt;form action="/cart" method="post" id="checkoutButton"&gt;
&lt;button type="submit" name="checkout"&gt;Commander&lt;/button&gt;
&lt;/form&gt;

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

J’ai testé : Scalecity, la formation Growth & IA

15 août 2023

Scalecity introduit le monde du Growth Hacking. Pleinement concerné de par mon activité à l’Aéroport de Lyon, j’ai décidé de me lancer dans cette formation.

— Lire la suite