Product Carousel Pro — Carrousels Produits Illimités (dfproductcarousel)

Product Carousel Pro crée des carrousels de produits illimités partout dans votre boutique PrestaShop : meilleures ventes, nouveautés, promotions, produits d’une catégorie ou sélection manuelle triée à la main, affichés sur six hooks standards ou sur vos propres hooks personnalisés créés à la volée. La particularité du module : les cartes produits sont rendues par le template de miniature de votre thème actif, via ProductAssembler et ProductPresenter. Prix, flags, aperçu rapide et ajout au panier fonctionnent exactement comme sur vos pages catégories.

Installation

1. Dans votre back-office PrestaShop, ouvrez Modules > Gestionnaire de modules.
2. Cliquez sur Installer un module et déposez le fichier dfproductcarousel.zip.
3. Un onglet Product Carousel Pro apparaît sous le menu Modules : c’est là que tout se passe (le bouton Configurer du module y redirige également).

Le module crée trois tables (carrousels, titres multilingues, association boutiques) et s’enregistre sur six hooks d’affichage plus actionFrontControllerSetMedia pour ses assets. Les hooks personnalisés que vous créerez ensuite s’enregistrent automatiquement à la sauvegarde du carrousel concerné.

Créer un carrousel

Depuis la liste, cliquez sur Ajouter un carrousel. Le formulaire est organisé en cinq blocs : Contenu, Placement, Mise en page, Style et Comportement.

• Nom interne : visible uniquement en back-office, pour vous y retrouver dans la liste.
• Titre et sous-titre : multilingues, affichés au-dessus du carrousel. Laissez le titre vide pour ne pas afficher d’en-tête du tout.

La liste des carrousels permet ensuite l’activation en un clic, la duplication (la copie est créée désactivée) et les actions groupées de suppression.

Sources de produits

Chaque carrousel choisit sa source parmi six :

• Meilleures ventes : les produits les plus vendus de la boutique.
• Nouveautés : les produits marqués comme nouveaux (le délai est celui de votre réglage PrestaShop « Nombre de jours durant lesquels le produit est considéré comme nouveau »).
• Promotions : les produits ayant une réduction en cours.
• Produits d’une catégorie : choisissez la catégorie dans l’arbre de sélection, les produits suivent l’ordre de la catégorie.
• Catégorie d’accueil : les produits de la catégorie racine de la boutique, l’équivalent des « produits phares » natifs.
• Sélection manuelle : vous choisissez les produits un par un.

Le champ Nombre maximum de produits plafonne le nombre de produits chargés, quelle que soit la source.

La sélection manuelle

Tapez au moins deux caractères dans le champ de recherche : l’autocomplétion trouve vos produits par nom ou référence. Chaque produit cliqué s’ajoute à la liste en dessous, avec sa poignée de déplacement : réordonnez par glisser-déposer, le front-office affiche les produits exactement dans cet ordre. Les produits désactivés ou invisibles dans le catalogue sont filtrés automatiquement à l’affichage, sans casser le carrousel.

Choisir l’emplacement

Hooks standards

Six hooks sont proposés dans la liste déroulante :

• displayHome : page d’accueil ;
• displayContentWrapperTop et displayContentWrapperBottom : au-dessus et en dessous du contenu principal, sur la plupart des pages ;
• displayFooterBefore : juste avant le pied de page ;
• displayFooterProduct : en bas de la fiche produit, l’emplacement classique du cross-selling ;
• displayShoppingCartFooter : sous le récapitulatif du panier.

Plusieurs carrousels peuvent partager le même hook : ils s’empilent dans l’ordre de leur champ Position.

Hooks personnalisés

Sélectionnez Hook personnalisé dans la liste, puis saisissez un nom dans le champ qui apparaît, par exemple MonCarrousel. À la sauvegarde, le module nettoie le nom (lettres et chiffres uniquement), le préfixe en displayMonCarrousel si nécessaire, l’enregistre auprès de PrestaShop et se met à l’écoute. Placez ensuite l’appel dans le template de votre choix :

{hook h='displayMonCarrousel'}

Le hook créé rejoint la liste déroulante pour les carrousels suivants. Vous pouvez créer autant de hooks que nécessaire.

Syntaxe widget

Pour afficher un carrousel précis indépendamment de son hook, utilisez la syntaxe widget avec l’identifiant visible dans la première colonne de la liste :

{widget name='dfproductcarousel' carousel=3}

Pratique dans une page CMS ou un template sur mesure. Le carrousel doit être actif pour s’afficher.

Mise en page

