boucle foreach n'affiche que le dernier élément (sous-cat)

[alfazzz]

Bonjour à tous!

je suis en train de modifier le menu des sous catégories dans product-list.tlp, j'ai remplacé les texte par des images et j'essaie sans succès d'appliquer un rollOver sur ces images grace à javascript.
le problème c'est que je ne récupère que la valeur du dernier élément dans ma fonction javascript, du coup ça foire!

www leefjeans com/prestashop_leef_/category.php?id_category=2 (rajouter les . svp pour avoir l'url complète)
survoler le bouton T-shirts pour voir

>{if isset($subcategories)}
   <!-- Subcategories -->



</pre>
<ul>
</ul>
<h2>name|escape:'htmlall':'UTF-8'}.jpg" border="0"></h2>
<br>           {if $products}<br>               {include file=$tpl_dir./product-sort.tpl}<br>           {/if}        <br>{$subcategory.name|escape:'htmlall':'UTF-8'}        <br><br><br>       {foreach from=$subcategories item=subcategory}<br><br><br><br>{literal}<br>[removed]<br>function showHover(img) {<br>  if(img) {<br>       img.src = {/literal}'{$img_dir}subCategory_{$subcategory.name|escape:'htmlall':'UTF-8'}_over.jpg'{literal};<br>  }<br>}<br>function showNormal(img) {<br>  if(img) {<br>       img.src = {/literal}'{$img_dir}subCategory_{$subcategory.name|escape:'htmlall':'UTF-8'}.jpg'{literal};<br>  }<br>}<br>function init() {<br>   /* here we will place our code */<br>   var ex1 = document.getElementById('ex1');<br>   if(ex1.addEventListener) {//trying the standard way<br>       ex1.addEventListener('mouseover', function(){showHover(ex1);}, false);<br>   ex1.addEventListener('mouseout', function(){showNormal(ex1);}, false);<br>   } else {//in case it's an InternetExplorer<br>   ex1.attachEvent('mouseover', function(){showHover(ex1);});<br>   ex1.attachEvent('mouseout', function(){showNormal(ex1);});<br>   }<br>}<br><br>window.onload = init;<br>[removed] <br>{/literal}<br><br><br><br><br><br><br><a rel="">getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}"></a><br><br>       {/foreach}<br><br><br><br>       {else}    <br><h2>name|escape:'htmlall':'UTF-8'}.jpg" border="0"></h2>
<br>           {if $products}<br>           {include file=$tpl_dir./product-sort.tpl}<br>           {/if}<br><br><br><br

je pense que mon problème vient des fonctions showOver et showNormal, qui ne récupèrent que le dernier élément de la boucle.

comment faire pour que la fonction récupère le nom de la sous catégories à chaque passage ?

merci d'avance pour vos futurs messages
Olivier

[coeos.pro]

Bonjour, vous savez à pourquoi vous avez mis des balises {literal} ?

[alfazzz]

j'ai essayé sans mais le script n'est pas interprété

[coeos.pro]

En fait smarty 2 n'aime pas les accolades du javascript (chose qui ne le dérange pas en smarty 3, vive la version 1.4 de prestashop); donc on met les balises literal pour empêcher à smarty de s'occuper du code qui est entre ces balises, le problème c'est que vous y placez {$subcategory.name... et ceci n'est pas interpreté par smarty. Rajoutez des balises literal aux bons endroits et ca devrait être bon.

[alfazzz]

je pensais que les balises {literal} servaient justement à interpréter du code non smarty (du javascript par exemple), et que donc mon code {$subCategory...} ne doit pas être entre les balises {literal}, d'ailleurs si je le place dedans, je n'ai aucune valeurs de récupérées.

me goure-je!???

[coeos.pro]

Ben oui:

Les balises {literal} permettent à un bloc de données d'être pris tel quel, sans qu'il ne soit interprété par Smarty. Très pratique lors de l'emplois d'éléments tels que javascript, acolades et autres qui peuvent confondre le moteur de template. Tout le contenu situé entre les balises {literal}{/literal} ne sera pas interprété, et affiché comme du contenu statique

Source : http://www.smarty.net/docsv2/fr/language.function.literal.tpl

Il faut mettre par exemple :

{literal}
... code javascript...{/literal}
{$subcategory.name|escape:'htmlall':'UTF-8'}_over.jpg'{literal};
... code javascript...{/literal}

[alfazzz]

merci pour la source, je voyais juste donc.

pourtant j'ai ici encapsulé uniquement le javascript, non !? :

{literal}
< script type="text/javascript">
function showHover(img) {
if(img) {
  img.src = '{/literal}{$img_dir}subCategory_{$subcategory.name|escape:'htmlall':'UTF-8'}_over.jpg{literal}';
}
}
function showNormal(img) {
if(img) {
  img.src = '{/literal}{$img_dir}subCategory_{$subcategory.name|escape:'htmlall':'UTF-8'}.jpg{literal}';
}
}
function init() {
   /* here we will place our code */
   var ex1 = document.getElementById('ex1');
   if(ex1.addEventListener) {//trying the standard way
       ex1.addEventListener('mouseover', function(){showHover(ex1);}, false);
   ex1.addEventListener('mouseout', function(){showNormal(ex1);}, false);
   } else {//in case it's an InternetExplorer
   ex1.attachEvent('mouseover', function(){showHover(ex1);});
   ex1.attachEvent('mouseout', function(){showNormal(ex1);});
   }
}

window.onload = init;
</ script> 
{/literal}

je récupère tout de même une valeur, donc le placement parait bon mais c'est uniquement la dernière valeur de la boucle. je pense que toute la boucle est parcourue, mais que seul le dernier élément est sauvegardé, un problème d'id à coup sûr (j'ai déjà eu des cas similaire en as3, mais là en javascript/smarty je peine à trouver la solution).

[coeos.pro]

Pour être sure mettez {debug} dans le fichier :

...
window.onload = init;
</ script> 
{/literal}
{debug}

ca va ouvrir un pop up avec les variables smarty

[alfazzz]

j'ai aucune fenêtre qui s'ouvre...

néanmoins je pense avoir un début de réponse :

[removed]
var names = [
{foreach from=$names item=name}
   "{$name}",
{/foreach}
];
window.onLoad = function() {
 for(var i = 0; i < names.length; i++) {
   alert(names[i]);
 }
}
[removed]

je vais essayé d'adapter ça à mon script et je reviens vous dire quoi
(ps : me doutait que l'id avait à voir avec ça.)

[coeos.pro]

j’ai aucune fenêtre qui s’ouvre… faut vider le cache smarty

[alfazzz]

j'ai essayé ça sans succès pour l'instant :

{literal}    
[removed]
var names = [{/literal}{foreach from=$subcategories item=subcategory}{literal}"{/literal}{$subcategory.name|escape:'htmlall':'UTF-8'}{literal}",{/literal}{/foreach}{literal}];

function showHover(img) {    
  if(img) {
  for(var i = 0; i < names.length; i++) {
       img.src = '{/literal}{$img_dir}subCategory_{literal}names[i]{/literal}_over.jpg{literal}';
  }
  }
}
function showNormal(img) {    
  if(img) {
  for(var i = 0; i < names.length; i++) {
       img.src = '{/literal}{$img_dir}subCategory_{literal}names[i]{/literal}.jpg{literal}';
  }
  }
}
function init() {
   /* here we will place our code */
   var ex1 = document.getElementById('ex1');
   if(ex1.addEventListener) {//trying the standard way
       ex1.addEventListener('mouseover', function(){showHover(ex1);}, false);
       ex1.addEventListener('mouseout', function(){showNormal(ex1);}, false);
   } else {
       ex1.attachEvent('mouseover', function(){showHover(ex1);});
       ex1.attachEvent('mouseout', function(){showNormal(ex1);});

 }    

}

et ça me sort ça en sortie
window

galère...
je continue

[alfazzz]

bon j'ai laissé tombé javascript pour essayer en css, mais je rencontre un soucis pour pas changer

j'arrive à appliquer un rollOver aux images de mes sous catégories, mais uniquement si je place une balise img dans ma liste , et en plus le rollover s'effectue sous l'image contenu dans la balise, en gros j'arrive pas à le faire en css uniquement, avec la balise vide.

donc dans product-list.tlp, j'ai une boucle foreach pour afficher l'image de ma sous catégorie :

>    </pre>
<ul>
       {foreach from=$subcategories item=subcategory}    
</ul>
<a rel="">getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">


</a><a rel="">                    
</a><br>       {/foreach

et le css correspondant :

#pageMenu {
   position: relative;
   padding:0;
   margin:0;
   list-style-type:none;
}

#pageMenu li { float:left; margin-left: -1px;}

.pageMenuLi_Tshirts:hover {margin-top: -12px; background-image: url('http://www.monsite.com/prestashop_leef_/img/subCategory_Tshirt_over.jpg');}
.pageMenuLi_Tshirts  {margin-top: -17px; background-image: url('http://www.monsite.com/prestashop_leef_/img/subCategory_Tshirt.jpg');}

le problème c'est si j'enlève la balise image dans la liste

, plus rien ne s'affiche, et si je la laisse, j'ai tout qui s'affiche : l'image contenu dans la liste, qui est placée tout au dessus et masque les images générées par le css.

comment formaté mon css pour qu'il gère seul les images et rollover?

merci d'avance