[résolu]modification du bloc catégorie

[quentinj]

Bonjour,

Pour mon bloc catégorie, j'ai des catégories parents et des sous catégories.
Devant mes lien catégories parents il y a des petites image (+ et -) qui permet d'afficher ou non les sous catégories.

Ce que je veux c'est modifier le lien des catégories parents pour que ce ne soit plus des liens vers une autre page mais pour que soit eux qui permettent l'affichage des sous catégories, ou de les masquer, et qu'il n'y ait plus les symboles + et -.

merci d'avance

Topic déplacé -yoya971

[quentinj]

rebonjour,

J'aimerais au moins avoir quelques réponses ^^'
Du genre : je comprend rien à ce que tu dis, ou je sais pas comment faire, ou va voir dans dans ce lien pour t'aider.
pour que je me fasse une idée sur la difficulté de la modification que je veux apporter sur mon bloc catégories

[Gregory Roussac]

Bonjour,

Il faut à la fois modifier le template du module et le javascript.

Cordialement,

[fulviods]

peut être ça ? http://www.marghoobsuleman.com/prestashop-modules/prestashop-modules-categories-custom-menu

[quentinj]

J'ai réussi à faire ce que je voulais : faire en sorte que mes boutons de catégorie n'ouvrent pas leur page de catégorie mais affiche dans le bloc catégorie leurs sous-catégories et que par contre les sous catégorie mènent à leur page respective.

pour ça j'ai modifier le fichier : treeManagement.js
qui ce trouve ici : prestashop\themes\prestashop\js\tools

j'ai remplacé la ligne :

$('ul.tree.dhtml ul').prev().before(" ");

par

$('ul.tree.dhtml ul').prev().each( function() {
   var textea = $(this).text();
   $(this).replaceWith(""+textea+"");
});

avec cette manière, ça remplacera toutes les catégories et sous-catégories ...etc, qui sont parents d'autres catégories en bouton comme précédemment expliqué.

après il suffit de modifier le global.css du thème pour modifier l'affichage de #categories_block_left span.grower

[quentinj]

Je viens de voir qu'avec ma modification, un autre problème fait son apparition : quand on sélectionne une sous-catégorie, on ne vois pas les sous-catégories de la catégorie parents.
L'affichage du bloc catégorie reste toujours le même au chargement de n'importe quelles pages.

voici le nouveau code pour corriger ce problème :

//add growers to each ul.tree elements
$('ul.tree.dhtml ul').prev().each( function() {
   var textea = $(this).text();
   if ( $(this).hasClass("selected") )
       $(this).replaceWith(""+textea+"");
   else
       $(this).replaceWith(""+textea+"");
});

et plus loin dans le fichier il faut enlever les prev() de trop:

//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);

par :

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

Peut être que je vais tomber sur d'autres problèmes mais j'en vois pas pour l'instant ...

[paquitojuan]

Merci à toi Quentinj, je vais tester cela et te tiens au courant.

Je pense que cela va être un très bon début pour moi parce que moi ce que je veux faire en suite c'est l'appliquer sur toutes les catégories et sous catégorie sauf la dernière.

Si tu as un début de solution je suis preneur parce que la programmation c'est pas mon truc.

merci

[paquitojuan]

sALUT QUENTIN,

je viens d'essayer tes codes à moins que je le fasse mal mais voici ce qu'il arrive en suite.

[quentinj]

sALUT QUENTIN,

je viens d'essayer tes codes à moins que je le fasse mal mais voici ce qu'il arrive en suite.

Il faut faire quelque modification dans le css :
dans le fichier global.css de ton thème qui se trouve ici :
prestashop\themes\ton thème\css\

Recherche le bout de code suivant (utilise la recherche sur le mot grower pour le trouver plus rapidement) :

div#categories_block_left span.grower{
   display:block;
   float:left;
   background-position: 0px 3px;
   background-repeat: no-repeat;
   width:9px;
   height:15px;
   margin: 0 0 0 -10px!important;
   margin: 0 0 0 -6px;
   padding: 0;
}
div#categories_block_left span.OPEN { background-image: url('../img/icon/less.gif'); }
div#categories_block_left span.CLOSE{ background-image: url('../img/icon/more.gif'); }

Tu peux déjà changer ton image de fond car pour l'instant tu as le petit carré et ça rend pas super derrière le texte. Il faut penser à modifier les deux lignes car il y en a une pour l'image de fond quand la liste n'est pas affichée et une autre quand elle l'est.

div#categories_block_left span.OPEN { background-image: url('../img/icon/less.gif'); }
div#categories_block_left span.CLOSE{ background-image: url('../img/icon/more.gif'); }

