Jump to content

[Module] Menu horizontal avec les différentes catégories

maxhome

By maxhome
in Modules et thèmes gratuits

 Share

Recommended Posts

maxhome Newbie

maxhome

Posted
Posted

Ce module fait suite à ce post:
http://www.prestashop.com/forums/viewthread/26048/developpement_et_modules/
categories_sous_forme_donglets_menu_deroulant_horizontal

Le module de base a été developpé par Cegiel (Version 1.0)
Je n'ai fait que le modifier à ma "sauce"

Update du 29/08/2009:
Version 1.2:
Correction de petits bugs
Compatible IE6, IE7 et >
Compatible Presta 1.2.1.0

Reste à faire:

- Arriver enfin à centrer verticalement le nom des catégories (dans le cas où certaines sont sur 2 lignes et/ou 1 ligne)
Si un pro du css passe par là!!!
Sous IE8, un display: table-cell et un vertical-align: middle fonctionne mais sous IE6 et 7 problème

- Changer le nom (Comme le souligne fort justement Jolvil c'est un menu pas un block) (Déjà fait, dispo dans prochaine version)

- Mettre des flêches à droite des sous-menu si l'arborecence continue

Rappel pour l'installation:

- Dans le global.css de votre thème:
chercher et mettez width à 100% (Sinon le menu ne commencera pas à gauche!)

#header {
   float: left;
   width: 100%;
   text-align: right;
}



- Si vous avez quelques problèmes d'affichage (Sur 3 niveaux) et que vous avez mis dans le header.tpl de votre thème afin de le rendre compatible avec ie6, retirer cette ligne car elle met le "brin" dans le menu juste au niveau du 3ème menu d'arborescence, sinon laissez-là...

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />



- installer le module

- Dans la partie Admin, "configurer" vous donnera accès au nombre de niveau (profondeur) et au délai d'ouverture
(J'ai retiré la partie où on choisissait dans le module original la largeur de l'onglet)

Maintenant tout est géré dans le css du module (Donc si vous voulez des images, des onglets, des couleurs précises pour les catégories, sous-catégories, c'est là-bas que cela se passe...)

- Pour gérer le temps de fermeture des menus:
Ouvrir le jquery.droppy.js
trouver la ligne 38
}, 500);
A l'origine il y a 500, j'ai mis 100 pour une fermeture + rapide


De l'indulgence, svp, je ne suis qu'un modeste débutant en php et css.
Il y a certainement des améliorations à faire et je compte sur vous.

Merci à Cegiel pour son module original car c'est lui qui a fait le plus gros du travail !!!

11126_w80uJl3OCzgstT0ksE1v_t

blockcategoriestopsc 1.2.zip

  • Like 1
Link to comment
Share on other sites
maxhome Newbie

maxhome

Posted
  • Author
Posted

Jolvil, oui effectivement le terme block n'est pas vraiment adapté : mais je n'ai, pour le moment, pas eu le temps de refaire complétement le module de Cegiel. Disons que c'est pour cela que j'ai livré ici plutôt une "base de travail".

yannsarah, tu n'as pas modifié ton header.tpl par hasard?
As-tu essayé la version originale de Cegiel afin de savoir si cela vient de mon adaptation?

Jolvil tu l'as essayé?

Link to comment
Share on other sites
Cegiel Newbie

Cegiel

Posted
Posted

Bonjour,

Heureux de voir que mon petit module ne sombre pas dans l'oubli !

Comme MaxHome, je suis débutant en prestashop, css et php.

YannSarah :
Désolé, mais il semblerait que ce module ne soit pas compatible avec la V1.1 de Prestashop. Je verrai ça prochainement.

MaxHome :
J'avais volontairement utilisé la class "idTabs", livré par défaut avec Prestashop dans le global.css. Ainsi, le style des onglets "suit" le thème, et le css du module s'en trouve plus léger. Et comme il y a deux largeurs pour les onglets natifs Prestashop, je me suis payé le "luxe" de l'ajouter dans la configuration.
Mais effectivement, le "idTabs" est peut-être un peu trop discret pour présenter les catégories.
On pourrait donc ajouter dans la configuration un troisième choix d'onglet : "Style personnalisé"...

