WooCommerce, la solution phare de eCommerce pour WordPress, permet de vendre dans à peu près tous les pays du monde. C’est bien mais parfois, facturer dans un pays et expédier dans un autre peut être contraignant.

Je vous livre ici une solution pour synchroniser l’adresse de livraison à partir de l’adresse de facturation.

L’objectif est que la livraison ne puisse être effectuée dans un autre pays que celui de facturation. La valeur du pays de livraison doit prendre la valeur du pays de facturation au chargement de la page et lorsque le client modifie le pays de facturation. Il ne doit pas pouvoir modifier le pays de livraison. Un contrôle des champs doit être effectué en php après soumission du formulaire de commande.

synchro-pays-woocommerce

Le javascript

Nous allons créer un fichier js nommé abw_checkout.js qui sera placé dans un dossier js du thème (enfant).

[php]jQuery(document).ready(function($){
// On force le select en select2 car il peut ne pas encore l’être
$(‘#shipping_country’).select2();
$(‘#billing_country’).select2();
// Lecture seule pour ne pas permettre la modification
$(‘#shipping_country’).select2(‘readonly’, true);
$(‘#billing_country’).on(‘change’, function() {
$(‘#shipping_country’).select2("data", $(‘#billing_country’).select2(‘data’));
$(‘#shipping_country’).trigger(‘change’);
});
});[/php]

WooCommerce améliore l’affichage des champs de sélection (listes déroulantes) avec une solution qui s’appelle select2, elle remplace depuis quelques versions une autre solution qui était chosen. L’amélioration porte sur l’aspect visuelle d’une part mais également d’autre part sur l’ajout d’un champ de recherche directement dans la liste de choix des pays, très pratique lorsqu’ils sont nombreux.

La version intégrée sur WooCommerce 2.3.13 est select2 3.5.2. Une nouvelle version 4.0 récente sera certainement intégrée dans une future version de WooCommerce, à priori pas dans la 2.4 à venir.

Le javascript nécessaire est simple, il faut dans un premier temps forcer select2 sur la liste déroulante du pays de livraison car si la case “Envoyer à une adresse différente ?” n’est pas cochée, le pays de livraison n’est pas affiché et il n’est pas encore géré par select2. De même pour le pays de facturation, si le thème décompose la commande en plusieurs onglets par exemple, il se peut que la liste déroulante ne soit pas encore prise en compte par select2. Le pays ne pourrait pas être synchronisé dès le chargement de la page et la liste serait modifiable par le client.
C’est justement ce que l’on fait ensuite, on demande à la liste d’être en “lecture seule”. Normalement le paramètre readonly n’existe pas pour les listes déroulantes (select), elles peuvent être uniquement désactivée, mais dans ce cas la valeur ne peut pas être récupérée par le formulaire. Select2 gère son propre readonly sur les listes déroulantes.
Ensuite, sur une action onchange, dès que le client change de pays, nous affectons les données d’une liste à l’autre. Mais ne c’est pas suffisant car le changement de pays ne gère pas les champs complémentaires éventuels. Certains pays font en effet apparaitre un champ “Province”, “État / Comté”, “Région”, pour forcer l’actualisation de ce champ, nous “simulons” un changement de la liste des pays de livraison avec la fonction trigger() de jQuery.

L’ajout du javascript

Rien de particulier, nous insérons notre fichier abw_checkout.js proprement dans le footer, uniquement si nous sommes dans la page de commande, en précisant les dépendances à jQuery et Select2.

[php]function abw_scripts_checkout() {
// Synchronisation des pays facturation/livraison sur la page commande
if(is_checkout()):
wp_register_script(‘abw_checkout’, get_stylesheet_directory_uri().’/js/abw_checkout.js’, array(‘jquery’,’select2′), false, true);
wp_enqueue_script(‘abw_checkout’);
endif;
}
add_action(‘wp_enqueue_scripts’, ‘abw_scripts_checkout’);[/php]

Le contrôle en php

Le javascript s’exécute sur le navigateur du client, pour garantir qu’une commande ne puis pas être passée avec des pays de facturation et livraison distincts, il faut tester les valeurs en php après soumission du formulaire. WooCommerce propose l’action woocommerce_checkout_process pour effectuer les tests sur les valeurs soumises. Nous vérifions que l’envoi sur une adresse différente de la facturation est demandé.

[php]add_action(‘woocommerce_checkout_process’, ‘abw_checkout_field_process’);
function abw_checkout_field_process() {
if($_POST[‘ship_to_different_address’]&&$_POST[‘billing_country’]!=$_POST[‘shipping_country’])
wc_add_notice( __("You can not select a country of delivery which is different from the billing country"), ‘error’ );
// Vous ne pouvez pas choisir un pays de livraison qui soit différent du pays de facturation
}[/php]

Voilà, j’espère que cela pourra servir à certains d’entre vous…