Puis retires le float:left;, sur le coup je sais pas trop pourquoi il gène mais dès que tu le retires ça ira mieux normalement.

[paquitojuan]

salut Quentin,

Tu es un roi c'est exactement ce que je recherchais.

Champagne vient à Marseille et je te paye le champagne LOL.

[paquitojuan]

Salut Quentinj,

J'ai remarqué un petit souci:

Lorsque une catégorie ne contient pas de sous catégorie et bien elle est décalé des autres et s'affiche en noir.

Pourrais tu voir de le mettre sur la même ligne et en bleu mais de garder en noir les dernières sous catégorie su ti veux voir un exemple regarde ici ----> informatique - ordinateur et écran - ordinateur portable et là tu vois que sacoches n'est pas au même niveau alors que la catégorie fait partie de la même sous catégorie.

Me comprends tu ?

[quentinj]

Peux-tu me mettre une image, j'ai un peu de mal à comprendre ton problème.

[paquitojuan]

Voici quentinj

[quentinj]

En fait c'est décalé et pas de la même couleur car c'est pas la même chose.
Ceux en bleu c'est juste des "phrases" alors que les noms de catégories en noir sont des liens.
Si tu veux que les liens et les "phrases" qui se trouvent dans la même colonne (que ce soit aligné correctement et que ce soit de la même couleur) il va falloir modifier ton css (tous ce que tu dois modifier se trouve dans la même zone du css).

Pour la mise en page de la première liste des catégories il faut modifier ça :

div#categories_block_left ul.tree li { ... }

la suivante :

div#categories_block_left ul.tree li ul li { ... }

etc ...

Modifies la couleur, la position par rapport à gauche (padding-left) ...
Supprimes aussi le blocs suivant :

div#categories_block_left span.grower{ ... }

Il ne sert plus a rien, car tu ne veux pas de différence entre les phrases et les liens
Il n'y aura que les phrases de modifier là.

Ensuite tu enlèves la couleur (ne mets pas de transparence, supprime la ligne) et tu mets le padding-left à 0 des liens dans le bout de code suivant :

div#categories_block_left ul.tree a { ... }

Puis rajoutes les lignes de code suivantes :

div#categories_block_left ul.tree li a{ }
div#categories_block_left ul.tree li ul li a{ }

etc ...
Et tu mets les couleurs qui correspondent aux phrases


ça devrait ressembler à ça :

div#categories_block_left ul.tree li {
   padding-left:5px;
   color: blue;
   ...
}
div#categories_block_left ul.tree li a {
   color: blue;
}
div#categories_block_left ul.tree li ul li{
   padding-left:10px;
   color: red;
   ...
}
div#categories_block_left ul.tree li ul li a {
   color: red;
}
div#categories_block_left ul.tree li ul li ul li{
   padding-left:10px;
   color: yellow;
   ...
}
div#categories_block_left ul.tree li ul li ul li a {
   color: yellow;
}
div#categories_block_left ul.tree a{
   padding-left:0;
}

[paquitojuan]

Ok ok si cela vient du css je vais modifier tout cela comme j'ai fait pour avoir les INLINE.

Merci beaucoup

[quentinj]

pour tous ceux qui veulent améliorer leur block catégorie il y a aussi ça :

Block catégorie, “ouvrir” une seule catégorie

[phar]

Bonjour, quentinj.

Merci beaucoup pour cette très intéressante contribution. C'est la partie suppression de lien des parents qui m'intéresse. Comment peut-on l'appliquer au module "Bloc Catégorie Etendu" de Pierre Lefebvre (http://www.prestater.fr/product.php?id_product=16) ?

Dans mon cas, je déploie mes arborescences (il n'y en pas beaucoup), chaque catégorie étant par ailleurs affichée dans des blocs séparés grâce au module de Prestater. Mais je ne veux pas qu'en cliquant sur un item possédant des sous-catégories on affiche une page listant les sous-catégories. Ce qui revient donc à supprimer les liens de ces items.

Je ne suis pas fort en développement, mais suis capable de modifier des sources et des css ! pouvez-vous m'indiquer, si c'est possible, comment appliquer vos modifs avec l'utilisation du module "Bloc Catégorie Etendu" ?

Cordialement.

[romnatt]

Bonjour, j'ai suivi votre code

Mais gros bug et je ne trouve pas :
http://www.arbredesplaisirs.com/index.php

Avez vous une idée?

Merci d'avance

[Tchupa]

Bonjour j'ai suivi votre tuto mais je suis arriver a un endroit ou je bloque totalement
Sur mon site j'obtiens la première pièce jointe et ce que je voudrais obtenir comme effet et la deuxième pièces jointes.

Pourriez vous m'aider svp ?

Merci.

Cordialement.