Restreindre la livraison sur Shopify à certaines villes

Note : cet article a été rédigé il y a quelques années et n’est peut-être plus à jour.

Pour un projet e-commerce Shopify sur lequel j’ai travaillé récemment, mon client souhaitait restreindre la livraison de ses produits à seulement quelques codes postaux. Il souhaitait d’abord se concentrer sur la vente locale de ses produits avant de se lancer partout en France. Pas de chance, il est impossible de faire ça sur Shopify. J’ai néanmoins trouvé une solution, à l’aide de javascript.

Prérequis

La technique pour réaliser cela est d’ajouter du javascript sur les pages de paiement de Shopify. Ce javascript vérifiera que le code postal saisi fait bien partie des codes postaux autorisés. Pour apprendre à ajouter du javascript aux pages de checkout, je vous invite à lire mon article sur ce sujet : Ajouter du javascript aux pages de paiement Shopify.

Le code

Tout d’abord, on écrit une condition pour exécuter le code uniquement sur les pages de paiement :

if(typeof Checkout === 'object'){
if(typeof Checkout.$ === 'function') {
// Votre code
}
}

Ensuite, on détecte le clic sur le bouton submit, et on vérifie qu’on est bien sur la page de saisie des informations de livraison.
// Quand le formulaire est envoyé
document.querySelector("form").addEventListener("submit", function(e){

// on recupere l'attribut data-step de l'élement .step
var x = document.getElementsByClassName("step");
attribute = x[0].getAttribute("data-step");

if (attribute == "contact_information") {
// On est sur la page de saisie des infos
}
}); // submit

On peut ensuite vérifier que le code postal est valide :
// Array contenant les codes postaux autorisés
var zipcodes = ["92200", "92250", "92000"];

var y = document.getElementsByClassName('field__input--zip');
var zipcode = y[0].value; // le code postal envoyé

if(zipcode) {
// on a le code postal, on vérifie qu'il est valide
var j = -1;
for (i = 0; i < zipcodes.length; i++) {
if(zipcodes[i] == zipcode) {
j = zipcode;
}
}
if(j == -1) { // code postal invalide
e.preventDefault(); // on empêche l'envoi du formulaire
alert('Ce code postal n\'est pas dans notre zone de livraison.');
// on met la classe erreur sur le champ
var z = document.getElementsByClassName('field__input--zip')[0].parentElement.parentElement;
z.className += " field--error";

}
}

Et voilà ! Ce code empêchera l’utilisateur de passer à l’étape de paiement tant que le code postal de l’adresse de livraison n’est pas valide. Pour changer les code postaux valides, il suffit de mettre à jour l’array zipcodes.
Le code présenté ci-dessus est minimaliste, et il est aisé de le rendre plus complet en ajoutant des étapes de validation supplémentaires.
Inconvénients
Cette méthode est fonctionnelle et simple à mettre en oeuvre. Le plus gros inconvénient que j’ai pu noter, c’est que n’importe qui peut modifier ce code javascript en utilisant les outils du développeur sur son navigateur, et donc contourner les vérifications. Néanmoins, il n’y a aucun risque d’un point de vue sécurité : Shopify effectue toujours des contrôles côté serveur lors de chaque étape du processus de paiement. Et puis, le visiteur n’aurait que peu d’interêt de commander un produit qu’il ne peut se faire livrer.
Conclusion
Afin de conclure cet article, je vous remets le code source dans son intégralité :
if(typeof Checkout === 'object'){
if(typeof Checkout.$ === 'function') {

// Quand le formulaire est envoyé
document.querySelector("form").addEventListener("submit", function(e){

// on recupere l'attribut data-step de l'élement .step
var x = document.getElementsByClassName("step");
attribute = x[0].getAttribute("data-step");

if (attribute == "contact_information") {

// Array contenant les codes postaux autorisés
var zipcodes = ["92200", "92250", "92000"];

var y = document.getElementsByClassName('field__input--zip');
var zipcode = y[0].value; // le code postal envoyé

if(zipcode) {

// on a le code postal, on vérifie qu'il est valide
var j = -1;

for (i = 0; i < zipcodes.length; i++) {
if(zipcodes[i] == zipcode) {
j = zipcode;
}
}
if(j == -1) { // code postal invalide
e.preventDefault(); // on empêche l'envoi du formulaire
alert('Ce code postal n\'est pas dans notre zone de livraison.');
// on met la classe erreur sur le champ
var z = document.getElementsByClassName('field__input--zip')[0].parentElement.parentElement;
z.className += " field--error";
}
}
}
});
}
}

Vous avez trouvé une autre solution pour restreindre l’envoi en fonction des codes postaux ? N’hésitez pas à me le faire savoir !