Product Carousel Pro — Onbeperkte Productcarrousels (dfproductcarousel)

Product Carousel Pro maakt onbeperkt productcarrousels overal in uw PrestaShop-winkel: bestsellers, nieuwe producten, aanbiedingen, producten uit een categorie of een handmatig geordende selectie, weergegeven op zes standaardhooks of op uw eigen custom hooks die ter plekke worden aangemaakt. Het onderscheidende kenmerk van de module: de productkaarten worden gerenderd via het miniatuur-template van uw actieve thema, via ProductAssembler en ProductPresenter. Prijzen, labels, snelweergave en toevoegen aan winkelwagen werken exact zoals op uw categoriepagina’s.

Installatie

1. Open in uw PrestaShop-back-office Modules > Modulebeheer.
2. Klik op Een module uploaden en sleep het bestand dfproductcarousel.zip erin.
3. Onder het menu Modules verschijnt een tabblad Product Carousel Pro: daar gebeurt alles (de knop Configureren van de module leidt er ook naartoe).

De module maakt drie tabellen aan (carrousels, meertalige titels, winkelkoppeling) en registreert zes weergavehooks plus actionFrontControllerSetMedia voor haar assets. Custom hooks die u later aanmaakt registreren zich automatisch bij het opslaan van de betreffende carrousel.

Een carrousel aanmaken

Klik in de lijst op Carrousel toevoegen. Het formulier is opgebouwd uit vijf blokken: Inhoud, Plaatsing, Lay-out, Stijl en Gedrag.

• Interne naam: alleen zichtbaar in de back-office, om de lijst overzichtelijk te houden.
• Titel en ondertitel: meertalig, weergegeven boven de carrousel. Laat de titel leeg om helemaal geen koptekst te tonen.

De carrousellijst biedt vervolgens activering in één klik, duplicatie (de kopie wordt uitgeschakeld aangemaakt) en bulkacties voor verwijdering.

Productbronnen

Elke carrousel kiest zijn bron uit zes mogelijkheden:

• Bestsellers: de best verkochte producten van de winkel.
• Nieuwe producten: producten gemarkeerd als nieuw (de termijn is uw PrestaShop-instelling “Aantal dagen dat een product als nieuw wordt beschouwd”).
• Aanbiedingen: producten met een lopende korting.
• Producten uit een categorie: kies de categorie in de selectieboom, de producten volgen de volgorde van de categorie.
• Homecategorie: de producten van de hoofdcategorie van de winkel, het equivalent van de native “uitgelichte producten”.
• Handmatige selectie: u kiest de producten één voor één.

Het veld Maximaal aantal producten begrenst hoeveel producten worden geladen, welke bron u ook kiest.

De handmatige selectie

Typ minstens twee tekens in het zoekveld: de autocomplete vindt uw producten op naam of referentie. Elk aangeklikt product komt in de lijst eronder, met zijn sleepgreep: herorden met drag-and-drop, en de front-office toont de producten exact in die volgorde. Gedeactiveerde of in de catalogus verborgen producten worden bij weergave automatisch weggefilterd, zonder de carrousel te breken.

De plaatsing kiezen

Standaardhooks

Zes hooks staan in de keuzelijst:

• displayHome: homepage;
• displayContentWrapperTop en displayContentWrapperBottom: boven en onder de hoofdinhoud, op de meeste pagina’s;
• displayFooterBefore: vlak vóór de footer;
• displayFooterProduct: onderaan de productpagina, de klassieke cross-sellingplek;
• displayShoppingCartFooter: onder de winkelwagensamenvatting.

Meerdere carrousels kunnen dezelfde hook delen: ze stapelen zich in de volgorde van hun veld Positie.

Custom hooks

Selecteer Custom hook in de lijst en typ een naam in het veld dat verschijnt, bijvoorbeeld MijnCarrousel. Bij het opslaan schoont de module de naam op (alleen letters en cijfers), zet er zo nodig display voor (displayMijnCarrousel), registreert hem bij PrestaShop en gaat ernaar luisteren. Plaats vervolgens de aanroep in het template van uw keuze:

{hook h='displayMijnCarrousel'}

De aangemaakte hook verschijnt in de keuzelijst voor de volgende carrousels. U kunt zoveel hooks aanmaken als u nodig heeft.

Widget-syntaxis

Om één specifieke carrousel weer te geven, onafhankelijk van zijn hook, gebruikt u de widget-syntaxis met het ID uit de eerste kolom van de lijst:

{widget name='dfproductcarousel' carousel=3}

Handig op een CMS-pagina of in een maatwerktemplate. De carrousel moet actief zijn om te verschijnen.

Lay-out

