Catégorie Prestashop 1.7

Prestashop 1.7 – Gestion des Catégories (ép.7)

On va revenir ensemble sur un grand classique de Prestashop, la gestion des catégories. Il est important de proposer une navigation conviviale pour donner envie aux internautes d’acheter.

Episode 7

Les catégories de produits ça fait partie du grand classique du e-commerce, pourtant elles sont très souvent négligées ou oubliées des e-commerçants qui font un peu le minimum (juste spécifier le nom de la catégorie).

Dans cette nouvelle version de Prestashop, la notion des sous-catégories au centre de la page a disparu. A voir si cela est une suppression temporaire ou si c’est une réelle volonté de leur part d’avoir retiré cette option. Le module configurateur de thème lui aussi a disparu, certainement toujours dans une optique de simplification.

L’image des catégories a un positionnement par défaut que je trouve « particulier » qui à mon sens ne correspond pas à la plupart des e-commerçants (la vignette est petite et collée à droite), nous allons voir comment l’améliorer.

Il est important d’illustrer vos catégories avec une image et une jolie légende, vous devez vous appliquer pour donner envie aux visiteurs. On regrettera quand même le fait de ne pas avoir un champ « légende » lors du transfert de l’image, actuellement la balise « alt » est dépendante du champ « Balise Titre ».

Oui même si tout n’est pas parfait, j’aime quand même ce nouveau template parce qu’il est très simple et on visualise bien les différents blocs / éléments. Soyez donc méthodique et n’activez « que » les fonctions dont vous avez besoin.

Ressources

Pour ce tutoriel vous avez à disposition :

  • Fichier category.psd (exemple de bannière)
  • Fichier category.tpl (nouvelle structure d’affichage)

Télécharger

Au programme

  • Enlevez le superflu de manière à avoir des colonnes épurées.
  • Les sous-catégories au centre ne sont plus présentes dans cette nouvelle version (le configurateur de thèmes a été supprimé).
  • Modification de la taille de miniature pour les images des catégories.
  • Intégration d’une bannière d’exemple au format 850px * 300px.
  • Prestashop n’a pas utilisé la librairie par défaut de Bootstrap, ce qui est une mauvaise idée, car les conventions de nommage ne sont pas identiques.
  • Soignez la description de la catégorie et le titre de l’image.
  • Complétez chacune de vos catégories pour gagner en crédibilité.
  • La simplicité = Le succès assuré

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 : 4,67 sur 5)
Loading...

