[Résolu] Code Javascript dans un module, pas visible dans le leftColumn (?)

[kermit45]

Bonjour,

 

 

Je suis en train de créer un petit module graphique pour ajouter à ma boutique (une vue de la tour Eiffel avec de la neige qui tombe : animation Javascript pour les flocons qui tombent) mais ça ne marche pas trop. Enfin ça marche quand je l'accroche dans le header apparemment, mais pas dans le leftColumn.

 

 

J'ai donc créé un dossier 'toureiffel' pour mon module, dedans j'ai placé un toureiffel.php et un toureiffel.tpl comme recommandé ; ainsi que les logo.gif, etc... J'ai créé un dossier 'css' et un dossier 'js' dans lesquels j'ai mis respectivement mon fichier de style css et mon code javascript (le code avec les flocons qui tombent, celui que je voudrais faire marcher partout -dans le header et le leftColumn-).

 

Dans mon fichier toureiffel.php principal j'ai créé les fonctions hookHeader et hookLeftColumn avec entre autres les appels

Tools::addCSS(($this->_path).'css/styletoureiffel.css', 'all');
Tools::addJS(($this->_path).'js/toureiffel.js', 'all');

 

pour inclure les fichiers css et et js.

 

(Dans le toureiffel.tpl j'ai une balise <canvas> sinon pour afficher mon animation)

 

 

J'ai donc lancé le tout en installant mon module via le backoffice et lorsque je regarde ma boutique, je réalise que ma petite toureiffel s'est bien installée dans le 'header' et dans le 'leftColumn', mais la neige tombe seulement dans le header (???). Apparemment le code Javascript n'a pas été exécuté dans le leftColumn.

 

Voilà, est-ce que mon explication est claire ? Avez-vous des tuyaux et idées pour mon problème ?

 

Je ne suis pas sûr aussi que c'est la meilleure façon de procéder pour inclure une animation dans Prestashop, de faire un fichier javascript et de l'accrocher au header et leftColumn avec <canvas> comme j'ai fait ; à mon avis il y a 1000 possibilités, si vous avez d'autres idées je suis preneur aussi :-)

 

Merci !

 

 

Kermit45

Edited March 23, 2015 by kermit45 (see edit history)

[Agostini Julien]

Bonjour,

 

La fonction "addJS()" de la classe "Tools" ne comporte qu'un seul paramètre l'appel doit donc s'effectuer comme ceci : Tools::addJS(($this->_path).'js/toureiffel.js');

Sans informations complémentaires de votre part il va être difficile de vous aider plus que ça...

 

Bonne continuation

[kermit45]

Merci Julien ;-) J'ai essayé la fonction avec un seul paramètre, ça ne marche pas mieux.

 

Quelles informations complémentaires ? Je ne vois pas trop ce que vous voulez dire...

 

Je n'arrive pas à faire marcher le code Javascript lorsque j'accroche mon module dans le leftColumn apparemment.

Enfin c'est la conclusion que j'en tire. A mon avis il faut garder le code Javascript aux alentours du header et pas l'appeler de n'importe où.

 

A bientôt

[Agostini Julien]

Bonjour,

 

Avez-vous essayez d'intégrer votre script dan le fichier ".tpl" de votre accroche à la colonne de gauche grâce aux balises Smarty "{literal}{/literal}" ?

Edited March 6, 2015 by AgostiniJulien (see edit history)

[kermit45]

Là c'est un peu du Chinois ce que vous me racontez. Mais j'ai peut-être été flou dans mes explications.

 

J'ai inclus mon code par la fonction addJS du fichier toureiffel.php. Ci-dessous un extrait du code de ce fichier toureiffel.php :

 

    public function hookHeader($params) {
        global $smarty;
        Tools::addCSS(($this->_path).'css/styletoureiffel.css', 'all');
        Tools::addJS(($this->_path).'js/toureiffel.js');
        return $this->display(__FILE__,'toureiffel.tpl');
    }
        
        
    public function hookLeftColumn($params){
        global $smarty;
        Tools::addCSS(($this->_path).'css/styletoureiffel.css', 'all');
        Tools::addJS(($this->_path).'js/toureiffel.js');
        return $this->display(__FILE__,'toureiffel.tpl');
    }

 

 

Voilà si je vous comprends bien je dois essayer d'inclure le code Javascript directement dans le fichier .tpl, c'est ça ? Mais lequel fichier .tpl ?

J'ai essayé de l'inclure à toureiffel.tpl  du module (avec les balises smarty {literal}{/literal}), ça ne marche pas.

 

J'ai essayé à header.tpl  du template (dossier  themes/maboutique/header.tpl) ça ne marche pas.

 

 

Je ne vois pas bien comment faire .

[Agostini Julien]

L'appel de vos fichier "CSS" et "JS" ne doit être effectué seulement dans la fonction "hookHeader".

 

Si je comprend bien le même fichier "toureiffel.tpl" est appelé dans votre "header" et dans la colonne de gauche.

