Menu Prestashop 1.7

Prestashop 1.7 – Menu Horizontal (ép.6)

Quoi ? On va parler encore du menu Prestashop ? Oui c’est vrai qu’on a l’a déjà vu dans la version 1.6, mais comme il y’a des subtilités, on va faire une révision de cette nouvelle interface.

Episode 6

Avant de faire ces tutoriels vidéos je me pose toujours la question « est-ce que c’est un peu répétitif ? ». A quelque part certainement oui, mais entre les versions de Prestashop il y’a des petites variantes qui font toute la différence et qui justifient du coup de re-présenter le sujet.

Ce que j’ai le plus apprécié dans cette nouvelle version, c’est le menu mobile qui est mieux agencé et plus compact pour la navigation. Par contre, je regrette qu’ils n’aient pas mis la « loupe de recherche » aussi dans la ligne de menu, pour gagner de la place. Avoir une option de menu « permanent » sur le mobile aurait été intéressant aussi pour éviter de scroller jusqu’au sommet de page pour revenir au menu.

Dans les grandes lignes, le menu reste finalement très similaire à Prestashop 1.6, mais à l’heure actuelle il ne semble pas encore supporter les miniatures des images de catégories alors qu’il le faisait dans la version Prestashop précédente. Ce menu devrait convenir à la plupart des e-commerçants, il n’est pas forcément très « ludique » visuellement pour le visiteur (pas d’icônes / illustrations), mais il fait correctement son travail.

Ressources

Pour ce tutoriel vous avez à disposition :

  • Fichier theme.css.txt (règles à ajouter à votre fichier theme.css)

Télécharger

Au programme

  • Le nouveau menu Prestashop 1.7 reste tout de même très conventionnel.
  • Les images des sous-catégories du menu ne sont pas supportées (à l’heure actuelle).
  • Evitez d’inonder votre menu de liens.
  • Choississez votre stratégie de menu :
    – menu avec arborescence
    – menu avec lien simple / couplé au bloc catégories
  • Le bloc recherche fait partie d’un module externe.
  • Ajoutez de nouvelles règles pour l’optimisation sur mobile.
  • Ecoutez mon avis personnel sur le module (avantages / inconvénients).

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (6 votes, moyenne : 5,00 sur 5)
Loading...

