Dans les demandes de tutoriels, vous étiez plusieurs à vouloir un menu un plus évolué… En principe c’est une zone assez sensible le menu, mais je me suis dit que pour vous faire plaisir, j’allais quand même m’y aventurer.
Un bon menu doit être simple à gérer
Assez souvent dans les thèmes Prestashop qu’on achète on voit des menus très évolués… la démonstration offre un bon rendu, mais quand il faut commencer à administrer via le back-office, cela devient une véritable galère des options et des configurations à perte de vues.
J’ai donc réfléchi à une méthode toute simple qui s’appuie plutôt sur des conventions, avec des images à mettre simplement dans un dossier de manière à ce que le chargement se fasse automatiquement. L’image de la catégorie principale s’affiche en grand et la catégorie enfant s’affiche en miniature sous forme d’icône. Pour ce tutoriel je me suis inspiré du concept du menu de chez Headict (mais en beaucoup plus simple).
Dans ma vision des choses, je trouve toujours bon si on peut utiliser un maximum les modules natifs de Prestashop et finalement je suis assez content du résultat, car en modifiant 2 fichiers seulement, cela permet de rendre le shop beaucoup plus attrayant. Bien sûr il faudra ensuite prendre le temps de réaliser de belles images et icônes… pour donner envie au visiteur de cliquer (je vous donne déjà un exemple de base).
Allez on se motive et on personnalise son menu Prestashop !
Ressources
Pour ce tutoriel vous aurez à disposition :
- 1 x fichier ps_mainmenu.tpl qui intègre le comportement automatique de chargement des images.
- 1 x fichier custom.css avec les nouvelles règles d’intégration pour le menu.
- 2 x fichiers .psd d’exemples pour l’image à intégrer sur le menu.
- 1 x dossier « menu » avec une base d’images d’exemples
- 1 x listing des emplacements des fichiers
Résumé de la vidéo : personnaliser votre menu Prestashop
- Le but c’est d’avoir un menu facile à gérer et un rendu fun.
- Création des sous-catégories d’exemples dans Prestashop.
- Modification du fichier de thème « ps_mainmenu.tpl » et intégration des règles CSS dans « custom.css » pour un affichage optimal.
- Compréhension du fonctionnement des règles avec différents tests. Il faut bien ajuster en fonction du nombre de catégories et de la structure globale de vos catégories.
- Pensez à respecter toujours le même format pour les images, afin d’éviter au maximum la déformation d’affichage.
- Cette intégration n’est pas « parfaite », mais permet une première approche dynamique, sans devoir investir sur un nouveau module.
Bonjour,
Je trouve ça sympa. Par contre je suis encore sur prestashop 1.6. Et c’est pas le même fichier tpl…Pas sûr que ce soit transposable sur cette version. Merci pour ce tuto !
Hello,
Aie, effectivement cette méthode est applicable uniquement sur Prestashop 1.7
A bientôt !
Merci Beaucoup pour ton partage je suis débutant sous prestashop j etais sur wordpress mais les conflits permanents avec wooocommerce les plugins qui ne sont pas adaptés au php 7 etc. m ont amené à changer de plateforme pour site d ecommerce et j ai pas mal avancé grace a tes tutos super bien expliqués et la façon que tu as de tout detailler pour qu on puisse comprendre les bases essentiels pour créer un bon site ecommerce .par contre je n ai pas trouvé comment modifer top menu pour le rendre full width j ai essaye de modifier css mais rien n y fait ..y a t il un ficher autre à modifier et si oui j aurai aimé savoir lequel
Hello,
Pour le menu avec une largeur à 100% j’ai jamais essayé sous Prestashop 1.7, car en standard c’est pas trop pensé pour (à voir si du côté du forum Prestashop 1.7 certains l’ont déjà expérimenté)… Je me dis que peut-être c’est plus sage d’installer un autre type de menu qui le fait déjà bien nativement.
A bientôt !
Merci de ta reponse quand je parle de full width c est pas rapport au contenu et non la page entirere je me disais qu en enlevant le module de recherche ca pourrait le faire en sachant qu avec chrome lorsqu on inspecte element on peut facilement le faire en changeant width 66.xxx % en 100 % et le resultat est nikel c est ça qui est rageant 😉 Je ne peux helas regrouper menu avec juste 4 ou 5 items et les themes me font peur soit pour traduction ou compatibilité
merci pour ta réponse ce qui est rageant c est qu en modifiant la largeur en 100% avec chrome en inspectant element tout marche nikel et lorsqu on ajoute au fichier css #header .header-top .menu {
padding-left: 15px;
margin-bottom: .375rem;
}
@media (min-width: 992px)
.col-lg-8 {
float: left;
width: 100%;
}
rien ne se passe c est tout de meme embetant lorsque l on a pls categories a mettre dan menu je ne peux compresser plus ……. j hesite avec l achat d un theme mais j ai peur pour traduction ou compatilité selon modules etc ne pas prendre une usine à gaz non plus mais le menu 100% est essentiel quand je parle de full width 100% je parle du contenu body et pas un menu qui prendrait toute la largeur de la page du navigateur bien entendu …tu n as pas une idéé de theme a me conseiller stp qui soit responsive et pas trop usine a gaz en ce qui concernerait les modules avec compatibilité etc. excuse moi pour ces questions mais je pense qu ici grace a tes precieux conseils et ta methodologie je pourrai gagner du temps pour avoir certaines reponses precises ..merci beaucoup en tout cas du temps que tu passes pour repondre a ceux qui en ont besoin
Hello,
Pour forcer l’application de certaines règles, il est possible de mettre « !important » juste à la fin de la règle : http://babylon-design.com/le-hack-css-important/
Il faut aussi tester le rafraîchissement avec cette méthode : https://www.webbax.ch/2017/10/23/prestashop-1-7-problemes-dactualisation-ep-38/
Pour le thème à voir celui-ci fait par Atchworks un intégrateur français : https://addons.prestashop.com/fr/themes-alimentation-restauration/30040-mobilefirst.html
A bientôt !
Bonjour,
Merci pour ce tuto, c’est juste ce qu’il me fallait pour mon menu 🙂
Par contre j’ai un souci à l’intégration du code dans mon .tpl ma boutique affiche un code erreur…
ContextErrorException in
Smarty_internal_template base.php (171) : eval()’d code Line 95
Unedefined index : base_dir
Je bloque un peu sur ce souci… Pourriez-vous m’éclairer afin de résoudre ce bug?
Merci d’avance !
Bonjour,
Difficile de répondre sur ce point il semble y avoir une variable non définie « base_dir », mais comme ça je ne pourrai pas vous en dire plus.
A bientôt !
Oops, je viens de voir que vous aviez répondu…
j’ai finalement trouvée la solution en modifiant l’encodage donc tout va bien ça apparait bien !
Merci quand même
Bonjour, très sympa comme modification du menu.
Comment pourrait t’on ajouter la condition si il n’y a pas d’image (N1) renvoyer simplement le nom (lien) de la catégorie par défaut de prestashop, et sur le N2 par exemple envoyer vers une image « générique » si il n’y a pas d’image dans le dossier menu.
Bonjour,
Comme ça je ne saurai pas vous dire… il faudrait voir les variables disponibles, mais pour cela il faudrait faire un {debug} dans la vue Smarty pour voir s’il y a une notion de level dans la variable objet du menu et mettre une condition dessus.
A bientôt !
Bonjour j’ai utilisé ce tuto sur mon site et ça marche pour les images mais le problème est que mon menu ne s’affiche plus à 100% mais à 40% je dirais , pourrais-tu m’aider?
Bonjour,
Difficile de répondre à cette question, il faut analyser les règles CSS pour comprendre pourquoi la largeur est altérée. A voir si ce tutoriel pour l’analyse des règles CSS peut vous aider : https://www.webbax.ch/2017/03/27/prestashop-1-7-modifier-css-ep-16/
A bientôt !
Bonjour,
il serait également intéressant de mettre en évidence le lien actif dans le menu.
Bonjour,
C’est une bonne remarque, pour cela il faudrait ajouter une classe supplémentaire « active » dans le code du menu, en fonction du paramètre $_GET[‘id_category’] qui est présent dans l’url… mais je n’ai pas pensé à intégrer ce concept.
A bientôt
Super tuto, bravo j’adore ce que vous faite ! Les image + image de sous catégorie s’intègre parfaitement. Par contre petit problème avec le menu chaque » title parent » contient un lien qui redirige vers une page vide au lieu simplement de dérouler les sous-catégorie. Si vous pouvez m’éclairer ce serais vraiment super de votre part.
À bientôt.
Bonjour,
Cela fait un moment que j’ai fait ce tutoriel… difficile de confirmer si le code a évolué. Là je pense que cela nécessiterait de comprendre le code en passant par le template TPL… ou dans le comportement PHP de la génération du menu. La demande est trop spécifique pour que je puisse me prononcer.
A bientôt !
Bonjour et merci pour ce tutoriel.
J’aimerais personnaliser encore le menu.
Le code destiné aux sous-catégories (ligne 2 du menu déroulant) je voudrais l’appliquer au catégorie (ligne 1 du menu déroulant) et n’appliquer aucunes images aux sous-catégories.
Quel sont les blocs de code déplacer pour échanger le comportement des catégories avec le comportement des sous-cétagories ? Ce serait totalement formidable si vous pouviez me l’indiquer. Merci par avance.
PS. Ci-joint le code du tutoriel (fichier ps_maimenu.tpl)
{* Webbax - tuto 41 - amélioration du menu *} {assign var=_counter value=$_counter+1} <a>= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}" href="{$node.url}" data-depth="{$depth}" {if $node.open_in_new_window} target="_blank" {/if} > {if $node.children|count} {* Cannot use page identifier as we can have the same page several times *} {assign var=_expand_id value=10|mt_rand:100000} <i></i> <i></i> {/if} {* Webbax - tuto 41 - amélioration du menu *} {if $depth > 0 && {$node.page_identifier|strpos:"category" !== false}} {assign var="img" value="img/mercerie/{$node.page_identifier}.jpg"} {if file_exists($img)} {else} {$base_dir}{$img} {/if} {/if} {if $depth > 0 && {$node.page_identifier|strpos:"category" !== false}} {$node.label} {else} {$node.label} {/if}Hello,
Comme ça je pourrais pas vraiment répondre de tête… car bien souvent je dois tester X fois le processus pour arriver à trouver la bonne approche (surtout avec ces menus & récursivité, mieux vaut avoir la tête reposée).
A bientôt !
Bonjour,
J’ai une petite question css pour les spans. J’ai suivis votre tuto qui m’as beaucoup aidé pour la mise en place d’images dans le menu princicpal.
Seul soucis que je rencontre, impossible de faire passer les titres des catégories sur deux ligne. J’ai essayé les width, les padding mais rien ne fonctionne. Voici l’url de la boutique : https://centuryprint.eu/fr/
J’ai lu qu’il était difficile de jouer avec les spans en css mais alors je ne sais vraiment pas comment je pourrais faire.
Aussi si vous voulez jetez un oeil à mon code css, je peux vous l’envoyer si jamais vous trouverez ce qui cloche.
D’avance merci,
Kévin
Bonjour,
Alors comme ça j’ai envie de dire si on utilise la balise « span » il faut idéalement mettre en CSS un « display:inline-block » et là ça devrait mieux fonctionner pour les marges – espacements.
A bientôt !
Bonjour,
Super tuto, par contre je voudrais mettre des petites images uniquement à côtés de mes sous catégories et laisser la catégorie principale en l’état.
Je bloque car après plusieurs tentatives, ma catégorie principale ne s’affiche plus et le seul moyen de revenir à la normal et de revenir au point de départ.
Une idée, solution pour appliquer votre tuto uniquement aux sous catégories ?
Merci,
Bonne journée.