Brand Carousel : documentation du carrousel de marques PrestaShop

Installation

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

À l’installation, le module crée ses deux tables, le hook displayDfBrandCarousel, le dossier /img/dfbrandcarousel/ pour les logos alternatifs et un premier bloc : un carrousel des marques sur la page d’accueil (displayHome), avec le titre « Nos marques » traduit dans chaque langue installée. Ouvrez votre boutique pour voir le rendu, puis modifiez ou supprimez ce bloc.

Le module se gère depuis le bouton « Configurer » du Gestionnaire de modules.

Mise à jour depuis la version 1.0.x

Envoyez le ZIP 2.0.0 par-dessus la version installée. Le script de mise à jour crée les nouvelles tables et reprend votre configuration dans un bloc nommé « Brand carousel », placé sur le même hook : titre, nombre de marques, colonnes, défilement automatique, vitesse, espacement, flèches, points, marques sélectionnées et ordre aléatoire. Les marques sans produit restent affichées comme avant. Les anciens réglages DFBC_* sont ensuite supprimés. Swiper n’est plus utilisé, ce qui règle les conflits avec les thèmes et page builders qui chargent leur propre version.

La liste des blocs

L’onglet Blocs liste vos blocs avec leur mode, leur hook et leur source. Pour chaque bloc, vous pouvez :

• Activer ou désactiver le bloc avec l’interrupteur.
• Modifier le bloc dans l’éditeur.
• Dupliquer le bloc. La copie est créée désactivée.
• Supprimer le bloc.
• Glisser-déposer les blocs pour fixer leur ordre quand plusieurs partagent le même hook.

Le bouton « Vider le cache » efface le cache des marques, des compteurs et des ventes (voir Cache et performances).

L’éditeur de bloc

L’éditeur affiche les réglages à gauche, répartis en 5 onglets, et un aperçu à droite. L’aperçu se met à jour à chaque modification et se règle en largeur ordinateur, tablette ou mobile. Il utilise une police neutre : sur la boutique, le bloc prend les polices de votre thème.

La barre du haut contient le nom interne du bloc, l’interrupteur d’activation, le sélecteur de langue des champs traduisibles et le bouton Enregistrer. Un indicateur signale les modifications non enregistrées, et le raccourci Ctrl+S (Cmd+S sur Mac) enregistre sans quitter l’éditeur.

Onglet Contenu

En-tête

• Titre et sous-titre : par langue. Laissez le titre vide pour le masquer.
• Balise du titre : H2 sur la page d’accueil, H3 dans une page qui a déjà des titres H2, ou p et div pour un titre sans valeur de titre.
• Disposition de l’en-tête : titre à gauche et lien à droite, tout à gauche, ou centré. Dans les deux derniers cas, le lien passe sous les logos.
• Lien vers toutes les marques : texte par langue et URL. Sans URL, le lien mène à la page des marques de PrestaShop.

Marques à afficher

• Toutes les marques actives de la boutique.
• Sélection manuelle : ajoutez les marques depuis la liste de gauche avec le bouton +, puis réordonnez-les par glisser-déposer dans la liste de droite. « Ajouter toute la liste » ajoute les marques affichées par la recherche en cours.
• Marques d’une catégorie : les marques ayant au moins un produit visible dans la catégorie choisie ou ses sous-catégories.
• Marques de la catégorie courante : sur une page catégorie, les marques de cette catégorie. Sur une fiche produit, celles de sa catégorie principale. Ailleurs, toutes les marques.

Les réglages suivants complètent la source :

• Marques exclues : retirées de la liste, sauf en sélection manuelle.
• Ordre de tri : votre ordre (sélection manuelle), alphabétique, plus de produits d’abord, meilleures ventes d’abord sur une période de 7 à 730 jours, marques les plus récentes d’abord, ou aléatoire à chaque visite. Le tri alphabétique ignore les accents et la ponctuation : L’Oréal est classé comme « loreal ».
• Nombre maximum de marques : 0 affiche toutes les marques correspondantes.
• Produits minimum : 1 par défaut, pour ne pas envoyer le visiteur vers une page de marque vide.
• Uniquement les marques avec logo : le filtre est appliqué avant le nombre maximum, vous obtenez donc bien le nombre demandé.

