Restreindre la livraison sur Shopify à certaines villes

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 !