Category Showcase : documentation du carrousel de catégories PrestaShop

Installation

Dans le back-office, ouvrez Modules > Gestionnaire de modules, cliquez sur « Installer un module » et envoyez le fichier dfcategoryshowcase.zip. Le module est compatible PrestaShop 8.0 à 9.x.

À l’installation, le module crée ses tables, le dossier /img/dfcategoryshowcase/ pour les images envoyées, le hook displayDfCategoryShowcase et une vitrine de démonstration : les sous-catégories de la catégorie Accueil, en carrousel, sur la page d’accueil. Ouvrez votre boutique pour voir le rendu, puis modifiez ou supprimez cette vitrine.

Le module se gère depuis Apparence > Category Showcase (le bouton « Configurer » du module y mène aussi).

Créer une vitrine

Cliquez sur « Ajouter une vitrine ». L’onglet Général contient :

• Nom interne : visible uniquement dans le back-office.
• Hook : l’emplacement d’affichage (voir plus bas).
• Disposition : carrousel, grille ou masonry.
• Preset de design : applique un style complet à l’enregistrement (voir plus bas).
• Catégories affichées : la source des catégories.
• Titre, sous-titre, texte et lien « Voir tout » : par langue.

Les trois sources

• Choisies à la main : après l’enregistrement, le module vous amène à l’écran des catégories de la vitrine. Ajoutez-les une par une et réordonnez-les par glisser-déposer.
• Sous-catégories d’une catégorie parente : choisissez la catégorie parente et, si besoin, un nombre maximum. La liste suit votre catalogue.
• Sous-catégories de la catégorie consultée : à utiliser avec displayHeaderCategory ou displayFooterCategory. Chaque page catégorie affiche ses propres sous-catégories. Une catégorie sans sous-catégorie n’affiche rien.

Dans les deux modes « sous-catégories », ajouter une catégorie dans l’écran des catégories sert uniquement à la personnaliser. La désactiver la masque de la vitrine.

Personnaliser une catégorie

Depuis la liste des vitrines, cliquez sur « Catégories » puis ajoutez ou modifiez une catégorie. Chaque champ vide reprend la valeur de la catégorie PrestaShop :

• Image personnalisée : JPG, PNG, WebP ou GIF. Le module génère des copies de 480 et 960 px, servies automatiquement aux petits écrans.
• Image mobile : facultative, affichée sous 768 px. Pratique pour un cadrage plus serré.
• Nom et description courte : les retours à la ligne de la description sont conservés.
• Badge : par exemple Nouveau, Promo ou -30%.
• Texte du bouton et lien : le lien peut viser une page filtrée ou une landing page. Seuls les liens http(s), relatifs, les ancres, mailto: et tel: sont acceptés.
• Classe CSS : ajoutée à la carte.

Une même catégorie ne peut être ajoutée qu’une fois par vitrine.

Design

Presets

Le champ « Preset de design » de l’onglet Général propose Minimal, Cartes, Overlay, Cercles et Bannières. Le preset remplace les options qu’il couvre (image, carte, textes, bouton, colonnes) au moment de l’enregistrement. Le champ revient ensuite sur « Garder mes réglages » et toutes les options restent modifiables.

Onglets de réglage

• Disposition : lignes (1 à 3), colonnes sur ordinateur (1 à 8), tablette (1 à 6) et mobile (1 à 4), espacement, limite de lignes pour la grille et la masonry, style de masonry, conteneur (colonne du thème, encadré avec largeur maximale, pleine largeur), marges et fond de section.
• En-tête : affichage du titre, balise (H2 conseillé sur la page d’accueil), alignement, couleurs et tailles, position et style du lien « Voir tout ».
• Image : format d’image PrestaShop (« Automatique » choisit le format le plus net d’au moins 400 px, sinon l’image d’origine), ratio, recadrage ou image entière, forme ronde, fond, lazy loading.
• Carte : arrondi, bordure, ombre, fond, marge intérieure, effet au survol, durée d’animation.
• Textes : position (sous l’image, sur l’image en haut, au centre ou en bas, ou aucun texte), voile, typographie du nom, description, compteur de produits.
• Bouton et badge, Carrousel, Visibilité, Avancé : voir les sections suivantes.

