Aanbevelingsslider met overlaykaarten (Overlay Card)

Aanbevelingsslider met overlaykaarten (Overlay Card)

Actietype: Productaanbevelingen. Ingesteld via: het actiemenu — geen code nodig.

De Overlay Card-slider toont productaanbevelingen als afbeeldingskaarten met de productnaam, het merk en de prijs over de foto heen. Hij scrolt met native vegen op touchscreens en met pijlen, bolletjes, slepen of autoplay op desktop, en past het aantal zichtbare kaarten aan de schermgrootte van de bezoeker aan.

Snel aan de slag

1. Voeg de actie aan je campagne toe en kies de template Overlay Card Recommendations Slider.
2. Open Card Image Style en controleer of Main Product Image Column naar het afbeeldingsveld van je catalogus wijst. Is er nog geen catalogus gekoppeld, dan toont de widget in de editor ingebouwde demoproducten, zodat je kunt blijven ontwerpen (zie Demoproducten).
3. Stel in Slider & Items Per View in hoeveel kaarten bezoekers tegelijk zien — desktop, tablet en mobiel hebben elk hun eigen aantal.
4. Kies een pijlstijl in Slider Arrows → Arrow Style, of laat hem op none staan zodat de eigen knopstijl van je site wordt gebruikt.
5. Bekijk een voorbeeld op telefoon, tablet en desktop, en publiceer.

Hoe de slider kaarten afmeet

De kaartbreedte stel je niet direct in — die wordt berekend uit hoeveel items je zichtbaar wilt hebben, zodat de lay-out altijd precies klopt:

card width = (row width − gaps) ÷ items visible

• Items Visible — Desktop / Tablet / Mobile — het aantal kaarten dat tegelijk te zien is op elke schermgrootte. Standaard: 4 / 3 / 1. Decimalen werken: 1.15 op mobiel toont een strookje van de volgende kaart als hint om te vegen.
• Tablet / Mobile Breakpoint (px) — de schermbreedtes waarop de aantallen voor tablet en mobiel ingaan. Standaard: 1024 / 640.
• Minimum Card Width — een ondergrens voor de veiligheid (standaard 200px). Is de rij te smal om het gekozen aantal boven deze breedte te tonen, dan houden kaarten de minimumbreedte en scrolt de rij. Zo worden kaarten in krappe containers niet samengeperst.
• Space Between Cards — de ruimte tussen kaarten. Gebruik een gewone lengte, zoals 24px. Deze waarde wordt bij de eerste weergave toegepast, voordat de responsieve verwerking draait, dus sel() wordt hier niet ondersteund; wil je op mobiel een andere tussenruimte, voeg dan een mediaquery toe in Container Style.
• De hoogte van de kaart, de hoekradius en hoe de foto de kaart vult, stel je in bij Card Image Style → Card Box Style — bijv. height: sel(220px, 180px) voor verschillende hoogtes op desktop en mobiel.

Navigatie

Scroll Behavior — x mandatory komt altijd tot stilstand op de rand van een kaart; x proximity klikt alleen vast als het stopt vlak bij een rand; none scrolt vrij met momentum.

Items Scrolled Per Click — hoe ver elke klik op een pijl en elke autoplaystap gaat: 1–4 kaarten, of full, dat precies de zichtbare set opschuift (bij 2 zichtbare items scrolt het 2, bij 4 scrolt het 4 — het volgt het breakpoint automatisch).

Pijlen

Twee onafhankelijke sets die apart of samen kunnen werken:

• Arrows on Sides (Classic) — grote pijlen, verticaal gecentreerd aan de randen van de rij. Met de optie Offset zet je ze buiten de rij (negatieve waarden) of over de kaarten (positief).
• Arrows in Title Bar — compacte knoppen ‹ › aan het rechtereinde van de titel van de widget.

Presets voor Arrow Style: circle (licht), dark, pill, outline, soft — elk een complete look met een eigen hover, op elke site identiek weergegeven. Kies none om de stijl aan het thema van je site over te laten, zodat de pijlen opgaan in de eigen knoppen van de site; let op: met nonetoont het voorbeeld in de editor eenvoudige fallbackknoppen, omdat het thema alleen op de live site bestaat. Stem een preset fijn af in Side Arrow Custom Style — als er een preset actief is, voeg dan !important toe aan elke eigenschap die je overschrijft.

