Homepage Slider en Banners: documentatie

Overzicht

DF Home Banners toont een compleet hero-raster op de homepage van uw winkel, opgebouwd uit vijf zones: een hoofdslider (meerdere slides), een zijbanner boven, een zijbanner onder, een brede banner links en een brede banner rechts. Op desktop neemt de slider ongeveer 75% van de breedte in met de twee zijbanners rechts gestapeld, en de twee brede banners verschijnen eronder. Op mobiel stapelt het raster in één kolom.

De module is gebouwd voor snelheid: WebP-conversie bij upload, preload van de LCP-afbeelding, lazy loading, formaatattributen tegen CLS, 3 KB vanilla JavaScript en Smarty-cache. Geen afhankelijkheden: geen Composer, geen jQuery.

Installatie

1. Ga in uw PrestaShop back office naar Modules > Modulebeheer > Een module uploaden.
2. Selecteer het bestand dfhomebanners.zip dat u vanuit uw DataFirefly-account hebt gedownload.
3. De module installeert zich en maakt een tabblad DF Home Banners aan in het menu Verbeteren, samen met haar tabellen en de uploadmap voor afbeeldingen.

Module-instellingen

De configuratiepagina (Modules > DF Home Banners > Configureren) bevat:

• Autoplay-vertraging van de slider in milliseconden, minimum 2000. De slider pauzeert bij hover, wanneer het browsertabblad verborgen is, en respecteert de systeemvoorkeur prefers-reduced-motion.
• Vijf mobiele weergaveschakelaars, één per zone. Een uitgeschakelde zone wordt verborgen onder 768 px en haar afbeeldingen worden door mobiele bezoekers nooit gedownload: ze schakelen naar lazy loading, en een verborgen lazy afbeelding wordt door de browser niet opgevraagd. Is de slider uitgeschakeld op mobiel, dan wordt zijn LCP-preload automatisch beperkt tot desktop.

Elke opslag van de instellingen leegt de modulecache, het effect op de front office is direct zichtbaar.

Banners beheren

Het beheer gebeurt in het tabblad DF Home Banners van het menu Verbeteren. De lijst toont elke banner met zone, titel, data, positie en status, met filters en activering in één klik.

Een banner aanmaken

Klik op Toevoegen en vul in:

• Zone: de hoofdslider accepteert meerdere banners (één per slide); elk van de vier vaste zones toont de eerste actieve banner volgens de positievolgorde.
• Afbeelding: één veld per taal. Geaccepteerde formaten: JPEG, PNG, WebP. De afbeelding wordt verkleind naar de maximale breedte van haar zone (1400 px voor de slider, 560 px voor de zijbanners, 900 px voor de brede banners) en geconverteerd naar WebP kwaliteit 82, met behoud van een JPEG- of PNG-fallbackbestand. De uiteindelijke afmetingen worden opgeslagen en als width– / height-attributen gezet om CLS te elimineren.
• Mobiele afbeelding: optioneel, één veld per taal. Kadreer haar voor portret; ze wordt verkleind naar 768 px, geconverteerd naar WebP en geserveerd onder 768 px viewport via het picture-element. Vooral nuttig voor sliderslides.
• Titel / alt-tekst: gebruikt als alt-attribuut van de afbeelding, per taal.
• Link-URL: per taal, optioneel.
• Positie: weergavevolgorde binnen de zone (oplopend).

Plannen met start- en einddatum

Beide datumvelden zijn optioneel. Geaccepteerd formaat: JJJJ-MM-DD of JJJJ-MM-DD HH:MM:SS. Een startdatum alleen publiceert de banner vanaf dat moment; een einddatum alleen verwijdert hem op dat moment; beide samen omkaderen de campagne. Lege velden: de banner blijft permanent zichtbaar zolang hij actief is.

Multistore en meertaligheid

In een multistore-context koppelt u elke banner via de koppelingsvakjes van het formulier aan de winkels van uw keuze. De afbeelding, mobiele afbeelding, link en alt-tekst definieert u per taal; een taal zonder afbeelding toont simpelweg niets (de banner blijft in die taal verborgen tot er een afbeelding wordt geüpload). De cache is geïsoleerd per taal en per winkel.

Prestaties: wat de module doet

• LCP: de eerste actieve sliderslide wordt in de head aangekondigd via een link rel="preload"-tag met fetchpriority="high". Met een mobiele afbeelding worden twee preload-tags met media-attributen uitgestuurd: elk apparaat preloadt alleen zijn eigen variant.
• CLS: width– en height-attributen staan op elke afbeelding, de ruimte wordt gereserveerd vóór het laden.
• Gewicht: WebP als uitvoer, lazy loading op elke niet-LCP-afbeelding, overal decoding="async".
• JavaScript: ongeveer 3 KB vanilla, met defer onderaan de pagina geladen. Pijlen, stippen, touch swipe, autoplay.
• Server: rendering gecachet in Smarty per taal en winkel, één gebundelde SQL-query bij regeneratie. CSS en JS alleen geregistreerd op de homepagecontroller.

Probleemoplossing

De banners verschijnen niet op de front office

• Controleer of de banner actief is, of er een afbeelding is geüpload voor de bekeken taal, en of de datum van vandaag binnen het gedefinieerde bereik valt.
• Controleer in multistore de winkelkoppeling van de banner.
• Het thema moet de hook displayHome aanbieden, aanwezig in elk op Classic gebaseerd thema. Bezet een native slidermodule al de zone (ps_imageslider), schakel die dan uit om een visueel duplicaat te vermijden.

De WebP-conversie gebeurt niet

Uw PHP mist waarschijnlijk imagewebp. De module serveert dan de verkleinde originele JPEG- / PNG-bestanden. Vraag uw host om de WebP-ondersteuning van GD te activeren.

Een wijziging verschijnt niet direct

Sla een willekeurige banner of de instellingen op: de modulecache wordt bij elke schrijfactie geleegd. Leeg ook de globale Smarty-cache van PrestaShop als uw winkel achter een full page cache staat (Varnish, LiteSpeed, CDN).

Deïnstallatie

Deïnstallatie verwijdert het admintabblad, de tabellen van de module en haar configuratiewaarden. Geüploade afbeeldingsbestanden blijven in de modulemap tot die van de schijf wordt verwijderd.