Produits phares Prestashop

Prestashop 1.7 – Module Produits Phares (ép.12)

Les produits phares de Prestashop, ça reste un grand classique qui perdure depuis les toutes premières versions. Profitons d’ajuster quelques détails sur le module, afin de maximiser les chances de vendre.

Episode 12

La demande qui revient souvent des e-commerçants, c’est de pouvoir mettre un maximum de produits en page d’accueil et qu’ils puissent tourner automatiquement. Actuellement il possible de le faire avec le module, mais je déconseille cette stratégie « fainéante », car elle ne repose pas réellement sur une stratégie de vente.

Il faut que les produits montrés à l’accueil, répondent à une certaine logique, à une périodicité… à un segment de votre catalogue. Proposer un brassage trop large de produits n’est pas une bonne idée. Je conseille donc de faire une sélection précise de quelques produits et qui soit aussi cohérente avec le volume de votre stock… (si vous avez beaucoup de stock et que vous désirez liquider un peu les quantités).

Deux points viennent noircir le tableau, le fait que l’on ne peut pas désactiver le quick-view via le configurateur de thème (puisqu’il n’existe plus dans la version 1.7) et aussi le fait que la largeur des colonnes produits soit définie en pixels dans le thème. Pour les colonnes pourquoi ne pas avoir fait le choix d’un pourcentage dynamique pour la largeur ?

Ce module reste un pilier important de votre page d’accueil, il est donc important de ne pas négliger les détails, au niveau du nombre de produits ainsi qu’au niveau de l’intitulé du bloc. Vous devez donner envie à vos clients d’acheter, sans forcément proposer un « bazar » géant de votre catalogue.

Ressources

Pour ce tutoriel vous avez à disposition :

  • Fichier product.tpl (\themes\classic\templates\catalog\_partials\miniatures\product.tpl)
  • Fichier theme.css.txt (extrait des règles pour le fichier themes.css)

Télécharger

Au programme

  • But du module ? Dynamiser la page d’accueil.
  • Découverte la configuration du module (nombre de produits, catégorie master & affichage en aléatoire).
  • Utilisation du tri de position via les catégories.
  • Modifier le titre du module pour rendre plus vendeur.
  • Retirer l’option « quick-view », pour plus de lisibilité (moins de points d’entrées & moins de page à optimiser + ajuster le fichier CSS).
  • Constatation du système de grille largeur fixe en pixels (mauvaise idée).

28 commentaires sur “Prestashop 1.7 – Module Produits Phares (ép.12)”

  1. Bonjour,
    un petit souci sur 1.7 : en pleine page les produits phares sont 4 par ligne. Avec une colonne latérale ils ne sont plus que 2 et désaxés. Comment en avoir 3 sur la largeur de la colonne principale svp ?
    Merci

    1. Bonjour,

      Pour cela il faudrait ajuster les règles CSS, mais je ne pourrais pas donner ici l’exemple exact pour obtenir ce résultat. Vous pouvez toujours vous faire aider par un intégrateur CSS.

      Merci pour votre visite.

  2. Bonjour,

    Par mégarde j’ai modifier le fichier product.tpl du dossier « partials » mais pas « miniatures » en appliquant le même code que celui du dossier « miniatures », du coup j’ai un problème d’affichage de mes produits depuis le menu par exemple. J’aimerais savoir comment récupérer le code d’origine du fichier product.tpl du dossier « partials » et non « miniatures »?

  3. Bonjour,
    Vidéo intéressante sur beaucoup de points.
    Cependant, concernant la fonction quickView, même si celle-ci paraît inutile et demande de renseigner du texte dans la short_description, je trouve que la supprimer d’un point de vue graphique n’est pas top, même en arrangeant le CSS.
    Pourquoi ne pas simplement remplacer $product.description_short…. par {$product.description ….dans quickview.tpl?
    Je pense que l’accès à l’info de cette manière évite de devoir cliquer sur le produit pour obtenir la description complète et perdre le bénéfice des produits présents sur la home.

    1. Hello,

      Effectivement peut-être que la suppression du « quick view » n’est pas indispensable. Disons que je n’aime pas trop cette fonction, car elle génère un popup de présentation de la fiche qui diffère légèrement de la page de produit classique (et donc cela fait 2 templates de pages produits à optimiser popup et non-popup).

      Sinon je n’ai pas vraiment d’explication à cela, il est bien sûr possible de faire autrement… Disons que je fais ces tutos en improvisation assez « rapidement »… et je pense qu’il est possible de faire mieux, mais c’est déjà une base d’optimisation.

      A bientôt et merci pour ta proposition !

      1. .Oui …c’était juste une idée comme ca.
        Merci en tout cas pour ces tutos qui aident bien (moi le premier) à la prise en main des différence de ce Presta 1.7 avec le 1.6
        Cdlt

  4. Bonjour,
    Les modifications faites du CSS, que ce soit pour le quick view ou autre, vont être effacées à la première mise à jour du thème, ou de Prestashop.
    N’y a t-il pas un moyen de modifier le CSS durablement même en cas de mise à jour du thème, genre module CSS additionnel comme on le voit dans des thèmes WordPress par exemple ?

    1. Bonjour,

      Dans le dossier du thème, il y’a un fichier « custom.css » vous pouvez mettre les règles CSS dans ce fichier. Sinon vous pouvez aussi faire une copie du thème de manière à avoir un thème personnalisé qui ne soit pas impacté par les mises à jour de Prestashop.

      Merci pour votre visite !

      1. Merci à vous pour vos conseils et votre vidéo.
        J’ai effectivement créé un thème enfant de Classic. Mais je ne sais pas où mettre les CSS. Ce que je souhaite c’est garder mes modifications de thème, et faire les mises à jour de Prestashop.

        1. Bonjour,

          Actuellement je n’ai pas vraiment expérimenté les thèmes enfants dans Prestashop 1.7. Comme ça je dirais… peut-être « dupliquer » le thème pour que le dossier « copie » soit jamais impacté par les changements.

          Il faudra que je teste à l’occasion…

          A bientôt !

    1. Bonjour,

      Pour cela il faudrait essayer de tester en jouant avec les règles CSS que j’ai proposées dans le tutoriel. Difficile de répondre précisément à cette demande.

      A bientôt !

  5. Bonjour Webbax j ai un énorme probleme j ai des declinaisons à faire lot de 3 et lot de 6 rien de bien compliqué mais j ai un gros prb et ca vient de prestashop car je les ai contacté mais il n ont aucune réponse valable à me donner à part me dire que c un bug et c compliqué …. j ai besoin pour chaque produit d’un site de faire deux declinaisons supplémentaires comme un lot de 3 et de 6 …….. j ajoute TTC un chiffre comme 5 euros en plus pour lot de 3 et 9 euros en plus TTC pour olot de 6 …le chnagement s opere bien et puis ca me met un chiffre qui n est pas bon kk temps aprés …je ne peux aps refaire tout les produits car ca serait bcp trop long et je en sais mm pas si ca serait mieux de tte facon ..je désespère on ml a conseillé de prendre prestashop pour eviter woocommerce et plugins etc a ajouter parametrages etc.. et pour finir je regrette amèrement d avoir pris prestashop etant donné que meme eux n ont pas de solutions a ce « BUG » …je suis écoeuré comment ce CMS peut il mettre en ligne kkchose qui ne fonctionnne pas correctement ? merci de ta réponse

    1. Bonjour,

      Difficile de vous répondre sur ce point, en ce qui concerne le prix pour les déclinaisons je conseille de laisser le prix de base à zéro et sur la déclinaison de mettre une augmentation du prix à 100%, afin d’éviter de devoir calculer le différentiel. Vous pouvez tester cette méthode pour voir si cela corrige votre problème au niveau du prix.

      A bientôt !

  6. tiens avez vous le même problème, qd le cache smarty est actif le module pour afficher des produits aléatoires ne fonctionne plus.

    Il n’afffiche que des produits aléatoires une fois puis affiche toujours les même produits même en rafraichissant la page !

    Obliger de vider le cache pour que l’aléatoire revinne une fois seulement !

    1. Bonjour,

      A tester peut-être dans le fichier du module vers la ligne 242 : « modules\ps_featuredproducts\ps_featuredproducts.php »

      De commenter ces deux lignes pour tester… mais c’est à voir :

       //if (!$this->isCached($this->templateFile, $this->getCacheId('ps_featuredproducts'))) {
      	$variables = $this->getWidgetVariables($hookName, $configuration);
      
      	if (empty($variables)) {
      		return false;
      	}
      
      	$this->smarty->assign($variables);
      //}
      

      A bientôt !

    1. Hello,

      Il faut parfois ensuite « vider » le cache de Prestashop pour que la modification soit prise en compte (suite à un changement de traduction).

      A bientôt !

  7. Bonsoir, je voudrais juste savoir si c’est possible svp, de supprimer le « tous les produits » écrit en bas à droite des produits phares.
    Le site est généralement utilisé sur smartphone alors le fait qu’il n’y est qu’un seul produit phare ne pose pas de problème mais si je pouvais avoir une solution pour remédier à ce gros vide laisser, par le fait qu’il n’y est qu’un seul produit phare se serait cool.
    Cordialement, Bien merci

    1. Bonjour,

      Dans le fichier « custom.css » de votre thème essayez d’ajouter :

      #index .all-product-link{display:none!important;}
      

      A bientôt !

  8. Petit Hack CSS pour modifier le nombre de produits par ligne sur la page d’accueil.
    C’était important pour moi alors j’ai écumé les forums et voici une solution.

    il s’agit de modifier la taille de tous les produits, et containers.
    dans le code ci dessous à mettre dans le CUSTOM.CSS, les modifications permettent d’avoir 5 produits par ligne….
    Ensuite ne pas oublier d’aller modifier la taille des images du HOME DEFAULT dans le backoffice images et régénérer les miniatures.
    bien sur on travaille en ayant désactivé le cache…
    Code à coller dans le custom.css:

    /* MODIFICATION DE NOMBRE DE PRODUITS PAR LIGNE
    penser aussi a réduire la taille des images HOME DEFAULT faire un carré de la valeur de width moins 4px puis régénérer les miniatures*/
    #products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
        position: relative;
        margin-bottom: 1.5625em;
        height: 214px;
        width: 170px;
        background: #fff;
        box-shadow: 0 0 5px 3px rgba(0,0,0,.05);
    }
    
    
    #products .highlighted-informations, .featured-products .highlighted-informations, .product-accessories .highlighted-informations, .product-miniature .highlighted-informations {
        position: absolute;
        bottom: 1.25rem;
        z-index: 0;
        background: #fff;
        text-align: center;
        width: 170px;
        height: 3.125rem;
        padding-top: .3125rem;
        box-shadow: 0 -5px 10px -5px rgba(0,0,0,.2);
        transition: bottom .3s;
    }
    
    #products .product-description, .featured-products .product-description, .product-accessories .product-description, .product-miniature .product-description {
     position: absolute;
     z-index: 1;
     background: #fff;
     width: 170px;
     bottom: 0;
     height: 70px;
    }
    
    #products .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, .product-miniature .product-miniature {
        margin: 1.1rem;
    }
    
    1. Merci pour la contribution, ça pourra servir à ceux qui cherchent une alternative d’affichage pour les produits phares de Prestashop ! 😉

  9. Ah oui…. au fait , une fois la taille des containers et images modifiées, on peut ajuster aussi en jouant avec la dernière valeur margin tout en bas du code.
    Par exemple mettre 2rem à a place de 1.1rem permettra d’espacer les produits et d’en avoir 4 par lignes au lieu de 5 mais en conservant la petite taille donc bien aérés….

  10. Je continue à préciser au sujet du margin tout en bas pour obtenir 4 produits:
    remplacer par
    margin-left: 5rem;
    le centrage est meilleur ainsi…
    Désolé pour les messages à répétition, je m’auto-commente au fur et a mesure que j’améliore… 🙂

Laisser un commentaire

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