Category Showcase: documentatie van de PrestaShop categorie carrousel

Installatie

Open in de back-office Modules > Modulebeheer, klik op „Een module uploaden” en verstuur het bestand dfcategoryshowcase.zip. De module is compatibel met PrestaShop 8.0 tot 9.x.

Bij de installatie maakt de module haar tabellen aan, de map /img/dfcategoryshowcase/ voor geüploade afbeeldingen, de hook displayDfCategoryShowcase en een demo-showcase: de subcategorieën van de categorie Home, als carrousel, op de homepage. Open uw winkel om het resultaat te zien en pas deze showcase daarna aan of verwijder hem.

De module beheert u via Design > Category Showcase (de knop „Configureren” van de module leidt er ook naartoe).

Een showcase maken

Klik op „Showcase toevoegen”. Het tabblad Algemeen bevat:

• Interne naam: alleen zichtbaar in de back-office.
• Hook: de plek van weergave (zie hieronder).
• Lay-out: carrousel, raster of masonry.
• Designvoorinstelling: past bij het opslaan een volledige stijl toe (zie hieronder).
• Getoonde categorieën: de bron van de categorieën.
• Titel, subtitel, tekst en link „Alles bekijken”: per taal.

De drie bronnen

• Handmatig gekozen: na het opslaan brengt de module u naar het categorieënscherm van de showcase. Voeg ze één voor één toe en zet ze in volgorde met slepen.
• Subcategorieën van een bovenliggende categorie: kies de bovenliggende categorie en eventueel een maximum aantal. De lijst volgt uw catalogus.
• Subcategorieën van de bekeken categorie: te gebruiken met displayHeaderCategory of displayFooterCategory. Elke categoriepagina toont haar eigen subcategorieën. Een categorie zonder subcategorieën toont niets.

In beide subcategoriemodi dient het toevoegen van een categorie in het categorieënscherm alleen om haar aan te passen. Schakelt u haar uit, dan verdwijnt ze uit de showcase.

Een categorie aanpassen

Klik in de lijst met showcases op „Categorieën” en voeg een categorie toe of bewerk er een. Elk leeg veld neemt de waarde van de PrestaShop-categorie over:

• Eigen afbeelding: JPG, PNG, WebP of GIF. De module maakt kopieën van 480 en 960 px, die automatisch aan kleine schermen worden geleverd.
• Mobiele afbeelding: optioneel, getoond onder 768 px. Handig voor een strakkere uitsnede.
• Naam en korte beschrijving: regeleinden in de beschrijving blijven behouden.
• Badge: bijvoorbeeld Nieuw, Sale of -30%.
• Knoptekst en link: de link kan naar een gefilterde lijst of een landingspagina wijzen. Alleen http(s)-links, relatieve links, ankers, mailto: en tel: worden geaccepteerd.
• CSS-klasse: toegevoegd aan de kaart.

Een categorie kan maar één keer per showcase worden toegevoegd.

Design

Voorinstellingen

Het veld „Designvoorinstelling” in het tabblad Algemeen biedt Minimaal, Kaarten, Overlay, Cirkels en Banners. De voorinstelling vervangt bij het opslaan de opties die ze dekt (afbeelding, kaart, teksten, knop, kolommen). Daarna springt het veld terug naar „Mijn instellingen behouden” en blijven alle opties aanpasbaar.

Tabbladen met instellingen

• Lay-out: rijen (1 tot 3), kolommen op desktop (1 tot 8), tablet (1 tot 6) en mobiel (1 tot 4), afstand, rijlimiet voor raster en masonry, masonry-stijl, container (kolom van het thema, begrensd met maximale breedte, volle breedte), ruimte en achtergrond van de sectie.
• Kop: titel tonen, tag (H2 aanbevolen op de homepage), uitlijning, kleuren en groottes, positie en stijl van de link „Alles bekijken”.
• Afbeelding: PrestaShop-afbeeldingsformaat („Automatisch” kiest het scherpste formaat van minstens 400 px, anders de originele afbeelding), verhouding, bijsnijden of hele afbeelding, ronde vorm, achtergrond, lazy loading.
• Kaart: afronding, rand, schaduw, achtergrond, binnenruimte, hover-effect, duur van de animatie.
• Teksten: positie (onder de afbeelding, op de afbeelding boven, in het midden of onder, of geen tekst), overlay, typografie van de naam, beschrijving, productteller.
• Knop en badge, Carrousel, Zichtbaarheid, Geavanceerd: zie de volgende secties.

