Jump to content

Modification menu catégorie


Recommended Posts

Bonjour, voici mon probleme,

actuellement j'ai un menu des catégories avec le script javascript pour derouler la liste. Le module est celui de base sur prestashop evidement.

Mon but etant de supprimer les fleches a gauche de chaque catégories parentes comportants des enfants et de remplacer la balise de lien de la catégorie parente en simple H6.

Pour ca c'est ok. Le titre H6 reste cliquable pour derouler ou enrouler le sous menu.

 

Mon probleme qui est celui sur lequel je me prends la tête depuis un petit moment est le suivant.

L'etat de la class="CLOSE" sur le H6 ( avant appliqué sur le span contenant la fleche ) n'apparait pas de base. Je n'ai qu'une simple balise H6.

Il faut donc 2 clic pour activer la premiere class ( etat OPEN ) et un deuxieme clic pour activer la class CLOSE.

Ce qui me donne pour resultat d'avoir la liste de toutes mes catégories DEJA ouverte...

L'autre probleme etant que malheuresement, je n'ai pas le moyen de faire en sorte qu'un seul element existant dans la liste UL d'orgine contenant tous mes menus et sous menu, possede la classe OPEN et que si une demande est faite pour ouvrir un autre menu deroulant, l'etat de la class de l'élément qui AVANT etait OPEN , passe automatiquement sur CLOSE, afin d'eviter d'avoir une longueur de page trop grande.

 

Voici le code du script utilisé actuellement

 

//animate the opening of the branch (span.grower jQueryElement)
function openBranch(jQueryElement, noAnimation) {
 jQueryElement.addClass('OPEN').removeClass('CLOSE');
 if(noAnimation)
  jQueryElement.parent().find('ul:first').show();
 else
  jQueryElement.parent().find('ul:first').slideDown();
}
//animate the closing of the branch (span.grower jQueryElement)
function closeBranch(jQueryElement, noAnimation) {
jQueryElement.addClass('CLOSE').removeClass('OPEN');
if(noAnimation)
 jQueryElement.parent().find('ul:first').hide();
else
 jQueryElement.parent().find('ul:first').slideUp();
}
//animate the closing or opening of the branch (ul jQueryElement)
function toggleBranch(jQueryElement, noAnimation) {
if(jQueryElement.hasClass('OPEN'))
 closeBranch(jQueryElement, noAnimation);
else
 openBranch(jQueryElement, noAnimation);
}
//when the page is loaded...
$(document).ready(function () {
//to do not execute this script as much as it's called...
if(!$('ul.tree.dhtml').hasClass('dynamized'))
{
 //add growers to each ul.tree elements
 $('ul.tree.dhtml ul h6').addClass('CLOSE');

 //dynamically add the '.last' class on each last item of a branch
 $('ul.tree.dhtml ul li:last-child, ul.tree.dhtml li:last-child').addClass('last');

 //collapse every expanded branch
 $('ul.tree.dhtml h6.OPEN').addClass('CLOSE').removeClass('OPEN').find('ul:first').hide();
 $('ul.tree.dhtml').show();

 //open the tree for the selected branch
  $('ul.tree.dhtml .selected').parents().each( function() {
if ($(this).is('ul'))
 toggleBranch($(this).prev().prev(), true);
  });
  toggleBranch( $('ul.tree.dhtml .selected').prev(), true);

 //add a fonction on clicks on growers
 $('ul.tree.dhtml h6').click(function(){
  toggleBranch($(this));
 });
 //mark this 'ul.tree' elements as already 'dynamized'
 $('ul.tree.dhtml').addClass('dynamized');
 $('ul.tree.dhtml').removeClass('dhtml');
}
});

 

et voici le code de mon menu

 

<li {if isset($last) && $last == 'true'}class="last"{/if}>
{if $node.children|@count < 1}
<a href="{$node.link}" {if isset($currentCategoryId) && ($node.id == $currentCategoryId)}class="selected"{/if} title="{$node.desc|escape:html:'UTF-8'}">{$node.name|escape:html:'UTF-8'}</a>
{/if}
{if $node.children|@count > 0}
<h6  class="CLOSE" {if isset($currentCategoryId) && ($node.id == $currentCategoryId)}class="selected"{/if}>{$node.name|escape:html:'UTF-8'}</h6>
 <ul>
 {foreach from=$node.children item=child name=categoryTreeBranch}
  {if isset($smarty.foreach.categoryTreeBranch) && $smarty.foreach.categoryTreeBranch.last}
{include file="$branche_tpl_path" node=$child last='true'}
  {else}
{include file="$branche_tpl_path" node=$child last='false'}
  {/if}
 {/foreach}
 </ul>
{/if}
</li>

 

Si quelqu'un a une solution. L'adresse correspondante au site en developpement est le suivant :

www.com2test.com/erl/

 

Cordialement

Share this post


Link to post
Share on other sites

  • 2 months later...

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