Le tri aléatoire est fait dans le navigateur. Un cache de page complet peut donc servir la même page à tous les visiteurs, l’ordre change quand même à chaque visite. En défilement continu, le nombre maximum s’applique d’abord dans l’ordre alphabétique, puis les marques retenues sont mélangées.

Onglet Mise en page

Les 8 modes d’affichage

• Carrousel : logos défilant par page ou par logo, sur 1 à 3 lignes, avec flèches, points et défilement automatique.
• Défilement continu : logos qui glissent sans arrêt sur 1 à 4 lignes.
• Défilement vertical : 1 à 4 colonnes qui défilent vers le haut ou vers le bas.
• Grille : cartes en colonnes, avec recherche, filtre par lettre et bouton « Afficher plus » en option.
• Mur de logos : grille sans cartes, logos séparés par des lignes fines.
• Mur rotatif : grille fixe dont les logos changent un par un.
• Pastilles : noms de marques dans des pastilles compactes, avec petit logo en option. Adapté à une colonne latérale.
• Annuaire A-Z : toutes les marques groupées par lettre, avec une barre de lettres cliquables et une recherche.

Colonnes

Le nombre de colonnes se règle séparément sur ordinateur (1 à 12), tablette (1 à 8) et mobile (1 à 4). Ces paliers dépendent de la largeur disponible pour le bloc et non de celle de l’écran : un bloc placé dans une colonne latérale utilise le réglage mobile même sur un grand écran.

• Lignes (carrousel et mur rotatif) : 1 à 3. En carrousel, les logos remplissent chaque colonne de haut en bas, puis les lignes défilent ensemble.
• Montrer une partie du logo suivant (carrousel) : sur tablette et mobile, le logo suivant dépasse pour indiquer que la liste se balaie. Les flèches latérales sont alors masquées sur mobile.
• Lignes avant Afficher plus (grille et mur de logos) : 0 affiche tout d’un coup.

Défilement continu et vertical

• Lignes (ou colonnes en vertical) : 1 à 4, jamais plus que le nombre de marques.
• Marques différentes sur chaque ligne : les marques sont réparties entre les lignes. Désactivé, chaque ligne montre toutes les marques, décalées. La répartition demande au moins 3 marques par ligne, sinon le module utilise le décalage.
• Largeur des logos (horizontal) ou Hauteur du bloc (vertical).

Recherche et filtres

Le champ de recherche (grille, mur de logos, annuaire) filtre les marques pendant la saisie, sans tenir compte des accents ni de la ponctuation. Le filtre par lettre (grille et mur de logos) affiche une barre 0-9, A à Z et # pour les noms qui ne commencent ni par une lettre ni par un chiffre. Les lettres sans marque sont grisées. L’annuaire accepte 1 à 6 colonnes et de petits logos à côté des noms.

Espacement et largeur

• Espace entre les logos et Marge verticale de la section.
• Largeur : largeur de l’emplacement, fond pleine largeur (le fond couvre l’écran, le contenu reste dans la colonne du thème), ou pleine largeur bord à bord (utile pour un défilement continu qui traverse l’écran).

Onglet Style

Cartes des marques

• Style des cartes : plein, contour, ombre ou nu.
• Hauteur maximale du logo, hauteur minimale des cartes, marge intérieure et arrondi des angles.
• Nom de la marque : seulement quand la marque n’a pas de logo, toujours sous le logo, ou au survol.
• Description courte : les 160 premiers caractères de la description courte de la marque.

Logos

• Nombre de produits affiché sous le logo ou dans la pastille.
• Effet sur le logo : aucun, gris puis couleur au survol, toujours gris, estompé puis net au survol.
• Effet au survol des cartes : soulèvement, zoom du logo, contour couleur d’accent ou aucun.
• Supprimer les fonds blancs : fond le blanc des logos JPG dans les cartes claires. Laissez cette option désactivée sur fond sombre et utilisez plutôt des logos transparents.
• Taille d’image : l’image originale est recommandée. Les formats PrestaShop ajoutent souvent des marges blanches autour des logos.

Couleurs

Six couleurs se règlent : accent (flèches, liens, lettre active), fond des cartes, bordures, fond de la section, titre et texte. « Réinitialiser » rend la main au thème. Le texte posé sur la couleur d’accent passe automatiquement en blanc ou en noir selon son contraste.

Onglet Animation

Carrousel

