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. Ze werkt in alle vijf de zones, slider en vier banners: vooral handig wanneer het desktopvisual tekst bevat die op een telefoon onleesbaar wordt (bijvoorbeeld een brede banner van 900×260 px).
• Deze afbeelding voor alle talen gebruiken: een vinkje boven de velden Afbeelding, en een tweede boven de velden Mobiele afbeelding, zodra de winkel meer dan één taal heeft. Aangevinkt blijft alleen het veld van de standaardtaal zichtbaar: de geüploade afbeelding wordt één keer verwerkt en in alle talen getoond, zonder dubbele bestanden op de schijf. Vink het uit om per taal een ander visual op te geven (bijvoorbeeld met vertaalde tekst in de afbeelding). Het is standaard aangevinkt bij een nieuwe banner, en bij een bestaande banner wanneer alle talen al hetzelfde bestand gebruiken.
• Titel / alt-tekst: gebruikt als alt-attribuut van de afbeelding, per taal.
• Link: kies het type uit de lijst: product (zoeken op naam of referentie), categorie, fabrikant en CMS-pagina (zoeken op naam) of eigen URL. Product-, categorie-, fabrikant- en CMS-URLs genereert PrestaShop automatisch in de taal en winkel van de bezoeker, URL-herschrijving inbegrepen. De eigen URL voert u per taal in en mag leeg blijven voor een banner zonder link.
• Positie: weergavevolgorde binnen de zone (oplopend).

Uploaden van afbeeldingen bij het opslaan

Wanneer u op Opslaan klikt, worden de geselecteerde afbeeldingen niet in één verzoek verstuurd. Elke afbeelding wordt eerst in de browser verkleind tot de maximale breedte van haar zone, daarna apart verstuurd in een eigen AJAX-verzoek en door de server verwerkt (verkleining en WebP), de een na de ander. Een melding toont de voortgang per afbeelding. Zodra alle afbeeldingen verwerkt zijn, wordt het formulier zonder bestanden opgeslagen. De server verwerkt dus altijd maar één afbeelding tegelijk, zelfs voor een banner in 8 talen met mobiele afbeeldingen.

Mislukt een afbeelding, dan stopt het opslaan en noemt de melding het veld en de reden (bestand te groot voor de uploadlimiet, afbeelding te groot voor het PHP-geheugen, niet ondersteund formaat). Corrigeer dat veld en sla opnieuw op: al verstuurde afbeeldingen worden niet nog eens geüpload.

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.

Opslaan mislukt met veel afbeeldingen

Sinds versie 1.4.0 worden afbeeldingen één voor één geüpload en vóór verzending in de browser verkleind, dus dit zou niet meer moeten voorkomen. Verschijnt er toch een foutmelding, dan noemt die het veld en de oorzaak. Bij een te groot bestand verhoogt u upload_max_filesize en post_max_size in de PHP-configuratie of verkleint u de afbeelding. Bij een afbeelding die te groot is voor het geheugen probeert de module memory_limit automatisch te verhogen; staat uw host dat niet toe, verklein het visual dan tot minder dan 3000 px breed vóór het uploaden. Controleer ook dat de module op versie 1.4.0 of hoger staat.

De mobiele afbeelding van een banner verschijnt niet op de telefoon

Vóór versie 1.4.1 gebruikten alleen de slides van de slider de mobiele afbeelding, en de vier vaste banners toonden altijd de desktopafbeelding. Werk de module bij naar 1.4.1: de update leegt de cache van de module. Leeg ook een eventuele full-page cache (LiteSpeed, Varnish, CDN) en test daarna onder 768 px breed. In het tabblad Netwerk van de ontwikkelaarstools moet het bestand laden waarvan de naam image_mobile bevat.

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.