J'ai un peu arrêté de tester avec IE6... Beaucoup de sites de sont pas compatibles avec ce navigateur. Pas mal de sites bloquent carrément l'accès.
Avec IE7, je ne vois pas de problème particulier.

Cordialement.

Link to comment
Share on other sites
maxhome Newbie

maxhome

Posted
  • Author
Posted

Bonjour Cegiel,

Normal ton travail mérite qu'on s'y interesse.
En plus des menus horizontaux qui représentent uniquement les catégories, cela ne court pas les rues...

J'avais bien compris pour les tabs, mais je me trouvais un peu "bloqué" effectivement sur la largeur et je voulais pouvoir y mettre une image de mon choix...

Pour IE6 c'est vrai c'est à s'arracher les cheveux mais j'ai pas le choix, comme beaucoup, faudrait qu'on trouve une solution...lol

Pour IE7, il fonctionne bien, si ce n'est que pour moi qui ai le module s3slider en haut de la page central, le menu au centre s'ouvre dérrière le slider...

J'avais un petit bug, à savoir, parfois, quand j'ouvrais le menu par le dessous, celui-ci se fermait aussitôt.
J'ai trouvé la soluc dans le site de l'auteur du script

Donc le module corrigé mis à jour dans le premier post

Link to comment
Share on other sites
Micro Project Newbie

Micro Project

Posted
Posted

Un grand merci pour ce module qui est simplement... merveilleux !

Petite question quand même : changer le hook du module n'est pour le moment pas possible (des heures de test infructueux).

Sera-t-il possible, à terme, de modifier la position du module ? (par exemple en dans Homepage Content)

Link to comment
Share on other sites
  • 2 weeks later...
eric69 Newbie

eric69

Posted
Posted

Bonjour,

Oui super c'est du beau travail à tous les deux !!!

C'est exactement ce que j'avais besoin, j'étais en train de bricoler un menu directement dans mon header,
quand je suis tombé sur votre menu.
Je l'ai donc adopté car plus propre que du bricolage du header!
Merci à vous deux très cool o))))))

Link to comment
Share on other sites
  • 2 weeks later...
Fanch Newbie

Fanch

Posted
Posted

Bonjour,

je débute avec Prestashop, je commence tout juste à essayer de customiser mon site. J'en profite pour remercier l'équipe de Prestashop pour leur travail fantastique. Je n'ai pas encore utilisé toutes les possibilité du CMS, mais au premier abord ca semble vraiment puissant et très complet.
J'ai voulu installer ce module qui correspond a ce que je veux : les catégories affichées en onglets horizontaux.
Après avoir téléchargé le zip, je suis allé dans la partie modules de l'admin, j'ai uploadé le module sans probleme, mais... je ne le vois pas apparaitre dans la liste des modules. Je me suis dit qu'il devait remplacer le module standard catégories, mais non. J'ai du rater quelque chose. Pourriez-vous m'éclairer ?

merci d'avance.

Link to comment
Share on other sites
bozo Newbie

bozo

Posted
Posted

Bonjour ,

Jolie module , juste une question y a t il une possibilité de mettre un lien vers la page d'accueil ? Car il vrai que faire un module commun avec celui de Menu Haut Horizontal v1.3 (julien breux) et le module bloc catégorie.

Link to comment
Share on other sites
Cegiel Newbie

Cegiel

Posted
Posted

Bonjour,

Visiblement, certains veulent "coupler" mon module revisité par @maxhome et le module de Julien Breux. J'ai essayé celui de Julien, et pour être honnête, il est beaucoup plus efficace que le "blockcategoriestopsc 1.2" !

Je veux bien me replonger dedans, mais selon vous, à quoi ressemblerait un module hybride ?

Cordialement.

Link to comment
Share on other sites
  • 2 weeks later...
jihef Newbie

jihef

Posted
Posted

