Tout ce que vous voudriez savoir avant d'installer.
Un regard détaillé sur le fonctionnement de Module Carrousel de Marques PrestaShop 8/9 : Logos en Défilement, Grille et Mur de Logos, pourquoi nous l'avons conçu ainsi, et la réflexion derrière les fonctionnalités ci-dessus.
8 façons de montrer vos marques
Le carrousel fait défiler 1 à 3 lignes de logos avec flèches, points et défilement automatique. Le défilement continu fait glisser les logos sans arrêt sur 1 à 4 lignes, avec des marques différentes sur chaque ligne et une ligne sur deux dans l'autre sens, l'effet que l'on voit sur les pages « ils nous font confiance ». Le défilement vertical fait monter et descendre des colonnes de logos. La grille, le mur de logos séparés par des lignes fines, le mur rotatif, les pastilles et l'annuaire A-Z couvrent les autres usages, de la colonne latérale à la page qui liste toutes vos marques.
Les bonnes marques, dans le bon ordre
Un bloc peut afficher toutes les marques actives, une sélection que vous ordonnez par glisser-déposer, les marques ayant des produits dans une catégorie et ses sous-catégories, ou celles de la catégorie consultée : sur la page Chaussures, seules les marques de chaussures apparaissent. Un minimum de produits, réglé à 1 par défaut, écarte les marques dont la page serait vide. Le tri se fait par nom, par nombre de produits, par ventes sur la période de votre choix, par nouveauté ou au hasard. Le tirage aléatoire est fait dans le navigateur, si bien qu'un cache de page complet continue de fonctionner.
Des logos propres, même sur fond coloré
PrestaShop enregistre les logos des marques en JPG sur fond blanc, ce qui laisse des rectangles blancs sur une carte grise ou une section sombre. L'onglet Logos des marques permet d'envoyer pour chaque marque une version transparente en PNG, WebP ou SVG, utilisée dans tous les blocs. Les SVG contenant des scripts, des événements ou des liens externes sont refusés et le dossier d'envoi est protégé. Sur des cartes claires, l'option Supprimer les fonds blancs fait disparaître le blanc des JPG sans aucun envoi. Chaque marque peut aussi pointer vers une page de votre choix au lieu de sa page PrestaShop.
Partout dans la boutique
Chaque bloc choisit son hook parmi 14 emplacements courants ou un hook display saisi à la main, enregistré automatiquement. Il peut être limité à certains types de pages et à certains appareils. Pour un emplacement précis, la balise widget affiche un bloc donné dans n'importe quel template, le hook displayDfBrandCarousel s'appelle depuis le thème et le shortcode [dfbrandcarousel id="3"] insère un bloc dans une page CMS. Les mises en page reposent sur des container queries : placé dans une colonne latérale, un bloc passe en version compacte sans réglage supplémentaire.
Un éditeur avec aperçu en direct
Le back-office liste vos blocs, que vous activez, dupliquez et réordonnez par glisser-déposer. L'éditeur regroupe les réglages en 5 onglets (Contenu, Mise en page, Style, Animation, Affichage) et affiche à côté un aperçu qui se met à jour à chaque modification, en largeur ordinateur, tablette ou mobile. Les modes sont présentés sous forme de cartes illustrées. Un indicateur signale les modifications non enregistrées et Ctrl+S enregistre sans quitter l'éditeur. L'onglet Intégration donne les codes widget, hook et shortcode de chaque bloc à copier en un clic.
Léger et accessible
Le module n'utilise ni jQuery, ni Swiper, ni aucune librairie chargée depuis un CDN. Le carrousel repose sur le défilement natif du navigateur et le défilement continu sur l'API Web Animations. Le CSS et le JS ne sont chargés que sur les pages où un bloc peut apparaître. Les animations s'arrêtent quand le bloc sort de l'écran, un bouton pause répond au critère WCAG 2.2.2, et les visiteurs qui ont désactivé les animations voient des logos immobiles qu'ils font défiler à la main. Les copies utilisées pour la boucle du défilement sont masquées aux lecteurs d'écran et exclues de la navigation clavier.
Il n’y a pas encore d’avis.