Jean ROCHARD
Je partage ma passion de Wordpress dans des articles techniques sur les plugins, thèmes, nouveautés geek et optimisation SEO "on-site".
Jean ROCHARD

@jean_rochard

Chez Terre Digitale, on mange du Wordpress dès le petit-dej'.
Petit guide pour mettre en place les Facebook Instant Articles à partir de vos posts Wordpress : https://t.co/lSbzdM6z9j - 7 mois ago

Cet article aux airs techniques s’adresse aux e-commerçants utilisant Woocommerce et aux prises avec un bug difficile à corriger, celui du « unexpected token » généré lors d’une commande. En effet, depuis la version 2.4 de Woocommerce, certaines règles de développement ont été revues et un site qui fonctionnait bien à pu voir son processus de commande bloqué du jour au lendemain.

Voici donc comment résoudre ce bug (malheureusement répandu) et retrouver le chemin d’une boutique 100% fonctionnelle.

Origine du bug unexpected token

Ce bug est lié à l’appel d’une de vos passerelles de paiement. En effet, lorsque votre client appuie (enfin) sur le bouton « commander » pour finaliser le processus, Woocommerce réalise des appels AJAX vers le serveur dont l’un avec le paramètre « wc-ajax=checkout ». Si le serveur ne renvoie pas une réponse JSON (c’est un format de réponse) valide ; alors vous aurez cette erreur « unexpected token ». Avant la version 2.4, Woocommerce était beaucoup plus souple à ce sujet…

unexpectedtoken

Vous n’avez peut être pas bien compris mon explication, mais ce n’est pas grave ; il faut juste retenir que le bug vient :

  • soit d’un plugin de passerelle de paiement
  • soit de votre thème WordPress qui ajoute une couche de code lors des appels aux passerelles

Avant de poursuivre, je vous conseille donc de procéder à la mise à jour de votre site : thème et plugins liés à votre ecommerce (Woocommerce, gateway de paiement…).

Revérifiez si le bug est toujours présent et si c’est le cas, lisez la suite !

Trouver le coupable

Pour trouver qui est à l’origine du bug, voici comment procéder dans un premier temps.

  1. Si le paiement par chèque et par virement natifs de Woocommerce ne fonctionnent pas non plus, vous pouvez être sûrs que le soucis vient de votre thème. Vous pouvez alors contacter le développeur pour qu’il corrige au plus vite le soucis.
  2. Si ces paiements fonctionnent, faites des tests avec les autres moyens de paiement pour identifier la passerelle en cause. Vous pourrez la désactiver en attendant une correction de la part de l’auteur que vous devez aussi contacter à ce sujet.

Dans la vraie vie, contacter l’auteur d’un plugin ou d’un thème n’est pas toujours chose facile et vous souhaitez peut être trouver une solution vous même rapidement. Je vous propose un moyen pour cela. Attention, il y a des chances pour que vous soyez obligés de modifier du code source et que vos corrections soient donc écrasées lors d’une prochaine mise à jour. Parions cependant que la mise à jour intégrera la correction en question ; sinon vous en serez quittes pour recommencer l’opération.

Debugger le processus de commande

Pour aller plus loin, nous allons donc simuler une commande. Utilisez le navigateur Chrome, puis mettez un produit dans le panier,  allez jusqu’à la dernière page, sélectionnez la passerelle de paiement incriminée et ne touchez pas encore à ce maudit bouton « commander ».

Avec le clic droit, ouvrez l’inspecteur d’éléments (tout en bas du menu contextuel).

Cliquez alors sur l’onglet « Réseau » puis « HXR » puis cliquez enfin sur le bouton « Commander ». Vous verrez alors s’afficher en dessous les appels AJAX dont « wc-ajax=checkout ». Si vous ne le voyez pas immédiatement, recommencer le clic sur le bouton « commander ».

Une fois l’appel AJAX identifié, cliquez dessus et regardez le code correspondant (onglet « preview »). Et là, au lieu d’un code commençant par une accolade (ce qui serait une réponse JSON valide), vous voyez autre chose, comme par exemple ci dessous une balise « style ». Horreur, enfer et damnation !

debug_unexpectedtoken

Maintenant que vous avez identifié ce code, il va falloir retrouver la ligne dans les sources. Cherchez alors dans le plugin ou le thème, en fonction de ce que vous savez du bug.

Par exemple, pour le cas ci dessus, cette ligne est renvoyée dans un fichier du thème (functions_custom.php). Je l’ai retrouvé en me connectant en SSH à mon hébergement, en ma plaçant dans le répertoire wp-content et en faisant une instruction de type  : grep -r « <style>#package » *

Sinon, vous pouvez, de façon plus empirique, télécharger vos fichiers sur votre ordinateur, et lancer une recherche sur le contenu de vos fichiers.

J’ai ainsi repéré directement la ligne de code source ; et il n’y a plus qu’à la commenter (ou à surcharger la fonction au niveau de vote thème enfant si c’est possible ; mais cela demande plus de compétences de développement).

source_unexpectedtoken

Cet article prend sa source ici, et a pour auteur Mike Jolley, développeur de wp-job-manager chez Automattic.