Bonjour,
Je découvre ce menu que je trouve très intéressant. Je l'ai installé en local pour le tester et je voudrais faire une modification qui dépasse mes compétences actuelles.
J'aimerais que lorsqu'on clique sur une catégorie, on ait dans la nouvelle page la catégorie cliquée mise en évidence (en gras par exemple). Cela suppose de reconnaître l'id_category et d'appliquer le style adhoc pour cette catégorie.
En gros il faut un test entre l'id_category demandée et l'id_category de la nouvelle page. Si les deux sont identiques, on applique le bon style dans le "foreach".
Mais comme je ne maitrise pas les variables Smarty ni leur syntaxe...
Si quelqu'un peut m'aider, par avance merci !
Jean-François

Link to comment
Share on other sites
Cegiel Newbie

Cegiel

Posted
Posted

Bonjour,

A la ligne 2 du "category-tree-branch.tpl" du module, tu remplaces :

    {$node.name|escape:htmlall:'UTF-8'}


par :

    {$node.name|escape:htmlall:'UTF-8'}



Il te reste à personnaliser la class "selected" dans le "droppy.css" du module.

Cordialement.

Link to comment
Share on other sites
jihef Newbie

jihef

Posted
Posted

Merci beaucoup de ta réponse rapide, mais ce n'est pas exactement ce que je cherche à faire.
Avec ta solution, toutes les catégories passent (par exemple) en caractères gras.
Ce que je souhaite, c'est, à partir du menu horizontal des catégories tel qu'il est affiché initialement :

Accessoires Ipods Portables

Si je clique sur "Ipods", c'est obtenir dans la nouvelle page :

Accessoires Ipods Portables

C'est pourquoi je pensais faire un test et appliquer un style différent à la seule catégorie qui a été cliquée.
Merci en tous cas de tes suggestions.
Cordialement.
Jean-François

Link to comment
Share on other sites
jihef Newbie

jihef

Posted
Posted

[RESOLU]
J'ai finalement trouvé la solution, il faut effectivement mettre une condition pour n'afficher en gras que la catégorie sélectionnée.

Dans “category-tree-branch.tpl” j'ai modifié

{$node.name|escape:htmlall:'UTF-8'}



En insérant la condition suivante

Link to comment
Share on other sites
  • 3 weeks later...
Cegiel Newbie

Cegiel

Posted
Posted

Bonjour lagraine,

En fait, pour désactiver le click pour le premier niveau, il faut :

1/ Passer le "niveau" ($currentDepth) dans les .tpl
Dans le blockcategoriestopsc.php, au retour de la fonction "getTree", remplacer les lignes 82 à 84 :

       return array('id' => $id_category, 'link' => $link->getCategoryLink($id_category, $resultIds[$id_category]['link_rewrite']),
                    'name' => Category::hideCategoryPosition($resultIds[$id_category]['name']), 'desc'=> $resultIds[$id_category]['description'],
                    'children' => $children);



par :

       return array('id' => $id_category, 'link' => $link->getCategoryLink($id_category, $resultIds[$id_category]['link_rewrite']),
                    'name' => Category::hideCategoryPosition($resultIds[$id_category]['name']), 'desc'=> $resultIds[$id_category]['description'],
                    'children' => $children,
                    'currentDepth' => $currentDepth);



2/ Désactiver le "href" dans le category-tree-branch.tpl quand le niveau ($node.currentDepth) est à 1
Dans le category-tree-branch.tpl, remplacer la ligne 2 :

{$node.name|escape:htmlall:'UTF-8'}



par :

{$node.name|escape:htmlall:'UTF-8'}



Cordialement.

Link to comment
Share on other sites
Cegiel Newbie

Cegiel

Posted
Posted

lagraine,

Désolé, c'est ce forum qui a changé le script.
L'URL désactivée n'est pas "[removed]void(0);", mais "java+script:void(0);" (supprime le "+")

C'est le comble pour un forum "Développement" de ne pas pouvoir écrire de tel mot !

Cordialement.

Link to comment
Share on other sites
dric83 Newbie

dric83

Posted
Posted

Première chose :
Aller voir le topic sur firebug

