Alles wat u wilt weten voordat u installeert.
Een gedetailleerde blik op hoe PrestaShop Homepage Slider Module 8/9: Snelle WebP Banners werkt, waarom we het zo gebouwd hebben en de gedachte achter de bovenstaande functies.
Een hero-raster, niet zomaar een carrousel
Klassieke slidermodules tonen de ene afbeelding na de andere en daar stopt het. Deze module reproduceert de homepagestructuur van grote e-commercesites: een hoofdslider over driekwart van de breedte, twee banners rechts gestapeld (catalogus, verzending, service) en twee brede promotiebanners eronder (merken, actuele aanbiedingen). Op mobiel stapelt het raster netjes in één kolom. Elke zone vult u vanuit hetzelfde back office tabblad, met een voorbeeld van de geplaatste afbeeldingen en hun afmetingen.
Gebouwd voor de Core Web Vitals
Een slider is vrijwel altijd het LCP-element van een homepage, en precies daar falen de meeste modules. Hier wordt elke afbeelding verkleind naar de maximale breedte van haar zone en bij upload naar WebP geconverteerd. De eerste slide wordt aan de browser aangekondigd via een link rel preload met fetchpriority high in de head: ze begint te laden nog voordat de CSS is geparsed. Alle andere afbeeldingen laden lazy met async decoding, en de in de database opgeslagen width- en height-attributen verwijderen elke layoutverschuiving. Het JavaScript van de slider weegt ongeveer 3 KB, vanilla, met defer, zonder enige bibliotheek.
Plan uw campagnes, de module doet de rest
Elke banner accepteert een start- en einddatum, op de dag of op het uur nauwkeurig. Uw kerstactie wordt in november voorbereid, gaat op 1 december om middernacht live en verdwijnt op de ochtend van de 26e, zonder dat iemand inlogt in de back office. De cache van de module regenereert automatisch volgens de kalender, en elke opslag in de back office leegt hem direct.
Mobiel als volwaardig kanaal, niet als gekrompen scherm
Een panoramisch visual van 1400 pixels is onleesbaar verkleind op een telefoonscherm. Elke slide accepteert daarom een eigen mobiele afbeelding, gekadreerd voor portret, geserveerd onder 768 px via het picture-element. De preload volgt mee: twee preload-tags met media-attributen, elk apparaat downloadt alleen zijn eigen variant. En als een zone op mobiel geen zin heeft, schakelt een schakelaar in de instellingen haar volledig uit: haar afbeeldingen worden lazy en worden door de browser nooit opgevraagd. Dat zijn kilobytes die echt bespaard worden, niet enkel verborgen.
Ook aan de serverkant schoon
De hero-rendering wordt gecachet in Smarty per taal en per winkel: in normaal bedrijf kost het tonen van de vijf zones geen enkele SQL-query. Wanneer de cache regenereert, haalt één gebundelde query alle banners op. CSS en JS worden alleen op de homepagecontroller geregistreerd, de rest van de winkel laadt er geen byte van. De module volgt de PrestaShop-standaarden: ObjectModel, eigen admincontroller, native multistore en meertaligheid, schone deïnstallatie.
Er zijn nog geen beoordelingen.