Category Wall — Page catégorie visuelle

Category Wall remplace la liste de sous-catégories native de PrestaShop par un mur de tuiles imagées, avec compteurs de produits et trois mises en page au choix. Ce guide couvre l’installation, la configuration et l’utilisation avancée du module.

Installation

Le module s’installe comme n’importe quel module PrestaShop, sans dépendance externe ni Composer.

1. Depuis le back-office, ouvrez Modules > Module Manager, puis cliquez sur Installer un module (bouton en haut à droite).
2. Sélectionnez le fichier dfcategorywall.zip et lancez l’installation.
3. Une fois installé, cliquez sur Configurer pour accéder aux réglages.

Comment fonctionne l’affichage

Sur chaque page catégorie, le module affiche automatiquement le mur de sous-catégories au-dessus du listing de produits. Il s’appuie sur le hook displayContentWrapperTop, présent dans le thème Classic et la plupart des thèmes qui en dérivent.

Si aucune sous-catégorie active n’existe pour la catégorie consultée, le mur ne s’affiche pas : le module reste totalement invisible sur les catégories « feuilles ».

Options de configuration

Toutes les options se règlent depuis l’écran de configuration du module.

Mise en page (layout)

Trois présentations sont disponibles :

• Grille — une grille régulière de tuiles de taille identique, idéale pour un rendu propre et structuré.
• Mosaïque — une disposition dynamique où la première sous-catégorie occupe une tuile agrandie, pour attirer l’œil sur un rayon phare.
• Carrousel — un défilement horizontal fluide, tactile sur mobile et équipé de flèches de navigation sur desktop.

Colonnes

Réglez le nombre de colonnes affichées sur desktop, de 2 à 6. Cette valeur s’applique aux layouts grille et carrousel. L’affichage s’adapte automatiquement à 3 puis 2 colonnes sur tablette et mobile.

Compteurs de produits

Activez Afficher les compteurs de produits pour faire apparaître, sur chaque tuile, le nombre de produits de la sous-catégorie sous forme de badge.

• Compter les produits récursivement — additionne les produits de toute l’arborescence enfant (sous-sous-catégories comprises), et non uniquement les produits rattachés directement.
• Masquer les sous-catégories vides — retire du mur les sous-catégories sans aucun produit visible, pour ne présenter que des rayons réellement fournis.

Description et titre

• Afficher la description des sous-catégories — affiche un court extrait sous le nom de chaque tuile (tronqué à 120 caractères).
• Afficher le titre de la section et Titre de la section — un intitulé personnalisable et multilingue affiché au-dessus du mur (par exemple « Parcourir les sous-catégories »). Laissez le champ vide pour masquer le titre.

Masquer la liste native

L’option Masquer la liste native des sous-catégories ajoute une règle CSS discrète qui masque le bloc de sous-catégories par défaut du thème, afin d’éviter tout doublon avec le mur. Cette option est sans effet si votre thème n’affiche pas ce bloc.

Tuiles sans image

Quand une sous-catégorie ne dispose pas d’image de couverture, le module génère automatiquement une tuile de repli : un dégradé de couleur stable, dérivé de l’identifiant de la catégorie, portant l’initiale de son nom. La grille reste ainsi toujours homogène, sans case vide.

Utilisation en widget

Au-delà de la page catégorie, le mur peut être inséré n’importe où dans un template grâce à l’interface widget de PrestaShop.

{widget name='dfcategorywall'}

Pour cibler une catégorie précise, passez son identifiant :

{widget name='dfcategorywall' id_category=12}

Dépannage

Le mur ne s’affiche pas

• Vérifiez que la catégorie consultée possède bien des sous-catégories actives.
• Assurez-vous que votre thème déclenche le hook displayContentWrapperTop. Sinon, utilisez l’insertion par widget décrite ci-dessus.

Les sous-catégories apparaissent en double

Activez l’option Masquer la liste native des sous-catégories pour supprimer le bloc d’origine du thème.

Les flèches du carrousel n’apparaissent pas

Les flèches ne s’affichent que lorsqu’il y a suffisamment de tuiles pour déborder de la largeur visible. Sur mobile, la navigation se fait uniquement au doigt (défilement tactile).