Twee gedragingen gelden voor alle pijlen: Fade Arrows at Row Ends dimt de terug-pijl aan het begin en de vooruit-pijl aan het eind, en Hide Arrows on Touch Devices haalt ze weg waar vegen vanzelf spreekt. Beide staan standaard aan.

Andere instellingen

• Pagination Dots — klikbare bolletjes onder de rij die de scrollpositie tonen. Ze verschijnen alleen als er meer dan één pagina te scrollen is en worden bij het wijzigen van de grootte automatisch opnieuw opgebouwd. De stijl van de container, de bolletjes en het actieve bolletje is elk apart te bewerken.
• Scrollbar — een optionele smalle scrollbalk onder de kaarten, standaard uit. De kleuren van de schuifknop en de baan gelden in alle browsers; de hoogte-instelling geldt in Safari (Chrome en Firefox gebruiken hun vaste dunne formaat).
• Drag to Scroll with Mouse — laat desktopbezoekers de rij vastpakken en verslepen zoals op een touchscreen. Slepen wordt nooit aangezien voor een klik op een product. Standaard aan.
• Autoplay — stel een interval in milliseconden in (bijv. 4000) om automatisch door te schuiven. Het pauzeert zolang de bezoeker over de slider zweeft of die aanraakt, en Autoplay: Loop to Start bepaalt wat er bij de laatste kaart gebeurt: terugspringen naar de eerste (aan) of stoppen (uit).

Badges

Badges staan in een systeem van hoekplekken, zodat ze nooit overlappen:

• De Badge Stack bevat de badges Popular, Best Seller, New, Time-based en Custom (DB). Elke combinatie stapelt netjes in één hoek, de nieuwste eerst in de volgorde van de template. Badge Stack Corner verplaatst de hele stapel in één keer naar een van de vier hoeken; Stack Custom Style voegt marges toe of maakt er een horizontale rij van.
• Drie badges houden een eigen vaste hoek: Discount (rechtsboven), Price Drop (rechtsonder) en Low Stock (linksonder). Het hartje van de Wishlist staat rechtsboven. Verplaats je de stapel naar een van deze hoeken, geef die badge dan een andere stijl of zet hem uit.

Elke badge heeft eigen drempels (bijv. minimaal kortingspercentage, voorraadniveau, top-N% populariteit) en opties voor tekst en stijl in zijn menusectie.

Inhoud van de kaart

De kaart zelf is de productfoto met een donker makende Gradient Overlay en de Text Overlay onderaan: de productnaam (afgekapt op twee regels), een veld voor een ondertitel (standaard het merk), en de prijs, met automatisch doorgestreepte oorspronkelijke prijs als er korting is. Klikken waar dan ook op de kaart opent de productpagina (Product Click Target bepaalt de URL-kolom en hetzelfde/nieuw tabblad).

Onder de afbeelding kun je optionele blokken aanzetten: producttitel, volledig prijsblok, sterrenbeoordelingen, beschrijving, eigen cataloguskolom, link naar opties, linkknop, Add to Cart (met geanimeerde onthulling bij hover), tekst over betalen in termijnen, live statistieken van weergaven/aankopen, en de social-proof-ticker. Ze staan allemaal standaard uit, zodat de kaart schoon blijft totdat je ze aanzet.

Demoproducten — hoe de standaardset werkt

De widget wordt geleverd met zes ingebouwde voorbeeldproducten, zodat een account de widget kan ontwerpen en bekijken voordat er een productcatalogus is gekoppeld.

De logica, precies:

1. Demokaarten worden alleen in voorbeeldcontexten weergegeven. De widget herkent de Personyze-editor (inclusief het voorbeeldframe) en voorbeeldlinks met de parameter _S_T= . Gewone bezoekers op een live site voldoen daar nooit aan, dus demoproducten — en hun voorbeeldprijzen — kunnen nooit aan echte shoppers verschijnen. Een live site zonder catalogus toont gewoon een lege widget.
2. In een voorbeeldcontext vervangen demo’s de placeholder van de editor. Is er geen catalogus gekoppeld, dan toont de editor één placeholderkaart “Image from Catalog”. De widget telt de echte kaarten die de productlus oplevert: één of minder betekent placeholder, dus die wordt verborgen en de zes demokaarten verschijnen op die plek.
3. Echte producten winnen altijd. Zodra de lus meer dan één echt product oplevert — dus zodra er echt een catalogus is gekoppeld — blijven de demokaarten verborgen en worden echte producten weergegeven, in de editor en overal elders.
4. Het hele gedrag is één schakelaar: Widget Layout → Demo Products (Preview Only). Je kunt hem veilig altijd aan laten staan; uitzetten heeft alleen invloed op voorbeelden.