• Défilement automatique et pause entre les pages (1 à 15 secondes).
• Durée de la transition et pas : une page entière ou un logo.
• Revenir au début à la fin : après le dernier logo, le carrousel repart au premier. Pour un défilement sans fin, utilisez le mode Défilement continu.
• Flèches : 4 styles (plein, contour, carré, minimal) et 4 positions (sur les bords en débord, à l’intérieur des bords, dans l’en-tête, sous les logos).
• Points de pagination.

Le carrousel se pilote aussi au clavier (flèches gauche et droite), au doigt et en glissant à la souris.

Défilement continu et vertical

• Sens : vers la gauche ou la droite, vers le haut ou le bas.
• Alterner les lignes : une ligne sur deux défile dans l’autre sens.
• Vitesse : 5 à 400 pixels par seconde, identique quelle que soit la longueur de la ligne.
• Au survol : ralentir, arrêter ou continuer. Le ralentissement est progressif.
• Estomper les bords : les logos apparaissent et disparaissent en fondu.

Mur rotatif

Réglez le nombre de lignes et le délai entre deux changements (0,8 à 20 secondes). À chaque changement, un logo de la grille est remplacé par une marque qui n’est pas encore visible.

Accessibilité

Le bouton pause, recommandé par le critère WCAG 2.2.2 pour tout contenu qui bouge plus de 5 secondes, est affiché dans l’en-tête ou sous les logos. Les animations s’arrêtent aussi au survol, au focus clavier, quand l’onglet est caché et quand le bloc sort de l’écran. Pour les visiteurs qui ont réduit les animations dans leur système, le défilement continu devient une rangée immobile qu’ils font défiler à la main, et le carrousel ne défile plus tout seul.

Onglet Affichage

Emplacement

Le champ Hook propose 14 emplacements groupés :

• Page d’accueil : displayHome.
• Toutes les pages : displayWrapperTop, displayWrapperBottom, displayContentWrapperTop, displayContentWrapperBottom, displayNavFullWidth, displayFooterBefore, displayFooterAfter.
• Colonnes : displayLeftColumn, displayRightColumn.
• Pages spécifiques : displayFooterProduct, displayFooterCategory, displayShoppingCartFooter.
• Intégration : displayDfBrandCarousel, ou « Aucun » pour un bloc affiché uniquement par widget ou shortcode.

« Autre hook » accepte tout nom commençant par display (lettres, chiffres et tirets bas). Le module s’y greffe à l’enregistrement. Le hook doit ensuite être appelé par votre thème.

Pages et appareils

Pages limite le bloc à certains types de pages : accueil, catégories, produits, marques, pages CMS, recherche, panier et commande, autres pages. Aucune case cochée : toutes les pages où le hook existe. Appareils masque le bloc sur ordinateur (992 px et plus), tablette (576 à 991 px) ou mobile (moins de 576 px).

Statistiques

Avec « Envoyer les clics à Google Analytics », chaque clic sur une marque envoie l’événement dfbc_brand_click avec les paramètres dfbc_block, brand_id et brand_name. L’événement part vers dataLayer si Google Tag Manager est présent, sinon vers gtag. Dans GTM, créez un déclencheur « Événement personnalisé » sur dfbc_brand_click.

Placer un bloc ailleurs

L’onglet Intégration du module, et la section « Insérer ce bloc ailleurs » de chaque bloc enregistré, donnent les codes à copier. Remplacez 3 par le numéro du bloc.

• Dans un template du thème : {widget name='dfbrandcarousel' id_block=3} affiche ce bloc, quel que soit son hook.
• Avec le hook du module : {hook h='displayDfBrandCarousel'} affiche tous les blocs affectés à ce hook, {hook h='displayDfBrandCarousel' id_block=3} un bloc précis.
• Dans une page CMS : collez [dfbrandcarousel id="3"] dans le contenu. Le shortcode est remplacé par le bloc, même s’il est seul dans un paragraphe.
• Contenu chargé en AJAX ou page builder : si le bloc est inséré après le chargement de la page, appelez window.DFBC.init(conteneur). window.DFBC.destroy(conteneur) arrête proprement les blocs avant de retirer leur HTML.

Quand un bloc est affiché sur une page où le module n’a pas chargé ses fichiers (widget dans un template, hook personnalisé), le bloc les ajoute lui-même, une seule fois par page.