Met de ronde vorm staat de tekst altijd onder de afbeelding.

Carrousel

De opties van het tabblad Carrousel gelden als de lay-out „Carrousel” is: automatisch afspelen en vertraging, pauze bij hover, doorlopend, kolommen per klik, pijlen (op de carrousel, erbuiten op grote schermen of naast de titel), kleuren, navigatiestippen, voorproefje van de volgende categorie op mobiel, slepen met de muis.

Bij 2 of 3 rijen vullen de categorieën elke kolom van boven naar beneden, daarna scrollen de rijen samen. Automatisch afspelen pauzeert bij hover, bij toetsenbordfocus, bij aanraking, als het tabblad verborgen is of als de carrousel uit beeld verdwijnt. Het staat uit als de bezoeker in zijn systeem om minder animatie heeft gevraagd.

Waar een showcase tonen

• displayHome: homepage.
• displayHeaderCategory en displayFooterCategory: categoriepagina’s, boven of onder de producten.
• displayDfCategoryShowcase: hook aangemaakt door de module, die u overal in het thema aanroept met {hook h='displayDfCategoryShowcase'}.
• Eigen hook: kies „Eigen hook…” en typ een naam (letters, cijfers, – en _). Een hook die niet bestaat wordt automatisch aangemaakt en gekoppeld. Roep hem aan met {hook h='uwHook'}. Een oude hooknaam (alias) wordt onder zijn echte naam opgeslagen.
• Widget: {widget name='dfcategoryshowcase' id_showcase=1} toont een bepaalde showcase, ongeacht zijn hook.

Meerdere showcases kunnen een hook delen: ze verschijnen in de volgorde van de lijst, die u met slepen wijzigt. De module ontkoppelt zich automatisch van hooks die niet meer gebruikt worden.

Zichtbaarheid

• Tonen vanaf / tot: data in het formaat JJJJ-MM-DD UU:MM:SS. Leeg = geen limiet.
• Klantengroepen: de showcase wordt alleen getoond aan de aangevinkte groepen (Bezoeker, Gast, Klant of uw B2B-groepen). Alles aangevinkt = geen beperking.
• Verbergen op mobiel / op desktop (tabblad Geavanceerd): onder 768 px of vanaf 1024 px.
• Winkels: koppel in multistore elke showcase aan de gewenste winkels.

Een showcase dupliceren

De actie „Dupliceren” in de lijst kopieert de showcase met zijn categorieën, teksten, winkels en afbeeldingen. De kopie wordt uitgeschakeld aangemaakt: pas haar aan en schakel haar daarna in.

Eigen CSS

Elke showcase wordt weergegeven in <section id="dfcs-ID">, waarbij ID het nummer uit de lijst is. Het veld „Eigen CSS” in het tabblad Geavanceerd wordt alleen met die showcase uitgevoerd. Voorbeeld:

#dfcs-2 .dfcs-card__name { letter-spacing: .08em; }

Verschijnt dezelfde showcase twee keer op een pagina (hook en widget), dan krijgt de tweede kopie de id dfcs-ID-2.

Cache en prestaties

De uitvoer wordt in de Smarty-cache bewaard per showcase, taal, winkel en klantengroep. De cache wordt geleegd bij elke opslag in de module, bij elke wijziging van een categorie en bij elke wijziging van een product als een showcase de productteller toont. De CSS en het JavaScript van de module worden alleen geladen als er minstens één showcase actief is.

Veelgestelde vragen

De showcase verschijnt niet

Controleer of de showcase actief is, aan de winkel gekoppeld, binnen zijn weergaveperiode en open voor de groep van de bezoeker. Controleer daarna of uw thema de gekozen hook echt aanroept. Bij een eigen hook moet de tag {hook h='...'} in een template staan.

De afbeeldingen zijn wazig

Laat het afbeeldingsformaat op „Automatisch” staan of upload een eigen afbeelding. Het formaat category_default van PrestaShop 8 meet maar 141 x 180 px.

In masonry volgt de volgorde niet de leesrichting van links naar rechts

De stijlen „natuurlijke hoogtes” en „afwisselende hoogtes” vullen de kolommen van boven naar beneden. Is de volgorde van links naar rechts belangrijk, gebruik dan het raster of de stijl „eerste categorie uitgelicht”.

Verwijderen

Bij het verwijderen worden de tabellen van de module, haar beheertabbladen en de map /img/dfcategoryshowcase/ met de geüploade afbeeldingen verwijderd.