Wil je de demoproducten zelf wijzigen (afbeeldingen, namen, prijzen), bewerk dan het blok met demokaarten in de broncode van de template — de zes kaarten zijn gewone HTML die het echte kaartontwerp nabootst, gemarkeerd met pz-demo als klasse.

Stijlarchitectuur en samenspel met het sitethema

Drie lagen geven de widget zijn stijl, in de volgorde waarin ze gelden:

1. De kritieke lay-out is inline op de slider en de kaarten, en wordt door de browser toegepast op het moment dat de HTML wordt weergegeven — daarom flitst de slider bij een koude eerste lading nooit als een stapel kaarten over de volle breedte.
2. Responsieve en decoratieve regels (breakpoint-overschrijvingen, bolletjes, pijlpresets, hovers) staan in de stylesheet van de template.
3. De CSS van je site kan alles bereiken wat niet expliciet is vergrendeld. Dat is bewust: met Arrow Style nonekleedt het sitethema de pijlen volledig aan; met een gekozen preset vergrendelt de preset de geometrie en kleuren met !important zodat die op elke site identiek wordt weergegeven.

De praktische regel bij aanpassen: blijft je wijziging niet hangen, dan is de eigenschap vergrendeld door een preset of beschermd tegen conflicten met het thema — voeg !important toe aan je declaratie in het betreffende veld Custom Style en die krijgt voorrang.

Databron

Producten komen uit de catalogus via de productquery van de template — standaard de nieuwste producten, gemengd met de onlangs bekeken items van de bezoeker, beperkt tot 12. De aanbevelingslogica (bestsellers, samen bekeken, op basis van de winkelwagen, enzovoort) stel je in bij de doelgroep- en databronconfiguratie van de actie, zoals bij elke aanbeveling van Personyze, los van de ontwerpopties van deze widget.

Zie De productfeed instellen en Algoritmen voor productaanbevelingen.

Veelgestelde vragen

De pijlen zien er op mijn site anders uit dan in de editor.
Met Arrow Style noneis dat zo bedoeld — het sitethema geeft ze hun stijl, en de editor heeft geen thema. Kies een preset voor een pixelidentieke look op beide.

De bolletjes worden niet getoond.
Bolletjes verschijnen alleen als er meer dan één pagina te scrollen is. Met weinig producten of een hoge Minimum Card Width op een breed scherm past alles op één pagina en verdwijnen de bolletjes.

De terug-pijl lijkt uitgeschakeld.
Aan het begin van de rij valt er niets terug te scrollen, dus dimt Fade Arrows at Row Ends hem. Hij wordt actief zodra de rij beweegt. Zet het vervagen uit als je liever altijd volle pijlen hebt.

Ik heb de template bijgewerkt en sommige instellingen zien er verkeerd uit.
Velden die je eerder hebt opgeslagen, houden hun opgeslagen waarden en overschrijven nieuwe standaardwaarden van de template. Zet een veld terug om de huidige standaardwaarde over te nemen.

Autoplay stopt vanzelf.
Autoplay: Loop to Start staat uit, dus het stopt zoals ingesteld bij de laatste kaart. Zet het aan om continu door te lopen. Autoplay pauzeert ook zolang de bezoeker over de slider zweeft of die aanraakt — dat is de bedoeling.

Kunnen bezoekers op desktop de rij met de muis verslepen?
Ja — Drag to Scroll staat standaard aan. Ze kunnen ook de pijlen, de bolletjes, een trackpad of shift + muiswiel gebruiken.

Waarom kan ik sel() niet gebruiken in Space Between Cards?
De tussenruimte wordt bij de eerste weergave toegepast, voordat de responsieve verwerking draait, om vanaf het eerste frame een stabiele lay-out te garanderen. Gebruik een gewone lengte; regel een andere tussenruimte op mobiel zo nodig met een mediaquery in Container Style.

Worden de demoproducten ooit aan echte bezoekers getoond?
Nee. Ze worden alleen weergegeven in de Personyze-editor en op voorbeeldlinks met _S_T= en alleen zolang de catalogus hoogstens één product teruggeeft.