Brand Carousel: documentatie van de PrestaShop merkencarrousel

Installatie

Open in de back-office Modules > Modulebeheer, klik op „Een module uploaden” en verstuur het bestand dfbrandcarousel-2.0.0.zip. De module werkt met PrestaShop 8.0 tot en met 9.x.

Bij de installatie maakt de module twee tabellen aan, de hook displayDfBrandCarousel, de map /img/dfbrandcarousel/ voor vervangende logo’s en een eerste blok: een merkencarrousel op de homepage (displayHome) met de titel „Onze merken” in elke geïnstalleerde taal. Open uw winkel om het resultaat te zien en pas dat blok daarna aan of verwijder het.

De module beheert u via de knop „Configureren” in Modulebeheer.

Update vanaf versie 1.0.x

Upload de ZIP 2.0.0 over de geïnstalleerde versie. Het updatescript maakt de nieuwe tabellen aan en zet uw instellingen over naar een blok met de naam „Brand carousel” op dezelfde hook: titel, aantal merken, kolommen, automatisch scrollen, snelheid, tussenruimte, pijlen, stippen, geselecteerde merken en willekeurige volgorde. Merken zonder producten blijven zichtbaar zoals voorheen. De oude instellingen DFBC_* worden daarna verwijderd. Swiper wordt niet meer gebruikt, wat conflicten oplost met thema’s en paginabouwers die hun eigen versie laden.

De blokkenlijst

Het tabblad Blokken toont uw blokken met hun modus, hook en bron. Per blok kunt u:

• het blok activeren of deactiveren met de schakelaar,
• het blok bewerken in de editor,
• het blok dupliceren (de kopie wordt gedeactiveerd aangemaakt),
• het blok verwijderen,
• de blokken slepen om hun volgorde te bepalen wanneer meerdere blokken dezelfde hook gebruiken.

De knop „Cache legen” wist de cache van merken, productaantallen en verkoop (zie Cache en prestaties).

De blokeditor

De editor toont links de instellingen, verdeeld over 5 tabbladen, en rechts een voorvertoning. De voorvertoning wordt bij elke wijziging bijgewerkt en kan op desktop-, tablet- of mobiele breedte worden getoond. Ze gebruikt een neutraal lettertype: in de winkel gebruikt het blok de lettertypen van uw thema.

De bovenste balk bevat de interne naam van het blok, de activeringsschakelaar, de taalkeuze voor vertaalbare velden en de knop Opslaan. Een indicator markeert niet-opgeslagen wijzigingen en Ctrl+S (Cmd+S op een Mac) slaat op zonder de editor te verlaten.

Tabblad Inhoud

Kop

• Titel en ondertitel: per taal. Laat de titel leeg om hem te verbergen.
• Titeltag: H2 op de homepage, H3 op een pagina die al H2-koppen heeft, of p en div voor een titel zonder kopfunctie.
• Opbouw van de kop: titel links en link rechts, alles links of gecentreerd. In de laatste twee gevallen staat de link onder de logo’s.
• Link naar alle merken: tekst per taal en URL. Zonder URL leidt de link naar de merkenpagina van PrestaShop.

Te tonen merken

• Alle actieve merken van de winkel.
• Handmatige selectie: voeg merken toe uit de linkerlijst met de knop + en herschik ze met slepen in de rechterlijst. „Hele lijst toevoegen” voegt de merken van de huidige zoekopdracht toe.
• Merken van een categorie: merken met minstens één zichtbaar product in de gekozen categorie of haar subcategorieën.
• Merken van de huidige categorie: op een categoriepagina de merken van die categorie, op een productpagina die van de hoofdcategorie, elders alle merken.

Deze instellingen vullen de bron aan:

• Uitgesloten merken: uit de lijst gehaald, behalve bij een handmatige selectie.
• Sortering: uw volgorde (handmatige selectie), alfabetisch, meeste producten eerst, best verkochte eerst over een periode van 7 tot 730 dagen, nieuwste merken eerst of willekeurig bij elk bezoek. De alfabetische sortering negeert accenten en leestekens: L’Oréal wordt gesorteerd als „loreal”.
• Maximum aantal merken: 0 toont alle overeenkomende merken.
• Minimum aantal producten: standaard 1, zodat bezoekers nooit op een lege merkpagina belanden.
• Alleen merken met logo: het filter wordt vóór het maximum toegepast, zodat u het gevraagde aantal krijgt.

