Buy Together — bundelbouwer met live totaal

Een bundelbouwer voor “Vaak samen gekocht” met live totalen: het huidige product staat als anker (“This item”) naast aanbevolen add-ons, elk met een eigen aan/uit-schakelaar. Elke schakelaar werkt meteen het bundeltotaal bij, de doorgestreepte oorspronkelijke prijs, de groene regel You save en de optionele teller N of M items selected — daarna voegt één klik de hele selectie aan de winkelwagen toe.

Hoe deze template werkt

• Drie indelingen. De instelling Layout wisselt tussen vertical (een gestapelde lijst met schakelaars — de standaard), horizontal (een productrij met plustekens ertussen, die zich aan de kaarten aanpast) en compact (een ministrook met kleine foto’s, namen en prijzen — regels voor social proof en productinformatie blijven daar verborgen om ruimte te sparen, terwijl het huidige product zijn label “This item” houdt). In de compacte strook zet Title Position (Strip Layout) de kop inline links van de producten (de standaard) of op een volledige regel erboven. Op smalle schermen wordt de horizontale rij automatisch een nette gestapelde lijst.
• Stijlaccenten en look-voorinstellingen. Eén keuzelijst Style accent (light, gold, bold, ocean) kleurt schakelaars, knoppen, totalen, besparingen en kaarten in één keer anders. Daarbovenop: Title Style Preset (plain, caps, serif, underline, boxed), Button preset (solid, pill, outline, dark, square), Font preset (system, serif, rounded, condensed) en Card Info Order (standard, price-first, info-top, name-first). Elke kleur en elk lettertype blijft afzonderlijk te overschrijven in een eigen stijlveld.
• Engine voor live totalen. De voettekst toont het bundeltotaal, het oorspronkelijke totaal doorgestreept als er kortingen gelden, een regel You save berekend uit het verschil, en een optionele teller van geselecteerde items. Het totaal kan bij elke wijziging even oplichten (Animate Total on Change, standaard aan).
• Hoeveel aanbevelingen. De template vraagt om maximaal acht aanbevelingen (Te tonen aanbevelingen in de kaart Uitvoer van de aanbeveling; maximaal 12), maar alleen Max Items Shown (standaard 2) is zichtbaar. De rest zit achter een link + N more; items die zo verschijnen, staan uitgeschakeld, zodat het totaal alleen producten bevat die de bezoeker echt heeft gezien en gekozen. Klik je nog eens op de link (Show Less Text), dan klappen ze weer in.
• Standaardselectie. Kies of de bundel begint met all items aan, none van de aanbevelingen, of alleen het anchor-product geselecteerd. Stijl, positie, kleur en zichtbaarheid van het selectie-element zijn aparte instellingen.
• Stijl van de bevestiging. Na het toevoegen aan de winkelwagen ziet de shopper een bevestiging. Confirmation Style biedt modern (een donkere, afgeronde melding met een vinkje — de standaard), system (de ingebouwde melding van Personyze) of custom (voer je eigen JavaScript uit vanuit de velden On Success en On Error onder Quick add to cart).
• Live demomodus. Tijdens het ontwerpen verschijnen automatisch demoproducten met werkende schakelaars en totalen — sitebezoekers zien ze nooit.

Bundelprijs en korting

Elke prijs in de widget — elk item, het bundeltotaal, het doorgestreepte oorspronkelijke totaal en de regel You save — komt uit je productcatalogus, via de prijskolommen die in Catalog Fields zijn gekoppeld. Personyze toont de bundel alleen; het verandert niet wat je winkelwagen in rekening brengt.

De add-ons zelf komen uit het algoritme van de aanbeveling — bijvoorbeeld Cross-sells (items die samen gekocht worden, automatisch geleerd) of Beheerde cross-sells (paren die je zelf uploadt). Zie Aanbevelingsalgoritmes.

Best practices

• Bied één of twee partners aan. Eén sterke combinatie werkt meestal beter dan een muur vol keuzes — Max Items Shown staat standaard al op 2.
• Test hoe diep de korting gaat. Een bundelkorting van 10% kan meer opleveren dan 25% als hij ongeveer even goed converteert.
• Plaats hem onder de hoofdafbeelding van het product. Op de productpagina, dicht bij de beslissing om iets in de winkelwagen te leggen.
• Meet tegen een controlegroep. Geef de widget minder dan 100% van het verkeer, zodat de rest van je bezoekers het Originele site ziet, en vergelijk de twee in de stap Prestaties van de campagne — zie A/B-testen.

Instellingen wijzigen in de editor

Elke instelling staat in de zijbalk links in de actie-editor, gegroepeerd per onderwerp; klik op een groep om hem uit te klappen, en het voorbeeld wordt meteen bijgewerkt. Twee voorbeelden:

(1) De groep How Many Recommendations bevat Max Items Shown (standaard 2) en de teksten van de link om meer te tonen. (2) Show More Link wisselt tussen verborgen items tonen via een link of ze gewoon niet weergeven. (3) De resulterende link + N more in de verticale lijst — erop klikken in het voorbeeld werkt precies zoals op de site.