Pourriez-vous nous montrer un extrait de votre fichier "toureiffel.js" ?

Edited March 6, 2015 by AgostiniJulien (see edit history)

[kermit45]

Ci-dessous mon fichier javascript toureiffel.js. C'est pas très propre tout ça et pour l'instant il n'y a qu'un seul flocon, c'est un peu des essais que je fais  . Pareil , j'essaie d'accrocher dans le leftColumn pour voir comment faire mais au final elle sera plutôt dans le header la tour Eiffel. Je vais améliorer le code plus tard pour créer plusieurs flocons "imbriqués", etc, etc...

 

 

toureiffel.js :

----------------

 

window.onload = function() {
    
    var canvas = document.getElementById('mycanvas');
        if(!canvas) {
            alert("Impossible de récupérer le canvas");
            return;
        }

    var context = canvas.getContext('2d');
        if(!context) {
            alert("Impossible de récupérer le context du canvas");
            return;
        }
    
    var y = 5;
    
    function animate() {
    if (y>=160) y=5;
    context.beginPath();
    context.clearRect(20,y,5,5);
    context.fillRect(20,y+3,5,5);
    context.closePath();
    y = y+3;
    }
    
    setInterval(animate,100);
    
}

[Agostini Julien]

Vous faites appel à votre "canvas" via un "id" sauf qu'un "id" doit être unique ! Hors il est appelé dans le "header" et dans la colonne de gauche :

document.getElementById('mycanvas');

Celui-ci devrait avoir une "class" de manière à ne pas entrer en conflit avec votre fichier "toureiffel.tpl" dans le "left_column" exemple :

<!-- toureiffel.tpl -->
<div class="mycanvas">
//code
</div>

<!-- toureiffel.js -->
var canvas = document.getElementsByClassName('mycanvas');

[coeos.pro]

1- as tu essayé avec

$this->context->controller->addJS($this->_path.'js/toureiffel.js');

 

2- c'est à mettre dans le hook Header

[kermit45]

Julien, merci de votre réponse. Mais j'ai l'impression que vous conseillez de passer du HTML5 au JQuery. Il est compliqué de faire une animation avec des flocons de neige j'ai l'impression, si on ne maîtrise pas la "zone" de travail des pixels (donc la balise html5 <canvas> + le Javascript et non les <div> + le Javascript (---> JQuery ?)). Enfin je ne sais pas, je vais essayer de voir et de trouver une solution adaptée et pas trop compliquée.

 

 

Bonjour coeos.pro, merci de tes conseils. J'ai essayé ce que tu m'as dit aussi, mais je n'y suis pas trop arrivé. J'obtiens le même résultat en mettant $this->context->controller->addJS($this->_path.'js/toureiffel.js');   qu'en utilisant l'objet Tools (le tout dans le header) ; enfin il faut que j'étudie la chose un peu en détail je crois.

 

 

Bonne journée, je vous tiens au courant de mes avancées dès que possible

Edited March 7, 2015 by kermit45 (see edit history)

[Agostini Julien]

Bonjour,

 

Je ne conseil pas forcément de passer au HTML5 le terme "canvas" que j'ai employé etait dû à votre identifiant "mycanvas".

 

Mais le HTML5 & le CSS3 peut être une bonne solution.

 

Bonne continuation

[kermit45]

Rebonjour !

 

 

Malgré mes recherches sur internet et mes différents tests je n'arrive toujours pas à accrocher mon module en deux endroits et à le faire fonctionner correctement. J'ai laissé tomber la balise <canvas> Julien parce que comme vous disiez au début, je pense qu'elle crée un conflit à cause de l'"id" qu'il y a dedans (qui n'est plus unique). J'ai tenté de passer par une "classe" à l'intérieur du <canvas> et de faire d'autres manips mais ça ne marche pas hélàs.

 

Mon problème vient selon moi de l'intégration du code Javascript (oui en fait je suis passé par les <div> et Javascript, pas par JQuery).  et  J'aurais bien aimé savoir quel est le point d'entrée du logiciel Prestashop si c'est possible, quel est le premier fichier qui est "affiché" enfin quelle est l'organisation générale de tous les include et autres avec les template, smarty,...

 

Et où se situe l'endroit exact où on met le fichier Javascript (?). Apparemment le fichier header.tpl du dossier des template est important. Mais il faut peut-être aller chercher ailleurs. Je vois aussi que dans la construction du header.tpl  on utilise différentes syntaxes pour les hook. Parfois {$HOOK_HEADER} , ou {hook h="header"} ou quelque chose comme ça ; qu'est-ce que c'est exactement ?

 

 

@coeos.pro :  Je ne te comprends pas bien lorsque tu dis "2- c'est à mettre dans le hook Header". Qu'entends-tu par là ? Tu parles de la fonction hookHeader du fichier toureiffel.php ? ou tu parles d'un autre point d'accroche au header ou d'un header particulier ou je ne sais pas. Je ne vois pas aussi où se trouve la classe 'controller' ou "l'objet" 'context',... dans l'architecture des fichiers Prestashop (de ton appel $this->context->controller->addJS($this->_path.'js/toureiffel.js'); ).

 

 