De willekeurige volgorde wordt in de browser bepaald. Een full-page cache kan dezelfde pagina aan alle bezoekers leveren en de volgorde verandert toch bij elk bezoek. In de looptekstmodi wordt het maximum eerst in alfabetische volgorde toegepast, daarna worden de gekozen merken gemengd.

Tabblad Lay-out

De 8 weergavemodi

• Carrousel: logo’s die per pagina of per logo verschuiven, op 1 tot 3 rijen, met pijlen, stippen en automatisch scrollen.
• Looptekst: logo’s die zonder pauze glijden op 1 tot 4 rijen.
• Verticale looptekst: 1 tot 4 kolommen die omhoog of omlaag bewegen.
• Raster: kaarten in kolommen, optioneel met zoekveld, letterfilter en knop „Meer merken tonen”.
• Logomuur: raster zonder kaarten, logo’s gescheiden door dunne lijnen.
• Wisselende logomuur: vast raster waarin de logo’s één voor één wisselen.
• Labels: merknamen in compacte labels, optioneel met klein logo. Geschikt voor een zijkolom.
• A-Z-overzicht: alle merken gegroepeerd per letter, met een klikbare letterbalk en een zoekveld.

Kolommen

Het aantal kolommen stelt u apart in voor desktop (1 tot 12), tablet (1 tot 8) en mobiel (1 tot 4). Deze stappen hangen af van de beschikbare breedte van het blok, niet van de schermbreedte: een blok in een zijkolom gebruikt de mobiele instelling, ook op een groot scherm.

• Rijen (carrousel en wisselende logomuur): 1 tot 3. In de carrousel vullen de logo’s elke kolom van boven naar beneden, daarna schuiven de rijen samen.
• Deel van het volgende logo tonen (carrousel): op tablet en mobiel steekt het volgende logo uit, zodat duidelijk is dat de lijst te swipen is. De zijpijlen worden dan op mobiel verborgen.
• Rijen vóór Meer merken tonen (raster en logomuur): 0 toont alles in één keer.

Looptekst en verticale looptekst

• Rijen (of kolommen bij verticaal): 1 tot 4, nooit meer dan het aantal merken.
• Andere merken op elke rij: de merken worden over de rijen verdeeld. Uitgeschakeld toont elke rij alle merken, verschoven. Verdelen vraagt minstens 3 merken per rij, anders verschuift de module de rijen.
• Breedte van de logo’s (horizontaal) of Hoogte van het blok (verticaal).

Zoeken en filters

Het zoekveld (raster, logomuur, A-Z-overzicht) filtert de merken tijdens het typen, zonder rekening te houden met accenten en leestekens. Het letterfilter (raster en logomuur) toont een balk 0-9, A tot Z en # voor namen die niet met een letter of cijfer beginnen. Letters zonder merk zijn grijs. Het overzicht ondersteunt 1 tot 6 kolommen en kleine logo’s naast de namen.

Tussenruimte en breedte

• Ruimte tussen de logo’s en verticale ruimte van de sectie.
• Breedte: breedte van de positie, achtergrond over de volle breedte (de achtergrond vult het scherm, de inhoud blijft in de themakolom) of volle breedte van rand tot rand (handig voor een looptekst over het hele scherm).

Tabblad Stijl

Merkkaarten

• Kaartstijl: gevuld, omlijnd, schaduw of kaal.
• Maximale logohoogte, minimale kaarthoogte, binnenruimte en afronding van de hoeken.
• Merknaam: alleen zonder logo, altijd onder het logo of bij hover.
• Korte beschrijving: de eerste 160 tekens van de korte beschrijving van het merk.

Logo’s

• Aantal producten onder het logo of in het label.
• Logo-effect: geen, grijs en kleur bij hover, altijd grijs, vervaagd en volledig bij hover.
• Hover-effect van de kaarten: optillen, logo-zoom, omlijning in accentkleur of geen.
• Witte achtergronden verwijderen: laat het wit van JPG-logo’s opgaan in lichte kaarten. Laat deze optie uit op een donkere achtergrond en gebruik dan transparante logo’s.
• Afbeeldingsformaat: de originele afbeelding wordt aanbevolen. De afbeeldingsformaten van PrestaShop voegen vaak witte marges rond de logo’s toe.

Kleuren

Zes kleuren zijn instelbaar: accent (pijlen, links, actieve letter), kaartachtergrond, randen, achtergrond van de sectie, titel en tekst. „Herstellen” geeft de kleur terug aan het thema. Tekst op de accentkleur wordt automatisch wit of zwart, afhankelijk van het contrast.

