Jump to content
PhilippeBarre

[1.7]Problème jQuery dans fichier tpl

Recommended Posts

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 by PhilippeBarre (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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
   ));
}
  • Like 1

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

@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 by tomboul (see edit history)

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More