Jump to content

Comment intégrer des fichiers javascript et jquery en Smarty?


Recommended Posts

Bonjour!

 

J'ai posté le topic hier déjà, mais je crois que je me suis trompée de rubrique, donc je le remets ici en espérant avoir des réponses :)

Je suis nouvelle sur le forum, je suis en train de créer un site vitrine en modifiant le template du thème prestashop_alt et j'aurais besoin d'aide.

Le fait est que je souhaite rajouter une lightbox au chargement de ma page d'accueil. J'ai donc modifier la "facebox" et testé celle-ci au préalable en html sur mon serveur personnel (je rajoute mon code html en bas de page si nécessaire)

J'ai donc placé mon image dans le répertoire img du thème, mon fichier javascript dans www/themes/prestashop_alt/js/ et mes fichiers jquery dans le dossier www/themes/prestashop_alt/js/jquery/ que j'ai créé. J'ai tenté d'appeler ces fichiers dans le header.tpl du thème, mais je n'y arrive pas.. Je n'ai jamais eu de cours de smarty, j'ai donc tenté quelques formules trouvées sur des forums, mais en vain, est-ce que quelqu'un pourrait m'éclairer s'il vous plaît??

 

Merci d'avance pour votre aide!!

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="Content-Type" content="description" content="stylesheet" type="css/css_facebox.css"/>

<script type="jquery/jquery-1.4.2.min.js"></script>

 

<script type="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="Javascript/js_facebox.js"></script>

<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>

<script type="jquery/jquery_facebox.js"></script>

</head>

<body onLoad="facebox">

<div class="padding:30px;">

<div><img class="images/img_facebox.jpg"/> </div>

</div>

</div>

</div>

 

</body>

</html>

Share this post


Link to post
Share on other sites

Bonjour decembre_

 

<script type="jquery/jquery_facebox.js"></script>

 

Attention à ne pas utiliser type à la place de src

 

Dans ton thème, il y a un fichier js.

A partir de header.tpl tu peux appeler des fichier javascript comme ça:

 

<script src="{js_dir}jquery_facebox.js"></script>

 

Aussi, pour avoir un padding de 30 px soit tu mets une class, par exemple :

 

<div class="ma_div"></div>

 

Ensuite sur ton fichier css:

.ma_div{padding:30px}

 

Soit tu écris :

<div style="padding:30px">

 

Bonne Journée

Share this post


Link to post
Share on other sites

Bonjour pixy-studio!

 

<script type="jquery/jquery_facebox.js"></script>

Attention à ne pas utiliser type à la place de src

 

Effectivement! Merci! Pourtant dans mon fichier c'est écrit bien comme il faut, j'ai dû faire une mauvaise manip en copiant le bout de code. Merci de me le faire remarquer en tout cas! :)

 

A partir de header.tpl tu peux appeler des fichier javascript comme ça:

<script src="{js_dir}jquery_facebox.js"></script>

 

J'ai utilisé ta technique et ça continuait à afficher écran blanc au lieu de mettre le site, je me suis donc inspirée des autres lignes de mon fichier header.tpl pour rajouter un $ à js_dir pour ainsi donner des lignes comme ceci:

 

<script type="text/javascript" src="{$js_dir}jquery_facebox.js"></script>

 

Cela ne renvoie plus à aucune page blanche et le site fonctionne correctement! Je suppose donc que la syntaxe doit être correcte. J'ai également rajouté un if isset foreach, en copiant ceux déjà présents, pour les fichiers js/jquery de mon {$js_dir} et le site fonctionne toujours. Ceci étant, bien que la page fonctionne, la lightbox n'est pas lancée et rien ne se passe quant à cela... aurais-tu une idée du pourquoi??

 

 

Merci beaucoup pour ton aide!

Share this post


Link to post
Share on other sites

Bonjour decembre_,

 

Désolé pour l'oubli du $.

 

Tu devrais aussi supprimer les lignes:

<script type="jquery/jquery-1.4.2.min.js"></script>
<script type="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 

Vérifie avec Firebug, la bibliothèque jquery est déjà chargée:

 

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

 

Comment ça tu veux ajouter une lightbox au chargement de ta page?

 

il y a une lightbox sur la page produit de Prestashop, lorsque tu cliques sur l'image produit, la lightbox fancybox s'affiche.

C'est ça que tu veux faire ?

 

a+

Share this post


Link to post
Share on other sites

Bonjour pixy-studio!

 

Pas de soucis pour l'$ ! :)

 

J'ai supprimé les fichiers! J'ai également placé la librairie en 1e, puis le fichier js et ensuite le jquery, comme un ami me l'a conseillé, mais ça ne fonctionne toujours pas :/.

 

Non j'aimerai faire comme ici (c'était mon test html d'ailleurs) : http://mastercaweb.u-strasbg.fr/1112/aurore/Projet_Pro/jQueryAccueil/

Une espèce de "lightbox" donc qui s'affiche au-dessus de la page d'accueil et qui s'enlève après un certain temps ou lorsque l'on clique dessus. J'avais modifié le fond de la lightbox pour qu'elle soit opaque et qu'elle s'affiche comme je le souhaitais.

 

A+ et encore merci!! :) C'est cool de savoir qu'on peut trouver de l'aide quand on est débutant! :)

Share this post


Link to post
Share on other sites

  • 2 months later...

Bonjour,

 

je fais un module. j'aimerai integrer du javascript. où dois je le mettre ? j'ai essayé en vain de le placer

monModule/js/monjavascript.js

 

et le declarer comme ceci:

public function hookHeader()
{
Tools::addJS( $this->_path.'js/monjavascript.js');
}

 

merci

Edited by Alberto De Milano (see edit history)

Share this post


Link to post
Share on other sites

A tout hasard essaie de le placer directement dans ton .tpl (balise script) pour voir si déjà tel quel ça fonctionne.

Fais attention de ne pas coller les accolades afin qu'elles ne soient pas interprétées par smarty.

 

decembre_, c'est réglé ton soucis de lightbox ?

J'ai récemment crée un module qui affiche une fancybox (avec une vidéo de présentation du site à l'intérieur) une seule fois pour chaque visiteur (mémorisation de la visite via un cookie).

 

Si ça intéresse quelqu'un, je partagerais ça avec la communauté.

 

Cordialement.

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
 Share

×
×
  • Create New...

Important Information

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