Categoriebanner: volledige gids

Overzicht en vereisten

Categoriebanner plaatst visuals in het productraster van uw categoriepagina’s, op de positie die u kiest. U geeft de categorie op, het productnummer waarna de banner moet verschijnen en de afbeelding per taal. De module doet de rest, ook na een facetfilter of een paginawissel.

• Compatibel met PrestaShop 8.0 tot 9.x, Classic-thema en afgeleide thema’s.
• PHP 7.4 tot 8.3.
• Multishop en meertalig (fr, en, es, de, it, nl, pl, pt).
• Geen override, geen templatewijziging, geen CRON-taak.
• De HTML van de banner wordt serverzijde opgebouwd met een Smarty-template; de JavaScript zet hem alleen op de juiste plek, zonder jQuery en zonder externe bibliotheek.

Installatie

1. Download het archief datafireflycategorybanner.zip vanuit uw klantaccount.
2. Open in de beheeromgeving Modules > Modulebeheer.
3. Klik op Een module uploaden en sleep het archief erin.
4. Klik op Configureren om bij de bannerlijst te komen.

Bij de installatie maakt de module haar drie tabellen aan (banners, vertalingen, winkelkoppeling), maakt ze de map /img/datafireflycategorybanner/ aan en registreert ze haar hooks.

Een banner aanmaken

Klik op de configuratiepagina op Nieuwe banner toevoegen. Het formulier bundelt de volgende instellingen.

Targeting

• Categorie: de categorie waarin de banner verschijnt. De lijst volgt de winkelboom, met uitgeschakelde categorieën gemarkeerd.
• Toepassen op subcategorieën: breidt de banner uit naar alle subcategorieën van de gekozen categorie, ongeacht de diepte.
• Na productnummer: de banner wordt na dit product in de lijst geplaatst. De waarde 4 zet de banner na het vierde getoonde product.

Weergave en link

