[1.7]Problème jQuery dans fichier tpl

[PhilippeBarre]

Bonjour,

 

 

Je me permet de poster un message ici car j'ai un problème que je ne comprend vraiment pas.

J'ai développé un petit module qui marche très bien en 1.6 et j'essaie actuellement de le rendre compatible 1.7.

 

Donc j'ai un hookDisplay qui appelle un de mes templates, appelons le template.tpl.

 

• En 1.6, ceci placé dans mon template.tpl fonctionne :

<script type="text/javascript">
    $(function(){
        alert('Hello !');
    });
</script>

J'ai bien mon alert() qui se lance.

 

• En 1.7 en revanche ce même script placé dans mon template.tpl ne fonctionne plus, et je reçois le message suivant dans la console : "ReferenceError: $ is not defined".

 

J'ai également essayé un :

$(document).ready(function(){
    alert('bonjour');
});

mais cela ne marche pas mieux, toujours le même message comme quoi $ n'est pas défini.

 

J'ai l'impression que le jQuery n'est chargé qu'après l'execution de mon script, je ne sais plus trop quoi essayer.

 

[EDIT] : Je suis persuadé que le problème vient du fait que mon script est exécuté avant l'appel de jQuery, en effet :

• <script type="text/javascript" src="http://localhost/prestashop_1_7_1_1/js/jquery/ui/jquery-ui.min.js" ></script>
  
  <script type="text/javascript">
      $(function(){
          alert('bonjour');
      });
  </script>
  

  ceci marche tandis que :

• <script type="text/javascript">
      $(function(){
          alert('bonjour');
      });
  </script>
  
  <script type="text/javascript" src="http://localhost/prestashop_1_7_1_1/js/jquery/ui/jquery-ui.min.js" ></script>
  

  ce 2e cas ne fonctionne pas et c'est dans ce cas que je suis avec mon template.tpl.

 

Quelqu'un saurait-il comment résoudre ce problème svp ?

 

 

Merci d'avance,

Philippe.

Edited May 24, 2017 by PhilippeBarre (see edit history)

[Alexandre Carette]

Salut Philippe,

 

quand tu désactive l option "déplacer les javascript à la fin" ce la marche ?

 

cordialement

[PhilippeBarre]

Salut,

 

Merci de ta réponse

 

Es-tu sûr que cette option existe encore en 1.7 ? Je la vois en 1.6 dans "paramètres avancés" -> "performance" mais pas en 1.7..

 

 

Je ne comprend pas bien comment jQuery est implémenté dans Presta 1.7, en 1.6 on pouvait voir :

<script type="text/javascript" src="/prestashop/js/jquery/jquery-1.11.0.min.js"></script>

être chargé dans le code de la page, mais pas en 1.7, on ne trouve que jQuery UI :

<script type="text/javascript" src="http://localhost/prestashop_1_7_1_1/js/jquery/ui/jquery-ui.min.js" ></script>

ce qui n'est pas tout à fait pareil si j'ai bien compris.

 

Philippe.

[J. Danse]

En 1.7, jQuery est ajouté par le bundle.js du thème. Qui intervient en effet à la fin.

 

Il est déconseillé d'utiliser du JavaScript au sein des templates ; le mieux étant d'utiliser un fichier JavaScript à cet effet.

[BeComWeb]

Pour compléter la réponse de J. Danse il faut que tu utilise la fonction registerJavascript dans le fichier principal du module.

 

Un exemple (hors contexte)

public function hookdisplayHeader($params)
{
  $this->context->controller->registerJavascript('my-module', 'modules/' . $this->name . '/views/js/my-module.js', array(
    'position' => 'bottom',
     'priority' => 150
   ));
}

[vcopleutre]

Un rien à la bourre mais je viens d'avoir le problème et ça peut aider :

 

Si tu n'as pas le choix car ton js fait appel à des variables qui passent dans tes tpl (allo avis vérifiés, on pense à vous, merci de mettre à jour votre module) et bien tu peux mettre en place un petit timeout le temps que jQuery soit chargé.

setTimeout(function(){

//Exemple de code qui appelle les variables tpl chez avisverifies
maxpage = Math.ceil(counted_reviews / {/literal}{$avisverifies_nb_reviews|escape:'htmlall':'UTF-8'}{literal}) ;

}, 2000); //wait 2s for jQuery to be loaded

Attention, ça veut dire pas d'activation du code possible avant 2s ! Si ton jQuery est pas chargé d'ici là bah dommage !

Il faut aussi penser aux interactions de l'utilisateur (dans ce cas, un bouton)

[tomboul]

@J. Danse, quelle est la raison pour déconseiller de mettre du javascript dans les TPL ?
C'est bien dommage car si on met un traitement javascript dans un TPL, c'est parce qu'il est spécifique au contenu de ce TPL.

Si non si on attache un fichier javascript dans le displayHeader, sera t-il chargé inutilement sur sur toutes les pages du site ?

du coup j'ai fait un code mais idem ça bouffe de la ressource !!!
 

function waitJq(FUNC) {
	setTimeout(function(){ 
		if($ != undefined) FUNC()
		else waitJq(FUNC);
		return;
	}, 20);
}

waitJq(function() {
  /// jquery code 
  //....
})

 

Edited May 14, 2019 by tomboul (see edit history)

[Janett]

1 hour ago, tomboul said:

Si non si on attache un fichier javascript dans le displayHeader, sera t-il chargé inutilement sur sur toutes les pages du site ?

Pas obligatoirement, dans le hook, vous pouvez définir des conditions pour que l’inclusion du fichier JavaScript ne se fasse que sur un controller en particulier par exemple, entre autres.