J’ai eut beaucoup de retours ces dernières semaines sur le non-fonctionnement de mon module de captcha sur les thèmes différents de default-boostrap ( celui par défaut ).
Ceci était du au fait que j’avais stocké directement dans le code des sélecteurs css spécifiques à ce thème.

Vous pouvez le voir sur l’extrait de code suivant :

<script type="text/javascript">
 $(document).ready(function(){
 //Add div where the captcha will be displayed
 $(".submit").before("<div id=\"captcha-box\"></div>"); // <= sélecteur stocké en dur
 
 //Manage form submit 
 $("#submitMessage").click(function(){ // <= sélecteur stocké en dur
 ...
 </script>

La nouvelle version qui sortira dans les prochains jours corrigera ce problème, en permettant d’éditer ces informations directement depuis l’administration.
Dans un nouvel onglet « Paramètres avancés »

captcha-configuration-avancee

Récupération des sélecteurs de votre thème

Attention car la récupération des éléments est assez technique.
Si la notion vous est totalement étrangère je vous invite à consulter la documentation sur ce sujet.

Le plus pratique est d’utiliser les options de développement de votre navigateur  qui s’activent via la touche F12
Une fois ceux-ci activés.

Sélecteur du bouton de soumission du formulaire :
Faites un clic droit sur le bouton de soumission du formulaire et cliquer sur « Examiner l’élément » ( Firefox ) ou « Inspecter » (chrome)
Vous devrez obtenir une capture de ce genre :

Inspecteur bouton formulaire

Dans le cas de cet capture le sélecteur à saisir est #submitMessage car le bouton de soumission a l’id égal à submitMessage.

 

Sélecteur insertion bloc captcha :

Celui-ci est encore un peu plus complexe, car il faut définir l’élément css AVANT LEQUEL nous souhaitons ajouter le bloc de captcha.
Il faut également s’assurer que le bloc sera bien entre les balises <form> et </form> pour que les données soient bien envoyées.

Cela correspond à cette partie du javascript :

$(".submit").before("<div id=\"captcha-box\"></div>");

Dans la configuration par défaut le sélecteur est .submit le bloc du captcha et donc ajouté avant la div « submit » comme vous pouvez voir sur la capture :

Captcha inspecteur container

Pour ceux qui ne sont pas trop à l’aise avec cet élément, il est également possible de rajouter à l’emplacement ou vous souhaitez afficher le captcha directement le code :

<div id="captcha-box"></div>

Pour tous les autres détails de ce module merci de consulter la page spécifique : Module captcha Prestashop