Après les boutons verts sont des images, il faut donc redimensionner cette image ou en mettre une plus haute!
actuellement elle fait 48px de haut. A priori il faut prévoir
70px pour 3 lignes de texte
55px pour 2 lignes de texte

Donc à vous de voir si vous décider de ne jamais dépasser 2 lignes de texte pour vos boutons, (il faudra modifier celui intitulé : Casque bluetooth Iphone / Ipod / Mp3), une image de 55px de haut devrait suffire.

Ensuite il faudra probablement modifier la hauteur de la zone :
#categories_block_top_sc_ul a
ligne 48 de droppy.css
actuellement:
height: 48px;

je pense que vous pourrez mettre la meme chose que pour la hauteur de l'image.

bon courage

Link to comment
Share on other sites
  • 3 weeks later...
  • 3 weeks later...
  • 2 weeks later...
Mortillus Newbie

Mortillus

Posted
Posted

Bonjour,
Pour rajouter un lien en dur c'est dans le fichier:blockcategoriestopsc.tpl

<link href="{$blockcategoriestopsc_css_href}" rel="stylesheet" type="text/css" media="all" />
[removed][removed]




Accueil
   {foreach from=$blockCategTree.children item=child name=blockCategTree}
               {include file=$branche_tpl_path node=$child}
   {/foreach}
                  Mon compte
Animations
Contact
Plan du site


             <form id="searchbox" action="search.php" method="get">
               <input type="hidden" value="position" name="orderby"/>
               <input type="hidden" value="desc" name="orderway"/>
               <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query}{/if}" />
             </form>




Je viens d'installer le module et je l'ai personnaliser a recommander.
Très simple à faire.

Scrapfeemain

Link to comment
Share on other sites
  • 3 weeks later...
damien165 Newbie

damien165

Posted
Posted

Bonjour,

C'est un super module. Merci !

Par contre j'ai un problème avec mon site. Je n'arrive pas à aligner le module sur la gauche. Il reste centré. Pouvez-vous me dire ce que je dois modifié, svp? J'ai essayé plein de modifs dans le css, mais je n'y suis pas arrivé...

Merci de votre aide

Voici à quoi ressemble mon site de test: http://img199.imageshack.us/img199/6495/siteap.jpg

Link to comment
Share on other sites
bleuindigo Newbie

bleuindigo

Posted
Posted

bonjour à tous,

d'abord bravo à prestashop et aux participants du forum très réactifs

débutant sur presta, je viens d'installer ce module.
première question : J'avais renseigné les catégories et les sous catégories. Quand je clique sur un bouton (catégorie) ca ouvre une page sans dérouler les sous catégories.. est ce normal et dans ce cas comment puis je faire pour avoir le menu suivant : catégories -> sous catégorie etc...
seconde question : le menu prend la forme d'une série de boutons (un par catégorie). je souhaiterai plutot qu'avoir des boutons avoir des blocs qui puissent etre paramétrables (couleur, taille, etc...) comment faire?
Merci pour vos réponses.
cordialement
Fabien

Link to comment
Share on other sites
chris1999 Newbie

chris1999

Posted
Posted

bonjour.
Tout d'abord, merci pour ce superbe module.

Cependant je n'arrive pas a corriger un mauvais comportement.

Pour un menu construit comme suit :

Menu 1 ------------Menu 2
1.1 >> 1.1.1 -------- 2.1
----->>1.1.2 --------2.2
1.2 >> 1.2.1
1.3

Si je passe la souris sur "Menu 1" puis sur "1.1", je ne peux selectionner "1.1.1" car il semblerait que "1.1.1" chevauche "Menu 2".
Et donc, dès que le curseur de la souris se trouve entre Menu1 et Menu2, les sous categories du Menu 1 cedent leur place aux sous categories du menu 2.
Par contre si la souris est sur 1.2, je peux selectionner 1.2.1 sans probleme.
Il semberait que cela ne concerne que la premiere ligne.

Que puis je modifier pour corriger ce comportment ?

merci

Link to comment
Share on other sites
  • 2 weeks later...
  • 3 weeks later...
The_Steph Newbie

The_Steph

Posted
Posted

