Alles wat u wilt weten voordat u installeert.
Een gedetailleerde blik op hoe PrestaShop Categorie Carrousel Module 8/9: Categorieën op de Homepage Tonen werkt, waarom we het zo gebouwd hebben en de gedachte achter de bovenstaande functies.
Een instelbare categorie-etalage, geen vast blok
Het standaard categorieblok van PrestaShop toont een lijst met links of miniaturen in het formaat dat het thema oplegt. Hier stelt u elke showcase in via een formulier met tabbladen: lay-out, aantal rijen, kolommen op desktop, tablet en mobiel, afstanden, breedte van de container, achtergrond van de sectie. U kiest de categorieën handmatig en zet ze in volgorde met slepen, of u laat de module de subcategorieën van een afdeling tonen, met een limiet. Bij de installatie wordt een demo-showcase op de homepage aangemaakt, zodat u het resultaat meteen ziet.
Eigen afbeelding, naam en tekst voor elke categorie
Een categorie heet in de catalogus vaak „Dameskleding”, terwijl u op de homepage „Nieuwe collectie” wilt tonen. Elke categorie in een showcase accepteert daarom een eigen naam, een korte beschrijving, een eigen afbeelding en een strakker bijgesneden mobiele afbeelding, een badge, een knoptekst en een link naar een gefilterde lijst of een landingspagina. Zonder aanpassing gebruikt de module de afbeelding en naam van de categorie. Voor de afbeelding kiest ze automatisch het scherpste beschikbare PrestaShop-formaat, want het formaat category_default van PrestaShop 8 meet maar 141 x 180 px.
Carrousel, raster of masonry, op 1 tot 3 rijen
De carrousel laat 1, 2 of 3 rijen samen scrollen, met pijlen, stippen, doorlopend scrollen en optioneel automatisch afspelen. Op mobiel toont hij een deel van de volgende kaart, zodat duidelijk is dat de rij te swipen is. Het raster zet de categorieën in gelijke kolommen, met een optionele rijlimiet. Masonry biedt drie stijlen: natuurlijke afbeeldingshoogtes, afwisselende hoogtes of de eerste categorie uitgelicht op 2 x 2. Heeft een rij minder categorieën dan kolommen, dan lijnt ze uit met de titel in plaats van links te blijven plakken.
5 voorinstellingen om te starten, 81 opties om af te werken
De voorinstelling „Cirkels” geeft met één klik ronde afbeeldingen in de stijl van Instagram-stories, 6 per rij op desktop. „Overlay” zet de tekst met een verloop op de afbeelding, „Banners” toont 2 grote tegels met namen in hoofdletters en „Kaarten” plaatst elke categorie in een witte kaart met beschrijving en link. De voorinstelling vult de designopties bij het opslaan in, daarna blijft alles aanpasbaar: kleuren, groottes, afrondingen, randen, schaduwen, 6 hover-effecten, tekstpositie, stijl van knop en badge. Een veld voor eigen CSS, beperkt tot de id van de showcase, dekt de laatste details.
Op de homepage, op categoriepagina's of overal
Elke showcase kiest zijn hook uit een lijst of in een vrij veld: een onbekende hooknaam wordt automatisch aangemaakt en gekoppeld, en de module ontkoppelt zich van hooks die niet meer gebruikt worden. De bron „bekeken categorie” toont op elke categoriepagina haar eigen subcategorieën, met één showcase voor de hele catalogus. Met de hook displayDfCategoryShowcase en de widget-tag plaatst u een bepaalde showcase in elk template. Begin- en einddatum en een beperking per klantengroep dienen seizoensacties en B2B-selecties.
Snel en toegankelijk
De carrousel gebruikt het native scrollen van de browser (CSS scroll-snap), aangestuurd door ongeveer 3 KB gecomprimeerd JavaScript, zonder jQuery. Geüploade afbeeldingen worden in 480 en 960 px aangemaakt en geleverd met srcset en sizes berekend op basis van uw kolommen. De eerste afbeelding laadt meteen, de volgende via lazy loading, met width- en height-attributen. De uitvoer staat in de Smarty-cache en wordt vanzelf geleegd als een categorie of product verandert. Toegankelijkheid: de sectie wordt benoemd door haar titel, knoppen en stippen worden voorgelezen door schermlezers, toetsenbordnavigatie heeft een zichtbare focus, automatisch afspelen pauzeert bij focus en prefers-reduced-motion wordt gerespecteerd.
Er zijn nog geen beoordelingen.