Logos des marques

L’onglet Logos des marques liste toutes les marques actives avec leur logo PrestaShop et leur nombre de produits.

• Logo alternatif : envoyez un fichier PNG, JPG, WebP, GIF ou SVG de 2 Mo maximum. Il remplace le logo PrestaShop dans tous les blocs. « Retirer » revient au logo d’origine.
• Lien personnalisé : URL complète (https://…) ou chemin commençant par /. Un lien vers un autre site s’ouvre dans un nouvel onglet. Vide, le lien mène à la page de la marque.

Les SVG qui contiennent des scripts, des attributs d’événement, des objets intégrés ou des liens externes sont refusés : exportez-les à nouveau en SVG simple. Les fichiers sont rangés dans /img/dfbrandcarousel/, dont le fichier .htaccess bloque l’exécution de scripts et applique une politique de sécurité aux SVG.

Si un module d’optimisation d’images a créé des versions .webp ou .avif à côté des logos PrestaShop dans /img/m/, elles sont servies automatiquement aux navigateurs compatibles.

Personnaliser le HTML

Copiez modules/dfbrandcarousel/views/templates/hook/dfbrandcarousel.tpl dans themes/votre-theme/modules/dfbrandcarousel/views/templates/hook/dfbrandcarousel.tpl et modifiez la copie. Les mises à jour du module ne la remplacent pas. Toutes les valeurs du template sont déjà échappées par le module, d’où l’usage de nofilter.

Chaque bloc est rendu dans une section <section class="dfbc dfbc--MODE"> avec l’identifiant dfbc-NUMÉRO-N. Pour un CSS ciblé, préférez les classes, par exemple :

.dfbc--marquee .dfbc-card { border-radius: 999px; }

Multiboutique et langues

Les blocs se gèrent boutique par boutique : sélectionnez une boutique dans le sélecteur du back-office avant de les modifier. Les logos alternatifs et les liens personnalisés sont communs à toutes les boutiques. Le titre, le sous-titre et le texte du lien se saisissent par langue. Le module est traduit en anglais, français, espagnol, allemand, italien, néerlandais, polonais et portugais, et gère les langues de droite à gauche.

Cache et performances

Le module ne charge ni jQuery, ni Swiper, ni aucune librairie externe. Son CSS et son JavaScript pèsent environ 5 Ko et 7 Ko compressés, et ne sont chargés que sur les pages où un bloc peut apparaître : un bloc placé sur displayHome ne charge rien sur les fiches produit.

La liste des marques est mise en cache 6 heures, le nombre de produits par marque 1 heure et les ventes 12 heures, dans var/cache/. Ce cache est vidé à chaque enregistrement dans le module et quand une marque ou un produit est ajouté, modifié ou supprimé. PrestaShop n’exécute ces déclencheurs que pour les employés ayant le droit de consulter le module : si un collaborateur sans ce droit modifie le catalogue, utilisez le bouton « Vider le cache ».

Questions fréquentes

Le bloc ne s’affiche pas

Vérifiez que le bloc est actif, que son hook est appelé par votre thème et que les filtres Pages et Appareils autorisent la page consultée. Vérifiez ensuite qu’il reste des marques à afficher : l’aperçu de l’éditeur indique le nombre de marques retenues et affiche un message quand aucune ne correspond (source, minimum de produits, filtre sur les logos).

Les logos ont des rectangles blancs

Les logos PrestaShop sont des JPG sur fond blanc. Activez « Supprimer les fonds blancs » sur des cartes claires, ou envoyez des logos transparents dans l’onglet Logos des marques.

Les logos sont flous

Choisissez « Image originale » dans Taille d’image, ou envoyez un logo alternatif en SVG ou en PNG de bonne définition.

Le défilement ne bouge pas

Le bouton pause a peut-être été activé, ou le système du visiteur demande moins d’animations. Dans ce second cas, le module affiche volontairement des logos immobiles.

Une marque est absente

La marque doit être active, associée à la boutique et avoir au moins le nombre minimum de produits visibles. Vérifiez aussi la liste des marques exclues et l’option « Uniquement les marques avec logo ».

Désinstallation

La désinstallation supprime les tables du module, le dossier /img/dfbrandcarousel/ avec les logos alternatifs et le cache du module.