Tabblad Animatie

Carrousel

• Automatisch scrollen en pauze tussen pagina’s (1 tot 15 seconden).
• Duur van de overgang en stap: een hele pagina of één logo.
• Aan het einde terug naar het begin: na het laatste logo gaat de carrousel terug naar het eerste. Gebruik voor eindeloos scrollen de modus Looptekst.
• Pijlen: 4 stijlen (gevuld, omlijnd, vierkant, minimaal) en 4 posities (op de randen uitstekend, binnen de randen, in de kop, onder de logo’s).
• Stippen voor de paginering.

De carrousel werkt ook met het toetsenbord (pijltoetsen links en rechts), met swipen en door te slepen met de muis.

Looptekst en verticale looptekst

• Richting: naar links of rechts, omhoog of omlaag.
• Rijen afwisselen: om de rij loopt de andere kant op.
• Snelheid: 5 tot 400 pixels per seconde, gelijk ongeacht de lengte van de rij.
• Bij hover: vertragen, stoppen of doorgaan. Het vertragen verloopt geleidelijk.
• Randen laten vervagen: logo’s verschijnen en verdwijnen met een overgang aan de randen.

Wisselende logomuur

Stel het aantal rijen en de tijd tussen twee wissels in (0,8 tot 20 seconden). Bij elke wissel wordt één logo van het raster vervangen door een merk dat nog niet zichtbaar is.

Toegankelijkheid

De pauzeknop, aanbevolen door WCAG 2.2.2 voor alle inhoud die langer dan 5 seconden beweegt, staat in de kop of onder de logo’s. Animaties stoppen ook bij hover, bij toetsenbordfocus, als het tabblad verborgen is en als het blok uit beeld gaat. Voor bezoekers die animaties in hun systeem hebben beperkt, wordt de looptekst een stilstaande rij die ze met de hand scrollen, en beweegt de carrousel niet meer vanzelf.

Tabblad Weergave

Positie

Het veld Hook biedt 14 gegroepeerde posities:

• Homepage: displayHome.
• Alle pagina’s: displayWrapperTop, displayWrapperBottom, displayContentWrapperTop, displayContentWrapperBottom, displayNavFullWidth, displayFooterBefore, displayFooterAfter.
• Kolommen: displayLeftColumn, displayRightColumn.
• Specifieke pagina’s: displayFooterProduct, displayFooterCategory, displayShoppingCartFooter.
• Integratie: displayDfBrandCarousel, of „Geen” voor een blok dat alleen via widget of shortcode verschijnt.

„Andere hook” accepteert elke naam die met display begint (letters, cijfers en underscores). De module registreert zich erop bij het opslaan. Uw thema moet die hook daarna aanroepen.

Pagina’s en apparaten

Pagina’s beperkt het blok tot bepaalde paginatypes: homepage, categorieën, producten, merken, CMS-pagina’s, zoeken, winkelwagen en afrekenen, andere pagina’s. Niets aangevinkt: alle pagina’s waar de hook bestaat. Apparaten verbergt het blok op desktop (vanaf 992 px), tablet (576 tot 991 px) of mobiel (onder 576 px).

Statistieken

Met „Klikken naar Google Analytics sturen” stuurt elke klik op een merk het event dfbc_brand_click met de parameters dfbc_block, brand_id en brand_name. Het event gaat naar dataLayer als Google Tag Manager aanwezig is, anders naar gtag. Maak in GTM een trigger „Aangepaste gebeurtenis” op dfbc_brand_click.

Een blok elders plaatsen

Het tabblad Integratie van de module en de sectie „Dit blok elders invoegen” van elk opgeslagen blok geven de codes om te kopiëren. Vervang 3 door het nummer van het blok.

• In een thema-template: {widget name='dfbrandcarousel' id_block=3} toont dat blok, ongeacht zijn hook.
• Met de module-hook: {hook h='displayDfBrandCarousel'} toont alle blokken op die hook, {hook h='displayDfBrandCarousel' id_block=3} één bepaald blok.
• In een CMS-pagina: plak [dfbrandcarousel id="3"] in de inhoud. De shortcode wordt vervangen door het blok, ook als hij alleen in een alinea staat.
• AJAX-inhoud of paginabouwer: wordt het blok na het laden van de pagina ingevoegd, roep dan window.DFBC.init(container) aan. window.DFBC.destroy(container) stopt de blokken netjes voordat hun HTML wordt verwijderd.

