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é

69 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

    Répondre

  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 !

    Répondre

    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…

      Répondre

  5. 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

    Répondre

    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 !

      Répondre

  6. 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?

    Répondre

    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 !

      Répondre

      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%;
        }

        Répondre

  7. 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.

    Répondre

    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 !

      Répondre

  8. 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..) ???

    Répondre

    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 !

      Répondre

  9. 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 !

    Répondre

  10. 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

    Répondre

    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 ».
      🙂

      Répondre

  11. 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

    Répondre

  12. 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

    Répondre

  13. 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?

    Répondre

    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 !

      Répondre

  14. 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 .

    Répondre

  15. 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.

    Répondre

  16. Bonjour,
    Dans les catégories, les photos miniatures des produits ont la balise alt mais pas la title. Comment la rajouter s’il vous plait ?

    Répondre

    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 !

      Répondre

    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 !

      Répondre

  18. 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

    Répondre

    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 !

      Répondre

  19. 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 !!

    Répondre

  20. 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

    Répondre

    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 !

      Répondre

  21. 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 !)

    Répondre

    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 !

      Répondre

      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 🙂

        Répondre

    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 !

      Répondre

  23. 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 .

    Répondre

  24. Bonjour
    J’ai essayé de suivre le tuto mais malheureusement le contenu du fichier category.tpl de votre version prestashop est différent du nôtre qui tourne sous prestashop 1.7.5

    Répondre

    1. Bonjour,

      C’est bien possible que le fichier a déjà évolué… vous pouvez essayer de faire une comparaison avec Winmerge pour voir la différence entre les deux fichiers (zones modifiées).

      A bientôt !

      Répondre

    2. Bonjour Amath,

      J’ai le même soucis sur la version 1.7.4, avez-vous trouver comment modifier le fichier pour arriver au même résultat?

      Merci d’avance et à bientôt

      Alain

      Répondre

  25. Bonjour Webbax et une fois de plus merci pour ces magnifiques tutos.
    J’ai mis en place cet épisode, cela fonctionne à merveille chez moi (Prestashop 1.7.2.2, thème CLASSIC). Seul bémol, les images apparaissent avec un cadre (épaisseur du cadre 1 pixel, couleur noire ou gris foncé) de la taille par défaut des images de catégories, sauf si je n’ai pas mis d’image (dans ce cas un petit carré vide pais avec un contour noir d’1 pixel apparait dans la partie gauche de l’espace réservé à la photo). Ce (léger) cadre ne colle pas trop avec l’ensemble du reste du site. Je suppose qu’il y a une manip à faire dans les styles pour le retirer, mais là j’avoue ne pas trop savoir comment m’y prendre. Quelqu’un a-t’il déjà eu ce problème et comment a-t’il été résolu ?
    Merci pour vos réponses éclairées…

    Répondre

  26. Bon ben là encore la réponse de Webbax est idoine…
    Il suffit en fait de bien suivre le magnifique tuto et on peut faire (presque…) tout ce qu’on veut. Celà dit, je ne suis ni informaticien ni infographiste, et je trouve une chose un peu curieuse tout de même : en fait, c’est carrément le bazar dans Prestashop, on peut faire des choses à plein d’endroits différents pour obtenir un même résultat, çà ne fait pas très rigoureux tout çà… mais bon, peu importe, ce qui compte c’est le résultat et finalement avoir une procédure très rigoureuse des adaptations et mises à jour et de leur suivi, si on veut y revenir plus tard sans trop galérer…
    Enfin en tous cas, merci encore à Webbax, le problème de ce « Border » est réglé et j’en ai même profité pour modifier un peu plus le thème grâce au tuto Modifier CSS-épisode 16 (j’ai viré cette couleur turquoise que je ne supportais plus guère…). Bon, maintenant je m’attaque au menu, vaste chantier…
    A bientôt.

    Répondre

    1. Bonjour,

      Tout à fait il y a énormément de méthodes possibles, dans un 1er temps ce qui compte c’est le résultat affiché… puis par la suite on peut « mieux » se structurer. C’est aussi ça le web… beaucoup de liberté !

      A bientôt !

      Répondre

  27. Bonsoir Germain

    Comme d’habitude, c’est un vrai plaisir de suivre tes tutos. Je viens de suivre le 17 sur le SEO methode W pour les catégories. Je suis donc intervenue sur le fichier category.
    et là je voulais que ma photo de catégories prenne toute la place du cadre, comme tu le conseilles dans ce tuto. Mais ça coince chez moi…je ne sais pas où je me plante mais je n’arrive pas à faire la modif du fichier category sans faire planter mon site…
    voici mon fichier à l’heure actuelle donc avec renvoi du descriptif en bas de page mais une toute petite photo de catégorie ;
    {block name=’product_list_header’}

    {$category.name}
    {* Webbax – Tuto SEO 17 *}
    {*
    {if $category.description}
    {$category.description nofilter}
    {/if}
    *}
    {if $category.image.large.url}

    {/if}

    {$category.name}

    {* Webbax – tuto 25 *}

    {* Webbax – tuto 25 – V2 *}
    {if !empty($subcategories)}
    {l s=’Sous-catégories’}
    {/if}

    {foreach from=$subcategories item=subcategory}

    getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:’html’:’UTF-8′} » title= »{$subcategory.name|escape:’html’:’UTF-8′} » class= »img »>


    getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:’html’:’UTF-8′} »>{$subcategory.name|truncate:25:’…’|escape:’html’:’UTF-8′}

    {/foreach}

    {* — *}

    {/block}

    peux tu m’aider ?
    encore merci

    Répondre

    1. Hello,

      Est-ce que tu as essayé de prendre directement le fichier que je propose dans l’archive à télécharger pour voir si celui-ci fonctionne correctement ? Tu peux aussi comparer ce fichier avec ton fichier modifié (via WinMerge pour voir les différences).

      A bientôt !

      Répondre

  28. Bonjour Germain,
    Merci tout d’abord pour tous ces tutos très utiles sur prestashop 1.7

    Je rencontre un petit souci sur Gestion des Catégories (ép.7).
    sur mon tpl de ma version 1.7.5.1 de presta est celui ci:
    {extends file=’catalog/listing/product-list.tpl’}

    {block name=’product_list_header’}
    {include file=’catalog/_partials/category-header.tpl’ listing=$listing category=$category}
    {/block}
    Après avoir fait plusieurs essaye avec ton tpl, je me suis aperçu que dans ta video ton tpl de base n’avais pas la ligne:
    {include file=’catalog/_partials/category-header.tpl’ listing=$listing category=$category}

    J’ai bien redimensionner mon image de catégorie.
    Mais rien a faire cela ne fonctionne pas!!!
    as tu une idée
    Merci par avance
    Gregory

    Répondre

    1. Hello,

      Difficile à dire… dans le cas présent il faudrait faire une comparaison des 2 fichiers avec WinMerge (de ton fichier / avec celui fourni dans l’archive en téléchargement). Puis ensuite modifier ligne à après ligne pour voir exactement quand cela bloque.

      A bientôt !

      Répondre

  31. Bonjour

    Bravo pour tous ces tûtes qui permettent de se débrouiller dans la jungle des sites …

    Je voudrais enlever la description de catégories au dessus de l image qu il n y ai que le titre et l image mais est ce que ça va impacter le referencement ?

    Merci d avance

    Répondre

  32. Bonjour webbax,

    merci pour ce tuto j’aimerai savoir comment réduire justement la taille de ce block. Sachant que j’ai déjà tenté des height:10px ect mais rien n’y fait..

    Merci d’avance

    Répondre

  34. Bonjour Webbax,
    Un grand merci pour tes videos qui me permettent d’esayer de progresser à 54 ballets.
    j’ai appliqué la règles sans problème, sauf que les images ne s’affichent pas sur mobile.
    un coup de pouce serait le bienvenue.
    Merci pour tout
    bises
    Manu

    Répondre

    1. Bonjour,

      Sur la version 1.7.7.8 il faut rajouter cette règle dans le custom.css

      @media screen and (max-width:767px){
        .category-cover{display:block;}
}

      cela fonctionne peut être pour d’autre version mais je n’ai pas testé.

      Répondre

      1. Bonjour Franck,

        Peux-tu me dire ce que tu as fait exactement pour arriver à tes fins sur le prestashop version 1.7.7.8 ?

        J’ai essayé pas mal de choses, mais impossible de mettre mon image de catégorie après le texte et sur toute la largeur comme Webbax. Mais vu que le tuto date de la toute première mouture de la version 1.7 et que depuis cela a bien changé je suis perdu.

        Merci pour ton aide.
        Eric

        Répondre

  35. bonjour a tous

    je suis en 1.7.6.9 et j’ai le même souci. mon fichier est quasi vide :

    {extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    {include file='catalog/_partials/category-header.tpl' listing=$listing category=$category}
{/block}

    et quand je fais la modif il ne se passe rien ….. donc la modif est a faire ailleurs ou différemment

    si quelqu’un a une idée ….

    Répondre

  36. Bonjour,

    merci pour ce tuto et pour tout votre travail.

    J’ai tenté ma chance (je n’y connais absolument rien..) car vous rendez les choses accessibles (ca ne marchait pas puis c’était bon en faisant « recompiler les fichiers de templates s’ils ont été mis a jour »)

    J’ai donc réussi à produire l’effet voulu sur l’image de la catégorie, mais cela pose un bug sur mobile : Un décalage a gauche du début du footer).

    Avez vous déjà rencontré ce problème?

    Merci

    Répondre

Laisser un commentaire

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