• Produits par rangée : trois valeurs indépendantes, de 1 à 8, pour le desktop (992 px et plus), la tablette (768 à 991 px) et le mobile (moins de 768 px). La configuration classique est 4 / 3 / 1.
• Mode de défilement : « Un produit à la fois » avance d’une carte par clic, « Rangée complète » avance d’une page entière.
• Espacement : la distance en pixels entre les cartes (20 px par défaut).
• Pleine largeur : le carrousel sort de son conteneur pour occuper toute la largeur de l’écran, du plus bel effet en page d’accueil avec le skin Section sombre.

Style

Les cinq skins

• Classique : les cartes produits du thème strictement intactes. C’est le choix par défaut et le plus sûr.
• Minimal : supprime ombres et bordures pour un rendu plat.
• Carte : ombre portée, coins arrondis et légère élévation au survol.
• Contour : un liseré fin autour de chaque carte, qui prend la couleur d’accent au survol.
• Section sombre : pose tout le carrousel sur un fond foncé, titre et pagination adaptés.

Réglages complémentaires

• Alignement du titre : gauche, centre ou droite, le soulignement d’accent suit.
• Couleur d’accent : utilisée pour les flèches au survol, la pagination active et le soulignement du titre. Laissez vide pour hériter de la couleur principale de votre thème.
• Flèches : affichées ou non, en trois styles (cercle, carré, minimal sans fond).
• Pagination : points ou barres, générée automatiquement selon le nombre de pages.

Comportement

• Autoplay : défilement automatique avec délai configurable (5 000 ms par défaut, 1 000 ms minimum). La lecture se met en pause quand l’onglet du navigateur est masqué.
• Pause au survol : suspend l’autoplay tant que le curseur est sur le carrousel.
• Boucle infinie : le carrousel repart au début sans à-coup grâce au clonage transparent des extrémités. Sans cette option, les flèches se désactivent en bout de course.

Quel que soit le réglage, le carrousel se pilote au doigt (swipe tactile et souris, avec protection contre les clics accidentels en fin de geste), au clavier (flèches gauche et droite quand le carrousel a le focus) et respecte le sens de lecture RTL ainsi que la préférence système prefers-reduced-motion.

Rendu natif du thème : comment ça marche

• Les produits sont assemblés et présentés par ProductAssembler et ProductPresenter, les mécanismes que PrestaShop utilise lui-même pour ses listings.
• Chaque carte est ensuite rendue par le template catalog/_partials/miniatures/product.tpl de votre thème actif : prix, promotions, flags, aperçu rapide et ajout au panier sont ceux du thème, sans aucune adaptation.
• Le module n’écrit jamais dans les fichiers du thème : il charge sa propre feuille de style pour la mécanique du carrousel, après le CSS du thème.
• Un produit en erreur est ignoré silencieusement plutôt que de casser tout le carrousel.

Multiboutique

Chaque carrousel est associé aux boutiques du contexte au moment de sa sauvegarde. Pour créer un carrousel sur une boutique précise, placez-vous dans son contexte via le sélecteur multiboutique avant de le créer. Un carrousel sauvegardé en contexte « Toutes les boutiques » s’affiche partout.

Dépannage

• Le carrousel n’apparaît pas : vérifiez dans l’ordre que le carrousel est actif, que sa source renvoie au moins un produit (une catégorie vide ou une sélection manuelle de produits désactivés produisent un carrousel muet), que le hook choisi existe bien sur la page consultée, et videz le cache PrestaShop (Paramètres avancés > Performances).
• Le hook personnalisé n’affiche rien : le nom dans {hook h='...'} doit correspondre exactement au nom enregistré, préfixe display compris, visible dans la colonne Hook de la liste. Après ajout de l’appel dans un template, videz le cache Smarty.
• Les flèches n’apparaissent pas : elles sont masquées automatiquement quand tous les produits tiennent dans une seule rangée. Ajoutez des produits ou réduisez le nombre de colonnes.
• Le skin Carte ou Contour rend mal avec mon thème : certains thèmes appliquent déjà ombres et bordures à leurs miniatures. Repassez sur le skin Classique, qui ne touche à rien, ou Minimal, qui neutralise les effets du thème.
• Deux carrousels dans le mauvais ordre sur un même hook : ajustez leur champ Position, l’affichage suit l’ordre croissant.
• La recherche de produits ne propose rien : la recherche démarre à deux caractères et interroge les noms et références de la langue en cours d’édition.

Désinstallation

La désinstallation supprime les trois tables, l’onglet back-office et les hooks enregistrés. Votre thème et vos templates restent intacts ; seuls les appels {hook h='...'} que vous avez ajoutés manuellement dans vos templates sont à retirer vous-même (un hook sans module à l’écoute n’affiche simplement rien et ne produit aucune erreur).