47 commentaires sur “Prestashop 1.7 – Gestion des Catégories (ép.7)”

  1. Bonjour,

    Merci pour vos vidéos.
    J’ai un soucis lorsque j’ai modifié le fichier catalogy.tpl avec le votre.
    La photo ne descend pas.

    Faut-il faire une action dans le thème css ?

    Pourriez-vous m’aider à ce sujet car j’aimerai beaucouq utilisé cette fonctionnalité.

    Cordialement
    Melle FOUDA Agnès

  2. Bonjour,

    Il faut bien désactiver tous les caches de Prestashop (sous Paramètres avancés -> Performances) pour s’assurer que vos modifications sont bien prises en compte.

    Merci pour votre visite !

    1. Bonjour,

      Sur le principe il faudrait inverser ces deux lignes

      <div id="category-description" class="text-muted">{$category.description nofilter}</div>
      <div class="category-cover">
           <img src="{$category.image.large.url}" alt="{$category.image.legend}">
      </div>
      

      Ce qui donnerait :

      <div class="category-cover">
           <img src="{$category.image.large.url}" alt="{$category.image.legend}">
      </div>
      <div id="category-description" class="text-muted">{$category.description nofilter}</div>
      

      Mais c’est à tester…

  3. Merci pour ces tutos très clairs. Le configurateur de thème a disparu. Gênant quand on doit passer un PS 1.6 à 1.7. Par quoi le remplacer pour afficher les blocs avec images de l’ancien site ? Merci

    1. Bonjour,

      En fait ce module n’existe plus, le comportement des images avec les blocs a donc disparu aussi… Eventuellement il faudrait intégrer du contenu HTML manuellement dans le module « éditorial »… pas de chance, lui aussi a disparu.

      A voir peut-être en utilisant le bloc texte personnalisé (pour la page d’accueil) en intégrant du HTML codé à la main : https://www.webbax.ch/2017/02/20/prestashop-1-7-module-bloc-texte-personnalise-ep-11/

      A bientôt !

  4. Bonjour, quand on tape un texte assez long dans la description de la catégorie (plus d’une ligne), celui-ci passe sous l’image à droite et n’est plus visible sous cette image. Je tiens à utiliser les petites images à droite d’ailleurs. Pour gruger j’insère donc une image blanche de 141px² que j’aligne à droite du texte. Ca marche très bien pour les affichages un peu grands mais ça laisse une marge vide à droite pour les affichages plus petits où l’image de la catégorie passe en bas du texte. Est-ce que vous auriez une solution plus efficace que la mienne et pensez-vous que ce bug ou cette coquille sera corrigée dans les version suivantes?

    1. Bonjour,

      Difficile de répondre précisément sur ce cas, les versions Prestashop 1.7 évoluent assez rapidement. Une nouvelle version est disponible la « 1.7.1.2 », il faudrait faire un test avec celle-ci.

      Je vois de quel bug vous parlez, mais j’ai proposé cette solution pour éviter justement d’avoir ce chevauchement. Dans le comportement actuel les règles définies sont à mon sens pas vraiment optimales, cela impliquerai révision.

      Vous pouvez aussi demander à un intégrateur qu’il vous rajoute des règles personnalisées, afin que cela fonctionne (sur la droite) y compris sur les différents supports.

      A bientôt !

      1. Pour éviter le chevauchement (image couvrant la droite du texte) j’ai ajouté dans custom.css le style suivant :
        /* Largeur du texte dans le bloc des catégories*/
        .text-muted {
        font-size: .875rem;
        width: 80%;
        }

  5. Bonjour,
    j’ai suivie tous vos tutos, un grand merci pour votre temps et votre aide.
    j’utilise la dernière version de prestashop je n’arrive pas à ajouter des miniature d’image à des sous catégories!!!
    encore un autre soucis quand je veut ajouter des lien de menu,
    un message impossible d’ajouter un lien…….
    Merci de me repondre.

    1. Bonjour,

      Dans la version Prestashop 1.7, il n’y a plus les miniatures avec les sous-catégories au centre (dans le thème par défaut). Lors de l’ajout d’un lien essayez de mettre dans le champ de l’url un dièse (#) pour tester.

      A bientôt !

  6. Bonjour,
    Tout d’abord merci pour ce tutoriel très utile, j’ai inséré le script « category.tpl » et ça n’a pas marché même j’ai changé le paramétrage (apparence–>image..) ???

    1. Bonjour,

      Si l’image ne la catégorie ne s’affiche pas essayez d’ajouter une description dans la catégorie, pensez aussi à désactiver tous les caches Prestashop.

      Merci pour votre visite !

  7. Bonjour et grand merci pour le tuto,

    En revanche, dans PS 1.7 est-il possible d’afficher les catégories des produits en liste et non en grille ? En effet il nous faut un produit affiché par ligne en vue d’intégrer un module déclinaisons qui est très large.

    Merci pour votre aide !

  8. Bonjour, bon tuto que voila.

    Je suis un Noob qui apprend, et à la recherche de conseils utiles.
    Lorsque que je crée une catégorie, celle ci apparaît dans le back office mais pas dans la boutique

    1. OK ! je me réponds .
      il faut faire cela en deux temps.
      créer la catégorie et l’ activer dans le module pré-installé  » MENU PRINCIPAL ».
      🙂

  9. Je n’ai point trouver le fichier. Moi c’est pour y mettre justement le texte de la catégorie, j’ai la version 1.6.7 de prestashop. Le texte de présentation n’est pas visible sur les pages de catégorie concernées.
    Le texte que l’ont indique
    dans le [Catalogue] / [Catégories] / [modifier la catégorie] / champ description
    merci

  10. Bonjour Germain,

    Grand merci pour vos vidéos. Etant complétement novice mais ayant une grande motivation pour créer mon site de e-commerce, elles me sont d’une grande utilité. Vos explications sont claires et vraiment accessibles. Grand merci pour tout ce travail.

    Cordialement

  11. Bonjour,
    Je veux me lancer dans la création de mon site de commerce électronique, j’ai trouvé un Template que j’aimais énormément chez addons.prestashop.com où les fonctionnalités sont intéressantes – Le Thème 01 Grid . Pourriez-vous me donner votre avis d’expert sur cette theme?
    Et je me lancez sur prestashop 1.7 au je reste sur le 1.6?

    Pour ceux qui utilisent la version 1.6.1.9 de prestashop, est-il obligatoire de migrer vers la version 1.7.2?
    Si nous voulons changer notre modèle existant par le -Thème 01 Grid- est-ce possible?

    1. Bonjour,

      Concernant le choix du template c’est vraiment une question de goût, mais pensez à regarder ma vidéo suivante à ce sujet sur le choix d’un template : https://www.youtube.com/watch?v=zv2X_fW2htE

      Le support de Prestashop 1.6 s’arrête en fin 2018, mais pour le moment la version 1.6 reste quand même plus mature. Si vous voulez éviter de devoir trop chercher des réponses à certains bugs, prenez plutôt la version Prestashop 1.6.

      A bientôt !

  12. Bonjour,
    j’ai suivi toutes les étapes ; modifier la taille des images pour les catégories, changer le category.tpl, regénérer les miniatures et vider le cache prestashop mais l’image reste à droite en miniature ( ??? )
    Je galère ….
    Merci pour toute aide .

  13. Bonjour,

    Est-ce possible de supprimer les sous-catégories dans le Menu de Prestashop 1.7, pour n’afficher qu’une ligne avec les catégories ?

    J’ai trouvé pour 1.6, mais je ne pense pas cela fonctionne sur 1.7

    Merci bien pour votre aide

    J’adore vos vidéos cela m’aide beaucoup pour développer ma boutique.

    1. Bonjour,

      Sincèrement j’ai pas regardé ce point, mais j’imagine que ça doit être dans le fichier « themes\classic\templates\catalog\_partials\miniatures\product.tpl » du thème qu’on doit ajouter cela. Le title n’influence pas la partie référencement.

      A bientôt !

    1. Bonjour,

      Cette modification fonctionne avec le thème par défaut, avec un thème personnalisé le comportement peut différer. Demandez à l’auteur du thème la zone de code à mettre en commentaire pour retirer l’affichage en haut à gauche.

      A bientôt !

  14. Bonjour
    puis je avoir les codes sources pour le bloc images dans category sur Prestashop 1,7, centrer l’image avec un intervalle après le texte.

    Merci d’avance pour vos videos

    Cordialement

    1. Bonjour,

      Essayez de reprendre le tutoriel et suivez la vidéo en même temps, tout en modifiant ou en retouchant la position du code dans le fichier .tpl, car ici je ne peux pas propose une adaptation à la demande de chacun. Regardez aussi les règles CSS sur Boostrap pour comprendre comment le système de grille fonctionne.

      A bientôt !

  15. Bonjour,

    Merci pour toutes vos vidéos et le temps que vous prenez pour répondre aux commentaires. Super boulot qui doit vous prendre un maximum de temps !!

  16. Salut tout le monde,
    Merci pour votre vidéo et vos commentaires à tous qui nous aident à avancer…
    Moi ce que j’aimerais faire c’est avoir la description des catégories sur l’image. En quelque sorte utiliser l’image des catégories comme arrière plan et que la description de la catégorie s’affiche sur l’image.
    Auriez vous une suggestion pour faire cela?

    Merci a vous

    1. Hello,

      Je n’ai pas une réponse tout faite pour ce point, cela impliquerait de mettre dynamiquement en mode background l’image de la catégorie dans le TPL du thème. Pour arriver à cela, cette approche nécessite de faire différemment au niveau du code, mais je n’ai pas testé cette méthode.

      A bientôt !

  17. Bonjour, ayant déjà créé une boutique Prestashop en 1.6 par le passé, je voulais savoir si tu avais une idée de comment modifier l’ordre de présentation / d’affichage de mes catégories.

    En effet, sous Prestashop 1.6, il était possible de glisser les catégories l’une haut dessus de l’autre comme bon nous semblait.

    Ici, dans la version 1.7, il n’y a plus cette possibilité. (Il est peut-être possible de le faire manuellement? Un grand merci et une bonne journée à toi !)

    1. Bonjour,

      Sous « Catalogue -> Catégories » cette fonction existe toujours pour l’ordonnancement des catégories. Parfois si la fonction ne semble pas s’afficher, il faut se déconnecter du back-office et se reconnecter (j’ai déjà vu ce cas de figure).

      A bientôt !

      1. Problème solutionné ce matin même! Ne fonctionne pas en mode multiboutique, en fait il suffit de modifier l’ordre de chaque domaine un à un 🙂

    1. Bonjour,

      Difficile de vous répondre sur ce point, à voir si le problème est présent avec le code du fichier TPL original et les règles CSS originales.

      A bientôt !

  18. bonjour,
    je regarde vos vidéos et cela me donne vraiment envie d’essayer, mais je suis tellement novice en la matière.
    Mon répertoire de prestashop est sur 1&1.
    il faut y mettre tout le fichier téléchargé ou il faut oter des éléments pour cette épisode 7.
    Merci de me répondre .

Laisser un commentaire

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