Bonjour à tous,
je me mêle à la conversation car je trouve ce menu super intéressant, simple d'utilisation et à personnaliser. Toutefois, je n'arrive pas à trouver comment faire en sorte que quand je suis dans une sous-catégorie (children) la catégorie "parent" soit aussi en "selected".
Je ne sais pas si j'ai été assez clair ...
Si quelqu'un a un tuyau, je suis preneur.
Merci.

PS : il y a une petite erreur dans le post de maxhome, il ne faut pas lire :
ORDER BY `level_depth` ASC, cl.`id_category` ASC))
mais
ORDER BY `level_depth` ASC, cl.`id_category` ASC'))

le ' après le dernier ASC n'apparaît pas, certainement à cause de la fonction "quote" du forum.

Link to comment
Share on other sites
  • 2 weeks later...
  • 2 weeks later...
Deliciosa Newbie

Deliciosa

Posted
Posted

bonjour à tous
Merci pour tous vos post qui sont très intéressant
Malheuresement je suis novice dans le domene de prestashop et encore plus en informatique il a l'air de ne pas fonctionné avec la version 1.1.0.5 j'aimerais savoir si il le peut et sinon aidez moi à passer prestashop en version 1.2.5 j'ai peur de faire une connerie
Merci par avance

Link to comment
Share on other sites
  • 3 weeks later...
Raphael2010 Newbie

Raphael2010

Posted
Posted

Bonjour a tous,
merci pour ce superbe module, je l'aime beaucoup! simple et facile a personaliser franchement bravo! j'ai cependant un petit probleme: toutes mes sous categories s'alignent sur la gauche et non en dessous de la categorie correspondante... est ce que quelqu'un a une idee du probleme? voir screenshhot.

Merci beaucoup pour votre aide.

21927_vI7Eyi5EMT5lAB1QdVpS_t

Link to comment
Share on other sites
  • 2 weeks later...
  • 2 weeks later...
bott-in Newbie

bott-in

Posted
Posted

Bonjour tout le monde,

J'ai parcouru tout le forum pour tenter de trouver une solution, mais rien n'y fait, sur ma boutique, impossible de faire apparaître les sous-catégories dans la barre de menu.
J'ai tout passé en revue, mais rien, si quelqu'un pouvait me donner une piste, je suis preneuse, car là, je sèche en plus c'est galère car les clients ne peuvent pas voir tous les produits, donc...

Merci de votre aide,
lien bouique
http://laboutiquedescoquines.fr

Bonne journée
GERALDINE

Link to comment
Share on other sites
BVince Newbie

BVince

Posted
Posted

L'autocomplete est dans le module de recherche...Il y a une erreur JS sur le module recherche donc le menu ne fonctionne pas...enfin de pense, car une erreur JS dans la page courcircuite le fonctionnement du JS sur les autre modules.

Link to comment
Share on other sites
bott-in Newbie

bott-in

Posted
Posted

Merci de votre aide Vince, en fait j'ai changé mon module de block recherche, je suis passée sur recherche avancées, il me reste la traduction en fr.php à réaliser et ensuite je pourrais l'activer en recherche rapide, mais au moins pour le moment mon bloc recherche est à sa place, et il fonctionne.

Merci encore de votre coup de main et bonne journée
GERALDINE

Link to comment
Share on other sites
  • 2 weeks later...
maxhome Newbie

maxhome

Posted
  • Author
Posted

Bott-in, si je peux me permettre
Sur ta boutique http://laboutiquedescoquines.fr au niveau de l'effet hover sur les catégories de ton menu, on voit un léger décallage de quelques pixels quand ton menu en blanc s'ouvre
Si cela n'est pas fait volontairement, dans ton droppy.css, ligne 50
met height:16px plutôt qu'à 18px

Ca me rend nerveux ce genre de boutique, faut pas que j'y reste ;)

Link to comment
Share on other sites
  • 4 weeks later...
erico Newbie

erico

Posted
Posted

Bonjour tout d'abord très bon menu le seul horizontal qui gère correctement les groupes par contre petits soucis j'ai un nombre de catégories importantes et le menu se trouve donc sur 2 lignes lorsque l'on passe sur une catégorie 1ère ligne les sous catégorie s'affichent sous la catégorie seconde ligne donc problème de z-index mais j'arrive pas à le résoudre merci par avance joint jpg