• Producten per rij: drie onafhankelijke waarden, van 1 tot 8, voor desktop (992 px en meer), tablet (768 tot 991 px) en mobiel (minder dan 768 px). De klassieke configuratie is 4 / 3 / 1.
• Schuifmodus: “Eén product tegelijk” schuift één kaart per klik door, “Volledige rij” een hele pagina.
• Tussenruimte: de afstand in pixels tussen de kaarten (standaard 20 px).
• Volledige breedte: de carrousel breekt uit zijn container en beslaat de hele schermbreedte, fraai op een homepage in combinatie met de skin Donkere sectie.

Stijl

De vijf skins

• Klassiek: de productkaarten van het thema strikt onaangeroerd. De standaardkeuze en de veiligste.
• Minimaal: verwijdert schaduwen en randen voor een vlakke look.
• Kaart: slagschaduw, afgeronde hoeken en een lichte lift bij hover.
• Omlijning: een dunne rand rond elke kaart, die bij hover de accentkleur aanneemt.
• Donkere sectie: zet de hele carrousel op een donkere achtergrond, met aangepaste titel en paginering.

Aanvullende instellingen

• Titeluitlijning: links, gecentreerd of rechts, de accentonderlijning volgt.
• Accentkleur: gebruikt voor pijlen bij hover, de actieve paginering en de titelonderlijning. Laat leeg om de hoofdkleur van uw thema te erven.
• Pijlen: getoond of verborgen, in drie stijlen (cirkel, vierkant, minimaal zonder achtergrond).
• Paginering: punten of balken, automatisch gegenereerd op basis van het aantal pagina’s.

Gedrag

• Autoplay: automatisch doorschuiven met instelbare vertraging (standaard 5.000 ms, minimum 1.000 ms). Het afspelen pauzeert wanneer het browsertabblad verborgen is.
• Pauze bij hover: onderbreekt de autoplay zolang de cursor boven de carrousel staat.
• Oneindige lus: de carrousel keert zonder sprong terug naar het begin, dankzij transparant klonen van de uiteinden. Zonder deze optie schakelen de pijlen aan de uiteinden uit.

Ongeacht de instellingen bedient u de carrousel met de vinger (touch- en muis-swipe, met bescherming tegen onbedoelde klikken aan het einde van het gebaar), met het toetsenbord (pijltjestoetsen links en rechts wanneer de carrousel focus heeft), en respecteert de module de RTL-leesrichting en de systeemvoorkeur prefers-reduced-motion.

Thema-native rendering: zo werkt het

• De producten worden samengesteld en gepresenteerd door ProductAssembler en ProductPresenter, de mechanismen die PrestaShop zelf voor zijn lijsten gebruikt.
• Elke kaart wordt vervolgens gerenderd door het template catalog/_partials/miniatures/product.tpl van uw actieve thema: prijzen, kortingen, labels, snelweergave en winkelwagenknop zijn die van het thema, zonder enige aanpassing.
• De module schrijft nooit in themabestanden: ze laadt haar eigen stylesheet voor de carrouselmechaniek, na de CSS van het thema.
• Een product met een fout wordt stilzwijgend overgeslagen in plaats van de hele carrousel te breken.

Multistore

Elke carrousel wordt bij het opslaan gekoppeld aan de winkels van de context. Om een carrousel voor één specifieke winkel aan te maken, schakelt u vóór het aanmaken naar diens context met de multistore-selector. Een carrousel opgeslagen in de context “Alle winkels” verschijnt overal.

Probleemoplossing

• De carrousel verschijnt niet: controleer achtereenvolgens of de carrousel actief is, of de bron minstens één product oplevert (een lege categorie of een handmatige selectie van gedeactiveerde producten geeft een stille carrousel), of de gekozen hook daadwerkelijk bestaat op de bezochte pagina, en leeg de PrestaShop-cache (Geavanceerde instellingen > Prestaties).
• De custom hook toont niets: de naam in {hook h='...'} moet exact overeenkomen met de geregistreerde naam, inclusief het voorvoegsel display, zichtbaar in de kolom Hook van de lijst. Leeg na het toevoegen van de aanroep aan een template de Smarty-cache.
• De pijlen verschijnen niet: ze verbergen zich automatisch wanneer alle producten in één rij passen. Voeg producten toe of verlaag het aantal kolommen.
• De skin Kaart of Omlijning oogt rommelig met mijn thema: sommige thema’s passen zelf al schaduwen en randen toe op hun miniaturen. Schakel terug naar de skin Klassiek, die niets aanraakt, of Minimaal, die de effecten van het thema neutraliseert.
• Twee carrousels in de verkeerde volgorde op dezelfde hook: pas hun veld Positie aan, de weergave volgt de oplopende volgorde.
• De productzoekfunctie stelt niets voor: het zoeken start vanaf twee tekens en doorzoekt namen en referenties van de taal die wordt bewerkt.

De-installatie

De-installatie verwijdert de drie tabellen, het back-office-tabblad en de geregistreerde hooks. Uw thema en templates blijven intact; alleen de {hook h='...'}-aanroepen die u zelf handmatig aan uw templates toevoegde verwijdert u zelf (een hook zonder luisterende module toont simpelweg niets en veroorzaakt geen fout).