Avec la forme ronde, le texte passe toujours sous l’image.

Carrousel

Les options de l’onglet Carrousel s’appliquent quand la disposition est « Carrousel » : défilement automatique et délai, pause au survol, boucle, nombre de colonnes défilées par clic, flèches (sur le carrousel, en dehors sur grands écrans, ou à côté du titre), couleurs, points de navigation, aperçu de la catégorie suivante sur mobile, glisser à la souris.

Avec 2 ou 3 lignes, les catégories remplissent chaque colonne de haut en bas, puis les lignes défilent ensemble. L’autoplay se met en pause au survol, au focus clavier, au toucher, quand l’onglet est caché ou quand le carrousel sort de l’écran. Il est désactivé si le visiteur a demandé moins d’animations dans son système.

Où afficher une vitrine

• displayHome : page d’accueil.
• displayHeaderCategory et displayFooterCategory : pages catégorie, au-dessus ou sous les produits.
• displayDfCategoryShowcase : hook créé par le module, à appeler où vous voulez dans le thème avec {hook h='displayDfCategoryShowcase'}.
• Hook personnalisé : choisissez « Hook personnalisé… » et saisissez un nom (lettres, chiffres, – et _). Un hook inexistant est créé et greffé automatiquement. Appelez-le avec {hook h='votreHook'}. Un ancien nom de hook (alias) est enregistré sous son nom réel.
• Widget : {widget name='dfcategoryshowcase' id_showcase=1} affiche une vitrine précise, quel que soit son hook.

Plusieurs vitrines peuvent partager un hook : elles s’affichent dans l’ordre de la liste, modifiable par glisser-déposer. Le module se retire automatiquement des hooks qui ne sont plus utilisés.

Visibilité

• Afficher à partir du / jusqu’au : dates au format AAAA-MM-JJ HH:MM:SS. Vide = sans limite.
• Groupes de clients : la vitrine ne s’affiche que pour les groupes cochés (Visiteur, Invité, Client ou vos groupes B2B). Tous cochés = aucune restriction.
• Masquer sur mobile / sur ordinateur (onglet Avancé) : sous 768 px ou à partir de 1024 px.
• Boutiques : en multiboutique, associez chaque vitrine aux boutiques voulues.

Dupliquer une vitrine

L’action « Dupliquer » de la liste copie la vitrine avec ses catégories, ses textes, ses boutiques et ses images. La copie est créée désactivée : modifiez-la puis activez-la.

CSS personnalisé

Chaque vitrine est rendue dans <section id="dfcs-ID">, où ID est le numéro affiché dans la liste. Le champ « CSS personnalisé » de l’onglet Avancé n’est imprimé qu’avec cette vitrine. Exemple :

#dfcs-2 .dfcs-card__name { letter-spacing: .08em; }

Si la même vitrine apparaît deux fois sur une page (hook et widget), la seconde copie reçoit l’identifiant dfcs-ID-2.

Cache et performances

Le rendu est mis en cache Smarty par vitrine, langue, boutique et groupe de clients. Le cache est vidé à chaque enregistrement dans le module, à chaque modification de catégorie, et à chaque modification de produit si une vitrine affiche le compteur de produits. Le CSS et le JavaScript du module ne sont chargés que si au moins une vitrine est active.

Questions fréquentes

La vitrine ne s’affiche pas

Vérifiez que la vitrine est active, associée à la boutique, dans sa période d’affichage et ouverte au groupe du visiteur. Vérifiez ensuite que le hook choisi est bien appelé par votre thème. Pour un hook personnalisé, la balise {hook h='...'} doit être présente dans un template.

Les images sont floues

Laissez le format d’image sur « Automatique » ou envoyez une image personnalisée. Le format category_default de PrestaShop 8 ne fait que 141 x 180 px.

En masonry, l’ordre ne suit pas la lecture de gauche à droite

Les styles « hauteurs naturelles » et « hauteurs alternées » remplissent les colonnes de haut en bas. Si l’ordre gauche-droite compte, utilisez la grille ou le style « première catégorie mise en avant ».

Désinstallation

La désinstallation supprime les tables du module, ses onglets d’administration et le dossier /img/dfcategoryshowcase/ avec les images envoyées.