Voilà, merci bien, désolé si mon message vous semble un peu superflu ou trop précis .

 

 

Kermit45

 

 

PS : J'ai essayé de rajouter des flocons de neige et bizarrement quand je dépasse le nombre de 17 flocons dans la "<div>" principale de mon module, ces derniers s'arrêtent de tomber. Comme si on était limité à un certain nombre de <div> dans un module. (Je parle quand j'accroche simplement un seul module et que ça marche). C'est peut-être lié à mon problème principal aussi.

Edited March 10, 2015 by kermit45 (see edit history)

[coeos.pro]

je voulais dire qu'il faut mettre dans ton module:

 

public function hookHeader()
{
     $this->context->controller->addJS($this->_path.'js/toureiffel.js');
}

et évidemment le module doit être greffé sur ce hook

[kermit45]

merci  coeos.pro, oui j'ai fait ça l'autre jour mais ça ne marche pas.

 

Quelle est la différence entre    Tools::addJS(($this->_path).'js/toureiffel.js');      et    $this->context->controller->addJS($this->_path.'js/toureiffel.js');   si je peux te demander ?

[kermit45]

Bonjour, pas de réponse. Entre temps, j'ai cherché partout de mon côté, impossible de trouver la solution. Coeos.pro je t'ai demandé ça un peu pour essayer d'explorer toutes les pistes possibles aussi et comprendre ce que tu voulais dire exactement. Mon problème me semble plus complexe que prévu en tout cas.

 

Je clos donc le sujet, merci Julien et coeos.pro de m'être venu en aide.

 

Kermit45

[coeos.pro]

salut, désolé j'ai du loupé ton précédent message, Tools::addJS était utilisé avant pour les précédentes versions de PS, mais maintenant il faut utiliser $this->context->controller->addJS

 

Tu avais bien greffé ton module sur le hookHeader ?

si tu mets un echo 'xxx'; tu as bien xxx affiché ?

[kermit45]

Oui coeos.pro, j'ai bien greffé le module sur le hookHeader ; j'ai essayé toutes les combinaisons, ça marche pas.

Le echo "xxx"; affiche bien xxx.

 

J'ai vu là-haut que tu ne déclares pas la variable global $smarty  dans ta fonction hookHeader ?

(tu n'inclus pas non plus le fichier css par $this->context->controller->addCSS(($this->_path).'css/styletoureiffel.css')  )

C'est normal ?

Edited March 20, 2015 by kermit45 (see edit history)

[coeos.pro]

1- tu as bien désactivé le CCC ?
2- tous les caches sont désactivés ?
3- sur les dernières versions global $smarty à disparu (et les autres global aussi)
4- "tu n'inclus pas non plus le fichier css" , chaque chose en son temps, commençons par le js si tu veux bien

 

ceci ne fonctionne pas :
$this->context->controller->addJS($this->_path.'js/toureiffel.js');

tu as bien un fichier ta_boutique.com/modules/ton_module/js/toureiffel.js

[GTL-WEB]

Bonjour,

D'après ce que je lis, tu as bien les deux ".tpl" qui se chargent, le 1er (dans le header) est animé correctement, le deuxième (leftColumn) affiche juste l'image de ton ".tpl" mais sans animation.

C'est bien cela ?

Si oui, je te conseil simplement de faire un toureiffel_left.tpl que tu assignes dans ton hookLeft, dans ce template, renomme l'id "mycanvas" en "mycanvas_left"
Dans ton toureiffel.js, duplique le contenu et renomme content en content2 et mycanvas en mycanvas2.

Bonne journée.

[kermit45]

Oui j'avais bien les cache(s) désactivés coeos.pro ; et j'ai bien le fichier  /prestashop/modules/toureiffel/js/toureiffel.js .

(je n'ai pas renommé le dossier 'prestashop')

 

 

Bonjour GTL-Web, bienvenue dans la discussion et merci de ton intervention ! J'ai réussi à faire marcher mon module finalement grâce à tes suggestions .

Oui j'avais bien les deux ".tpl" qui se chargeaient et seulement l'un ou l'autre qui s'exécutait en fait, selon que j'accrochais l'un ou l'autre ; ou lorsque j'accrochais les deux, seulement celui du Header s'exécutait. Je soupçonnais une solution de ce genre, mais tu l'as très bien expliquée : en effet il faut carrément refaire un fichier tpl d'un autre nom, l'accrocher dans le leftColumn et adapter un peu le fichier toureiffel.js . Merci !

 

 

Voilà, c'était laborieux. Merci à tous pour votre soutien et merci encore GTL-Web. Cette fois je clôs bien le sujet -enfin si j'y arrive- :-)

 

 

Kermit

Edited March 23, 2015 by kermit45 (see edit history)

[GTL-WEB]

Bonjour Kermit, 

 

Je suis content pour vous.

Bonne continuation.