Verschijnt een blok op een pagina waar de module haar bestanden niet heeft geladen (widget in een template, eigen hook), dan voegt het blok ze zelf toe, één keer per pagina.

Merklogo’s

Het tabblad Merklogo’s toont alle actieve merken met hun PrestaShop-logo en aantal producten.

• Alternatief logo: upload een PNG-, JPG-, WebP-, GIF- of SVG-bestand van maximaal 2 MB. Het vervangt het PrestaShop-logo in alle blokken. „Verwijderen” zet het originele logo terug.
• Eigen link: volledige URL (https://…) of pad dat met / begint. Een link naar een andere site opent in een nieuw tabblad. Leeg leidt de link naar de merkpagina.

SVG-bestanden met scripts, event-attributen, ingesloten objecten of externe links worden geweigerd: exporteer ze opnieuw als eenvoudige SVG. De bestanden staan in /img/dfbrandcarousel/, waarvan het .htaccess-bestand het uitvoeren van scripts blokkeert en een beveiligingsbeleid op SVG-bestanden toepast.

Heeft een beeldoptimalisatiemodule .webp– of .avif-versies naast de PrestaShop-logo’s in /img/m/ gemaakt, dan worden die automatisch aan compatibele browsers geleverd.

De HTML aanpassen

Kopieer modules/dfbrandcarousel/views/templates/hook/dfbrandcarousel.tpl naar themes/uw-thema/modules/dfbrandcarousel/views/templates/hook/dfbrandcarousel.tpl en bewerk de kopie. Module-updates overschrijven haar niet. Alle waarden in de template zijn al door de module geëscaped, vandaar het gebruik van nofilter.

Elk blok wordt weergegeven in een element <section class="dfbc dfbc--MODUS"> met de id dfbc-NUMMER-N. Gebruik voor gerichte CSS bij voorkeur de klassen, bijvoorbeeld:

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

Multistore en talen

Blokken worden per winkel beheerd: kies een winkel in de winkelkeuze van de back-office voordat u ze bewerkt. Vervangende logo’s en eigen links gelden voor alle winkels. Titel, ondertitel en linktekst vult u per taal in. De module is vertaald in het Engels, Frans, Spaans, Duits, Italiaans, Nederlands, Pools en Portugees en ondersteunt talen die van rechts naar links worden geschreven.

Cache en prestaties

De module laadt geen jQuery, geen Swiper en geen andere externe bibliotheek. De CSS en JavaScript wegen gecomprimeerd ongeveer 5 KB en 7 KB en worden alleen geladen op pagina’s waar een blok kan verschijnen: een blok op displayHome laadt niets op productpagina’s.

De merkenlijst wordt 6 uur in de cache bewaard, het aantal producten per merk 1 uur en de verkoop 12 uur, in var/cache/. Deze cache wordt geleegd bij elke opslag in de module en telkens wanneer een merk of product wordt toegevoegd, gewijzigd of verwijderd. PrestaShop voert deze triggers alleen uit voor medewerkers die de module mogen bekijken: wijzigt een collega zonder dat recht de catalogus, gebruik dan de knop „Cache legen”.

Veelgestelde vragen

Het blok verschijnt niet

Controleer of het blok actief is, of uw thema de hook aanroept en of de filters Pagina’s en Apparaten de bekeken pagina toelaten. Controleer daarna of er merken overblijven: de voorvertoning in de editor toont hoeveel merken zijn geselecteerd en meldt het wanneer er geen enkel overeenkomt (bron, minimum aantal producten, logofilter).

De logo’s tonen witte rechthoeken

PrestaShop-logo’s zijn JPG-bestanden met een witte achtergrond. Schakel „Witte achtergronden verwijderen” in op lichte kaarten, of upload transparante logo’s in het tabblad Merklogo’s.

De logo’s zijn wazig

Kies „Originele afbeelding” bij Afbeeldingsformaat, of upload een vervangend logo als SVG of als PNG in hoge resolutie.

De looptekst beweegt niet

Misschien is de pauzeknop ingedrukt, of vraagt het systeem van de bezoeker om minder animatie. In dat tweede geval toont de module bewust stilstaande logo’s.

Er ontbreekt een merk

Het merk moet actief zijn, aan de winkel gekoppeld en minstens het minimum aantal zichtbare producten hebben. Controleer ook de uitgesloten merken en de optie „Alleen merken met logo”.

Verwijderen

Bij het verwijderen van de module worden haar tabellen, de map /img/dfbrandcarousel/ met de vervangende logo’s en de cache van de module gewist.