(1) De keuzelijst Layout zet de hele widget met één klik op vertical, horizontal of compact. (2) Hier de strook compact: de titel inline links (via Title Position boven de producten te zetten), gelijke minikaarten met plustekens ertussen, de chip + N more, en het totaal met de winkelwagenknop — allemaal op één regel.

Badges, social proof en productinformatie

• Badges met verstandige standaardwaarden. Kortingspercentage (verborgen als de korting 0 is), NEW (producten die in de afgelopen 14 dagen zijn toegevoegd), Popular en Bestseller (top 5% op weergaven of aankopen), en lage voorraad, dat het live resterende aantal toont gevolgd door aanpasbare tekst zoals “left in stock” (vanaf 5 stuks of minder) — elke drempel, tekst en stijl is aan te passen.
• Regels voor social proof. Aantallen “viewed today” en “bought today” per kaart, met een scope-instelling voor alle kaarten, alleen het anker of alleen de aanbevelingen.
• Regels met productinformatie. Extra catalogusvelden (merk, eigen kolommen) onder de productnaam, met dezelfde scope-instelling.

Laden, pop-ups en stabiliteit

• Laadskelet. Glinsterende placeholderrijen (standaard aan) staan er tot de aanbevelingen binnen zijn, zodat de widget nooit plotseling opduikt.
• Smooth Reveal. De widget blijft even onzichtbaar tot formaat en positie vaststaan, en vloeit dan in — geen zichtbaar verspringen terwijl de pagina laadt. Standaard aan, met een veiligheidsfallback die hem altijd binnen ongeveer drie seconden toont.
• Bescherming tegen verouderde data. Bij navigatie racen het productweergave-event en het verzoek om aanbevelingen tegen elkaar; zou de widget verschijnen met het product van de vorige pagina als “This item”, dan verbergt hij zich voor die paginaweergave. De controle is ingebouwd (Require Current-Page View, standaard aan): de kaart van het huidige product moet naar de bekeken pagina linken. Zo blijft de widget ook automatisch weg van pagina’s die geen productpagina zijn — zonder doelgroepregel.
• Popup Hugs Widget. Draait de widget in een pop-up die veel breder is dan hijzelf, dan verkleint hij het pop-upkader zodat het past. Zet dit uit voor bedoelde bannerpop-ups over de volle breedte.

Alle instellingen

Elke instelling staat in de zijbalk van de actie-editor, precies zoals hieronder gegroepeerd. Klik op een groep om de lijst uit te klappen. Instellingen met (CSS) nemen ruwe CSS; de rest zijn tekst, getallen of eenvoudige keuzelijsten.

Goed om te weten

• De widget verbergt zich buiten productpagina’s en bij verouderde data. Require Current-Page View (standaard aan) zorgt dat de bundel nooit het product van de vorige pagina toont of op de homepage verschijnt. Regel je dit liever zelf? Zet het uit en voeg een doelgroepregel toe die target op bezoekers van wie de laatste interactie een productweergave is.
• De besparingsregel verschijnt alleen als er iets te besparen valt. Heeft geen enkel geselecteerd item korting, dan verbergen het doorgestreepte totaal en de regel You save zichzelf.
• Add bundle to cart stuurt alle geselecteerde items in één aanroep naar de code voor snel toevoegen aan winkelwagen van je account, met de catalogusvelden die je daar hebt toegevoegd; zolang die code niet is opgeslagen, toont de knop zijn foutmelding. Een tweede knop, Save bundle for later, staat standaard uit en is met één klik aan te zetten; beide zijn volledig opnieuw op te maken.
• Centrale prijzen. Eén keuzelijst Price Format en één paar velden voor het valutasymbool gelden overal waar prijzen verschijnen, ook bij totalen en besparingen.
• Bestand tegen site-CSS. De stijlen van de template zijn zo gebouwd dat ze agressieve CSS van de site overleven, terwijl aanpassingen per element die je in de editor maakt nog steeds voorgaan op de standaardwaarden van de template.
• Opgeslagen templatekaarten bevriezen hun code. Bewaar je een eigen kopie in Mijn sjablonen, dan gebruiken acties die daaruit worden gemaakt de code zoals die was bij het opslaan — sla de kaart na grote updates opnieuw op.

Gerelateerd

• Bought Together — klassieke strook — dezelfde engine in de klassieke look: bovenaan een fotostrook, een totaalprijsvak, en daaronder een lijst met selectievakjes.
• Knop voor snel toevoegen aan winkelwagen — de code die de knop Add bundle to cart uitvoert.
• Kortingscode automatisch toepassen bij de checkout — neem de kortingscode van de bundel mee naar de checkout.
• Vertical Product List — een aanbevelingsindeling in lijstvorm, zonder bundellogica.
• Templates — het overzicht van de volledige templatebibliotheek.