• Bannerlink: doel-URL, absoluut (https://…) of beginnend met een schuine streep (/nieuw). Laat leeg voor een banner zonder link.
• CSS-klasse: rasterklassen voor de bannercel, bijvoorbeeld col-12 of col-12 col-md-6. Laat leeg om automatisch de klassen van de productcellen van uw thema over te nemen.
• Eigen CSS: declaraties die alleen voor deze banner gelden, bijvoorbeeld border-radius: 12px; padding: 10px;.

Planning en status

• Startdatum en Einddatum: weergavevenster, in het formaat JJJJ-MM-DD UU:MM:SS. Een leeg veld betekent geen grens aan die kant.
• Actief: toont of pauzeert de banner zonder hem te verwijderen.
• Winkelkoppeling: vink in multishop de betreffende winkels aan.

Afbeeldingen per taal

De velden Bannerafbeelding en Alt-tekst bestaan voor elke actieve taal. De taaltabs bovenaan het formulier tonen de velden van de gekozen taal. Is er al een afbeelding, dan verschijnt een voorbeeld met daarnaast een schakelaar Afbeelding verwijderen die alleen die taal raakt.

Hoe de positie wordt berekend

De positie wordt uitgedrukt in aantal producten en geldt voor elke pagina van de lijst. Een banner op 4 verschijnt na het vierde product van de huidige pagina, of de bezoeker nu op pagina 1 of pagina 3 zit.

Meerdere banners kunnen dezelfde categorie betreffen, elk op zijn eigen positie. Delen twee banners dezelfde positie, dan worden ze na elkaar geplaatst in de volgorde van opslaan. Overschrijdt de positie het aantal producten op de pagina, dan wordt de banner voor die pagina gewoon overgeslagen, zonder de andere te verschuiven.

Standaard neemt de banner de breedte van een productcel: de module leest de rasterklassen van het eerste product in de lijst en past ze toe op de banner. Vul het veld CSS-klasse in om een andere breedte af te dwingen, bijvoorbeeld een banner over de volle breedte met col-12.

Een actie plannen

Vul een startdatum en een einddatum in zodat een banner vanzelf verschijnt en verdwijnt. Dat is het juiste middel om uitverkoop, Black Friday of een eindejaarsactie weken vooruit voor te bereiden.

• Alleen startdatum: de banner verschijnt op die datum en blijft daarna zichtbaar.
• Alleen einddatum: de banner is meteen zichtbaar en stopt op die datum.
• Beide datums: de banner is alleen binnen dat venster zichtbaar.
• Geen datum: de banner is permanent.

Een hele boom afdekken

De optie Toepassen op subcategorieën bespaart u het opnieuw aanmaken van dezelfde banner in elke afdeling. Ingesteld op een bovenliggende categorie verschijnt de banner in die categorie en in al haar afstammelingen.

De bepaling steunt op de ingebouwde geneste boom van PrestaShop (kolommen nleft en nright) en kost dus geen extra query per pagina. Verplaatst u categorieën, dan herberekent PrestaShop die waarden en volgt het bereik automatisch.

Afbeeldingen en talen

Elke banner accepteert een beeld en een alt-tekst per taal, waarmee u een boodschap of een prijs per markt kunt aanpassen. Heeft een taal geen eigen beeld gekregen, dan toont de module dat van de standaardtaal van de winkel in plaats van de banner te verbergen.

De afmetingen van de afbeelding worden bij het uploaden uitgelezen en in de HTML-attributen width en height geschreven, wat layoutverschuiving bij het laden voorkomt. Bestanden krijgen een willekeurig achtervoegsel en worden opgeslagen in /img/datafireflycategorybanner/.

Multishop

Is de multishopfunctie actief, dan toont het formulier een blok Winkelkoppeling. Een banner verschijnt alleen in de aangevinkte winkels, en de lijst in de beheeromgeving toont enkel de banners die zichtbaar zijn in de huidige winkelcontext.

Vinkt u geen winkel aan, dan koppelt de module de banner aan de huidige context, zodat er nooit een banner zonder winkel ontstaat.

Facetfilters, sortering en paginering

In PrestaShop 8 en 9 herladen facetfilters, sortering en paginering de productlijst via AJAX zonder de pagina te vernieuwen. De module luistert naar het updateProductList-event van PrestaShop, haalt de vorige banners weg en plaatst ze na elke DOM-vernieuwing terug op de juiste posities.

CSS en JavaScript worden alleen op categoriepagina’s geladen, en alleen wanneer de huidige categorie minstens één actieve en toonbare banner heeft.

Bijwerken vanaf versie 1.0.0

Installeer het nieuwe archief gewoon over het oude heen vanuit modulebeheer. Het upgradescript zorgt voor:

• het toevoegen van de kolommen voor bereik, planning en afbeeldingsafmetingen;
• het aanmaken van de winkelkoppeltabel en het overnemen van de oorspronkelijke winkel van elke banner;
• het verplaatsen van bestaande afbeeldingen van views/img/banners/ naar /img/datafireflycategorybanner/ en het uitlezen van hun afmetingen;
• het verwijderen van een hook die niet meer nodig is.

Uw banners, hun posities en hun beelden blijven behouden.

FAQ en probleemoplossing

De banner verschijnt niet op de categoriepagina

Controleer op volgorde: de banner is actief; de datum van vandaag valt binnen het planningsvenster; de gekozen categorie is de bekeken categorie, of het subcategoriebereik staat aan; de getoonde taal heeft een afbeelding, of de standaardtaal heeft er een; in multishop is de huidige winkel aangevinkt. Leeg tot slot de PrestaShop-cache.

De banner staat op de verkeerde plek

De positie telt de producten van de huidige pagina. Toont uw lijst 12 producten per pagina, dan verschijnt een banner op positie 20 nergens. Verlaag de waarde of verhoog het aantal producten per pagina.

De banner breekt de rasterindeling

Maak het veld CSS-klasse leeg zodat de banner de klassen van de productcellen van uw thema overneemt. Wilt u een banner over de volle breedte, vul dan col-12 in. Meng geen klassen van verschillende rastersystemen.

De banner verdwijnt na filteren

De module haakt opnieuw in op het updateProductList-event. Vervangt uw thema of een externe filtermodule de volledige container van de productlijst zonder dat event af te vuren, dan kan het terugplaatsen niet gebeuren. Neem contact op met de support en vermeld uw thema en filtermodule.

De afbeelding wil niet uploaden

De module accepteert JPG, PNG, GIF, WebP en SVG tot 4 MB. Controleer ook of /img/datafireflycategorybanner/ beschrijfbaar is en of de PHP-instellingen upload_max_filesize en post_max_size groter zijn dan het bestand.

De bannerlink wordt geweigerd

Alleen URL’s die met http://, https:// of een schuine streep beginnen worden aanvaard. Dat beschermt tegen het injecteren van javascript: of data: adressen.

Wat gebeurt er bij het verwijderen van de module?

De module verwijdert haar tabellen en de map /img/datafireflycategorybanner/ met de beelden erin. Maak een back-up van uw afbeeldingen als u later opnieuw wilt installeren.