27 commentaires sur “Prestashop 1.7 – Menu Horizontal (ép.6)”

  1. Bonjour
    Merci pour ces infos super intéressantes
    J’ai eu deux remarques:
    – En cliquant sur le menu, le logo se cache à l’arrière… pas terrible!
    – L’espace de barre de menue n’est pas optimisé, les liens de menu avec le barre de recherche dans la même division donne pas assez de liberté.
    Est-ce que tu as une solution !
    Merci encore

    1. Hello,

      Disons que j’ai pas assez expérimenté encore cette version Prestashop 1.7, à mon sens il y’a encore des éléments qui devraient être corrigés sur la version « native » de Prestashop.

      Dans le cas présent j’ai donné je pense une « ébauche », mais certainement que ce n’est pas parfait.

      Difficile de donner un retour précis de debug, sur la qualité d’intégration… car j’ai fait cela un peu en « express » pour tenter d’améliorer le menu de base.

      J’ai constaté qu’il y’a déjà des imperfections avec la configuration par défaut… peut-être que c’est encore trop précipité pour la version Prestashop 1.7.

      Merci de me suivre !

    1. Rien n’empêche de faire un lien « manuel » direct sur la catégorie principale via le menu, puis ensuite de se servir des catégories à gauche pour naviguer.

      Il faudra a mon avis attendre aussi les prochains updates de Prestashop 1.7 pour qu’ils finissent d’ajuster tous ces détails.

  2. Bonjour,
    je souhaiterais déplacer le menu horizontal sous le logo et non à côté.
    Pouvez-vous m’indiquer les modifs à apporté ?
    Merci par avance pour votre aide.

    1. Bonjour,

      Actuellement pour de la personnalisation, il faut faire appel à un intégrateur CSS… Dans ce tutoriel je me suis limité au minimum de retouches possibles.

      Pour changer cet emplacement, cela implique de procéder à différents tests… peut-être pour une prochaine fois.

      Merci pour votre visite !

  3. Bonjour,

    La modification est sympa à appliquer sur un petit menu. Je suis en train de réaliser un site de vente en ligne avec Prestashop et j’ai fait machine arrière sur cette modification : dès que le menu devient un peu plus conséquent, il n’est plus possible de le parcourir en scrollant vers le haut ou vers le bas puisqu’il est fixé.

    La modification pourrait vraiment être intéressante si la partie haute était fixée, comme expliquée dans votre vidéo, et que le menu reste flottant, permettant de scrollé vers le haut et vers le bas. Peut-être dans une prochaine vidéo ?

    Merci pour vos tutoriels, ils sont d’une aide précieuse pour les débutants comme moi !

    Bien cordialement,
    Alexandre

    1. Bonjour,

      Dans le cas présent j’ai survolé la problématique en proposant une ébauche, mais il y’a encore à travailler sur l’aspect visuel.

      Il faudrait détailler plus… j’essaie de donner déjà les pistes de base, mais bien souvent il faudrait creuser plus loin.

      Merci pour votre visite et votre retour constructif !

  4. Salut,
    Nickel tes vidéos elles m’ont fait avancer pas mal.
    Par contre sur prestashop 1.7 j’ai trouvé un bug de fou sur le menu, problème soumis à la forge sans réponse à ce jour. On peut le voir sur cette vidéo que j’ai faite : https://youtu.be/sOVBSo11nOY
    Je trouve vraiment dommage que prestashop mette en ligne à télécharger des versions non finies en disant qu’elles sont fonctionnelles, ils me feraient presque penser à des amateurs. En attendant je suis complètement bloqué dans ler développement de mon site.

    1. Hello,

      Effectivement j’ai été voir ta vidéo et il semble bien y avoir un problème, je n’y avais pas prêté attention durant mes tests.

      Du côté de Prestashop c’est toujours la même problématique, ils sont très innovants… et veulent aller vite, peut-être à mon sens un peu trop vite… A quoi bon précipiter les choses ?

      Je suis toujours emprunté quand les clients me disent que la version Prestashop 1.7 c’est la nouvelle version de production… oui dans les 6 prochains mois (peut-être), mais pour le moment il y’a encore beaucoup de choses à corriger.

      Merci de suivre mon actualité !

  5. Bonjour,
    Merci pour ce tuto excellent comme d’habitude,

    J’ai un problème que je n’arrive pas à résoudre sur prestashop 1.7

    Comment limiter le nombre de de niveaux des sous catégories afin de ne pas avoir des listes longues comme le bras lorsque qu’on survole le menu?

    J’ai pour l’instant appliqué la méthode du lien direct, mais cela implique 1 clique supplémentaire de la part de client pour aller dans la sous catégorie

    Merci d’avance

    Chris

        1. Bonjour,
          J’ai enfin résolu le problème en passant par le css:
          dans le dossier themes/classic/assets/css
          ouvrir le fichier theme.css
          Et remplacer la partie suivante:
          .top-menu .collapse{display:inherit}
          par
          .top-menu .collapse{display:none}

          C’est tout bête (j’ai mis des jours à le trouver) mais cela fonctionne chez moi

          Bonne journée

  6. Bonjour
    Pardon tu dois être super sollicité. J’aime beaucoup ce que tu fais et cela m’a énormément aidé dans mes développements.

    JE suis sous Prestashop 1.7 . J’ai viré la barre de recherche. Mon menu horizontal apparait sur 2 lignes. Et je n’arrive pas à trouver comment régler mon problème. Augmenter la largeur de mon menu afin qu’il occupe toute la largeur de la page.
    entrepotdesmateriaux.fr

    merci de ton aide

    1. Bonjour,

      Je pense qu’il faut absolument éviter de retoucher les règles du menu, il est préférable de mieux réfléchir à la construction du menu en groupant plus les catégories (avec une catégorie globale ou en abrégeant) pour éviter d’avoir trop de points d’entrées. C’est à mon avis la meilleure solution pour aller au plus simple sans se heurter à la partie technique.

      A bientôt !

  7. Bonjour,

    J’aimerai savoir s’il est possible de fixé le menu également sur ordi et tablette mais sans le logo? Je m’explique, je souhaiterai que quand on scroll sur le site, le menu soit plus fin mais toujours visible en haut de page. Typiquement à la façon de ce site : https://www.taklope.com

    Je te remercie par avance pour ta réponse.

    Cordialement,

    Pascal

  8. Bonsoir,
    Merci pour ta réponse. J’ai déjà ce module mais il demanderai quelques modifications, car il fait ce que j’ai besoin mais il prend directement le fichier header.tpl et donc prend également le logo avec, moi je cherche juste une fine barre de navigation sans logo quand on scroll le site. e module que tu site ne différencie pas le logo de la nav barre 🙁

    A bientôt 😉

  9. Bonjour,

    J’ai un soucis avec l’alignement des différentes catégories dans mon menu (www.lecomptoir38.com)

    Avez-vous une idée de comment rectifier ça ?

    ( J’utilise le Thème et le menu de base dans prestashop 1.7 )

    Merci beaucoup !

  10. Bonjour et merci pour vos tutos si éfficace.
    voila j’ai fait mon menu entièrement constitué de lien dirigeant sur des ancres #.
    ceci fonctionnent très bien.

    Dans un second temps je voudrais qu’il y est un effet scroll au click sur les liens.
    Pour se faire j’ai installé le code si dessous jquery.min dans le footer de mon site.

    {literal}
    https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

    $(document).ready(function() {
    $(‘.js-scrollTo’).on(‘click’, function() { // Au clic sur un élément
    var page = $(this).attr(‘href’); // Page cible
    var speed = 750; // Durée de l’animation (en ms)
    $(‘html, body’).animate( { scrollTop: $(page).offset().top }, speed ); // Go
    return false;
    });
    });

    {/literal}

    Ensuite j’ai créer un lien test dans le module custom-text (block de texte personnalisé) et cela fonctionnent. code si dessous:
    Page1

    Je bloque à l’étape suivante.
    J’ai essayés 1500 solutions pour mettre la class js-scrollTo au lien du menu sans succès.

    J’ai essayé une deuxième solution afin d’obliger le scroll pour tous les liens commençant #
    Cela fonctionnait sur mes liens test et pas dans le menu.
    Pour se faire j’ai remplacé ça: (‘.js-scrollTo’) par (‘a[href^= »# »]’) dans le code jquery et créés des liens sans class dans mon module custom-text.
    cela fonctionne mais pas pour les liens de menu.

    Si quelqu’un à une idée ou même la solution j’en serais ravis.
    Je tourne sur la version 1.7.3

    1. Bonjour,

      Votre question est trop spécifique pour que je puisse vous apporter une réponse, il est peut-être plus judicieux de poster la demande sur un forum dédié au Javascript ou d’ouvrir un topic dédié à ce sujet sur le forum Prestashop.

      A bientôt !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *