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)
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).
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
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.
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 »?
Bonjour,
Lorsque vous avez besoin de revenir sur des fichiers sources originaux, le plus simple est de re-télécharger une version de Prestashop sur le site officiel et de récupérer les fichiers concernés dans l’archive liée à votre version : https://www.prestashop.com/fr/versions-developpeurs
A bientôt !
Bonjour,
J’ai solutionné mon probleme. Je tiens à vous remercier pour les consels que vous prodiguez, ceux ci me sont très utiles et pourtant je suis novice!
Merci
Hello,
Bonne nouvelle, je profite aussi de vous remercier pour votre fidélité et vos commentaires.
A bientôt !
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.
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 !
.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
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 ?
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 !
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.
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 !
Bonjour
J’ai enlevé le quickview, et quand on passe sur le produitil y a encore un bandeau blanc (qui correspond aucaractéristiques ???).
Est-ce possible de l’enlever svp ?
Un grand merci pour vos tutos
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 !
Merci il fallait juste de mettre .highlighted-informations {display:none!important;}
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
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 !
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 !
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 !
Bonjour,
Je relance les commentaires concernant le problème de « XAVIER », j’ai le même, j’ai appliqué la modification, aucun changement.
Je cherche des idées à droite et à gauche mais rien de bien concret.
@Webbax, auriez vous une idée à me communiquer ?
Merci d’avance.
Cordialement,
Bonjour, je voulais changer PRODUITS POPULAIRES par une autre phrase, n’y arrivant pas j’ai suivi exactement la vidéo.
Cela est pareil.
Comment pourrais-je faire?
Merci d’avance.
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 !
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
Bonjour,
Dans le fichier « custom.css » de votre thème essayez d’ajouter :
#index .all-product-link{display:none!important;}A bientôt !
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; }Merci pour la contribution, ça pourra servir à ceux qui cherchent une alternative d’affichage pour les produits phares de Prestashop ! 😉
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….
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… 🙂