25089_Or5r1B5CPi4Bi2QYC9tY_t

Link to comment
Share on other sites
Myaouu Newbie

Myaouu

Posted
Posted

Bonjour,

Merci pour ce module :)
Je voudrais savoir si il est possible de configurer une image pour chaque catégorie de la boutique ?
Et aussi si il était possible que le menu ne soit pas déroulant, mais qu'on voie uniquement les catégories principales ?

Merci

Link to comment
Share on other sites
corint1 Newbie

corint1

Posted
Posted
Bonjour,
Pour rajouter un lien en dur c'est dans le fichier:blockcategoriestopsc.tpl
<link href="{$blockcategoriestopsc_css_href}" rel="stylesheet" type="text/css" media="all" />
[removed][removed]




Accueil
   {foreach from=$blockCategTree.children item=child name=blockCategTree}
               {include file=$branche_tpl_path node=$child}
   {/foreach}
                  Mon compte
Animations
Contact
Plan du site


             <form id="searchbox" action="search.php" method="get">
               <input type="hidden" value="position" name="orderby"/>
               <input type="hidden" value="desc" name="orderway"/>
               <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query}{/if}" />
             </form>




Je viens d'installer le module et je l'ai personnaliser a recommander.
Très simple à faire.

Scrapfeemain



sorry , but how translate this in other lang ( new link added by you ) ?
Link to comment
Share on other sites
  • 1 month later...
kimzey Newbie

kimzey

Posted
Posted

Merci pour ce super module mais malheureusement lorsque je l'installe il se place tout en haut de ma page sous mon header et non pas juste en dessous et je n'arrive pas à le mettre à sa place...

Quelqu'un aurait il une idée ou une piste ?

Merci

Link to comment
Share on other sites
nabilonie Newbie

nabilonie

Posted
Posted

kimsey, as tu jouer sur les positions pour le mettre en dessous ou au dessus ? sinon créer ou déplacer le hook dans ton header.tpl de theme ??


bonjour, très beau module que j'utilise en même temps que le superbe menu de julien breux, menu julien au dessus pour les liens dur et administratifs, et le menu droopy (lol) en dessous pour les catégories, car j'aime beaucoup l'effet de slide qui fais penser aux grands sites.
Ma question, bête sans doute : comment mettre une couleur ou image différente pour chaque catégorie, plutôt que le vert constant ?
merci a vous :)

Link to comment
Share on other sites
  • 3 weeks later...
  • 3 months later...
frichard Newbie

frichard

Posted
Posted

Bonjour
merci pour ce module.
J'aimerai faire apparaitre sur une ligne horizontal les sous categories lorsque on clique sur la categorie.
Comment la faire rester apparente jusqu'a la sortie de cette mêm catégorie.
Je suis un débutant et je n'arrive pas trouver la modification du code.
merci pour votre aide

Link to comment
Share on other sites
  • 3 months later...
  • 1 year later...
Gsb Newbie

Gsb

Posted
Posted

Bonjour,

 

Tout d'abord un grand merci pour ce module. Super menu, je cherchais ce type de menu horizontal depuis longtemps ;)

 

Je me demandais juste comment faire pour changer les tailles des onglets et l'espacement entre chacun d'entre eux?

 

C'est dans le fichier css?

 

Bien à vous

Gsb

Link to comment
Share on other sites
  • 4 months later...
Badgesagogo Newbie

Badgesagogo

Posted
Posted

Bonjour,

 

 

J'utilise également ce module, mais depuis que je suis en 1.4.9 je rencontre un soucis que je n'avais pas avant (en 1.3.11).

 

Les catégories se classent n'importe comment, quand bien même j'ai apporté ce que suggérait The_Steph (fin page 3 du topic).

 

Certains ont ils rencontré (et résolu ;) ) ce problème ?

 

 

Merci,

 

 

Florent

Link to comment
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
Go to topic listing
×
×
  • Create New...