Tout ce que vous voudriez savoir avant d'installer.
Un regard détaillé sur le fonctionnement de Module Carrousel de Catégories PrestaShop 8/9 : Catégories en Page d'Accueil, pourquoi nous l'avons conçu ainsi, et la réflexion derrière les fonctionnalités ci-dessus.
Une vitrine de catégories qui se règle, pas un bloc figé
Le bloc de catégories natif de PrestaShop affiche une liste de liens ou des vignettes au format imposé par le thème. Ici, chaque vitrine se configure dans un formulaire en onglets : disposition, nombre de lignes, colonnes sur ordinateur, tablette et mobile, espacement, largeur du conteneur, fond de section. Vous choisissez les catégories à la main et les ordonnez par glisser-déposer, ou vous laissez le module afficher les sous-catégories d'un rayon, avec une limite. Une vitrine de démonstration est créée à l'installation sur la page d'accueil pour voir le rendu tout de suite.
Image, nom et texte personnalisés pour chaque catégorie
Une catégorie s'appelle souvent « Vêtements femme » dans le catalogue alors qu'on veut afficher « Nouvelle collection » en vitrine. Chaque catégorie ajoutée à une vitrine accepte donc un nom personnalisé, une description courte, une image dédiée et une image mobile au cadrage plus serré, un badge, un texte de bouton et un lien vers une page filtrée ou une landing page. Sans personnalisation, le module reprend l'image et le nom de la catégorie. Pour l'image, il choisit automatiquement le format PrestaShop le plus net disponible, car le format category_default de PrestaShop 8 ne fait que 141 x 180 px.
Carrousel, grille ou masonry, sur 1 à 3 lignes
Le carrousel fait défiler 1, 2 ou 3 lignes ensemble, avec flèches, points, boucle et autoplay optionnel. Sur mobile, il laisse dépasser une partie de la carte suivante pour montrer que la rangée se balaie. La grille affiche vos catégories en colonnes régulières, avec une limite de lignes si vous le souhaitez. La masonry propose trois styles : hauteurs d'image naturelles, hauteurs alternées ou première catégorie mise en avant sur 2 x 2. Quand une rangée contient moins de catégories que de colonnes, elle s'aligne sur le titre au lieu de rester collée à gauche.
5 presets pour démarrer, 81 options pour finir
Le preset « Cercles » donne en un clic des images rondes façon story Instagram, 6 par ligne sur ordinateur. « Overlay » pose le texte sur l'image avec un dégradé, « Bannières » affiche 2 grandes tuiles avec le nom en capitales, « Cartes » met chaque catégorie dans une carte blanche avec description et lien. Le preset remplit les options de design à l'enregistrement, puis tout reste modifiable : couleurs, tailles, arrondis, bordures, ombres, 6 effets au survol, position du texte, style du bouton et du badge. Un champ CSS personnalisé, ciblé sur l'identifiant de la vitrine, couvre les derniers détails.
Sur la page d'accueil, les pages catégorie ou n'importe où
Chaque vitrine choisit son hook dans une liste ou dans un champ libre : un nom de hook inconnu est créé et greffé automatiquement, et le module se retire des hooks qui ne servent plus. La source « catégorie consultée » affiche sur chaque page catégorie ses propres sous-catégories, avec une seule vitrine pour tout le catalogue. Le hook displayDfCategoryShowcase et la balise widget permettent de placer une vitrine précise dans n'importe quel template. Des dates de début et de fin et une restriction par groupe clients servent les opérations saisonnières et les sélections B2B.
Rapide et accessible
Le carrousel utilise le défilement natif du navigateur (CSS scroll-snap), piloté par environ 3 Ko de JavaScript compressé, sans jQuery. Les images envoyées sont déclinées en 480 et 960 px et servies avec srcset et sizes calculés d'après vos colonnes. La première image est chargée tout de suite, les suivantes en lazy loading, avec des attributs width et height. Le rendu est en cache Smarty et se vide seul quand une catégorie ou un produit change. Côté accessibilité : section étiquetée par son titre, boutons et points annoncés aux lecteurs d'écran, navigation au clavier avec focus visible, pause de l'autoplay au focus et respect de prefers-reduced-motion.
Il n’y a pas encore d’avis.