Een aanbevelingswidget kan een product in de winkelwagen van de bezoeker leggen zonder dat die de pagina verlaat: de knop In winkelwagen op de kaart voert een kort stukje JavaScript uit dat je één keer voor je account opslaat, en elke widget gebruikt het. Personyze kan niet weten hoe de winkelwagen van je winkel werkt, dus de code is van jou — meestal een paar regels rond het eigen “toevoegen”-verzoek van je winkelwagen.
Waar de code staat
Ga naar Instellingen → Aanbevelingen instellen → Producttracking, open Product toegevoegd aan winkelwagen, en klap onder Wat de widget doet het onderdeel Snel toevoegen aan winkelwagen uit. Het paneel markeert het als Personyze-widget-callback (geen tracker): het detecteert geen toevoegingen aan de winkelwagen op je site — dat doen de bronnen erboven — maar draait als een bezoeker in een widget van Personyze op In winkelwagen klikt.
Het vak opent met een codetemplate. Pas die aan en klik op Opslaan. Zolang hier geen werkende code is opgeslagen, mislukt de knop en toont de widget zijn foutmelding.
Wat de code moet doen
| Onderdeel | Wat het is |
|---|---|
| De functie | De code moet een functie declareren met de naam add_to_cart. Bij opslaan wordt al het andere geweigerd met This script must declare function named "add_to_cart()", en een script met fouten met There are errors in script. Sommige widgetopties en oudere handleidingen noemen nog add_to_cart_for_personyze(); de functie die wordt aangeroepen is add_to_cart. |
products |
Een array met één object per product: internal_id (de interne ID van het product in je catalogus, als string) en quantity (1 of meer). Een bundelwidget geeft alle geselecteerde producten in één aanroep door. Cataloguskolommen die je toevoegt onder Beschikbare velden → Veld toevoegen gaan op elk object mee onder hun eigen naam — voeg sku toe en elk product komt binnen met p.sku. |
arg |
Undefined, tenzij de widget het instelt. Elke widget heeft er een eigen veld voor — Quick Add to Cart — Cart Integration Argument of Extra add_to_cart Argument, afhankelijk van de template — voor alles wat per widget verschilt, zoals een variant of een aantal. |
| Retourwaarde | Een Promise. Een async function geeft er vanzelf een terug; al het andere mislukt met add_to_cart() must return Promise object. |
| Succes | De Promise wordt vervuld. Personyze legt daarna voor elk product Product toegevoegd aan winkelwagen vast, toegeschreven aan de widget — je rapporteert het niet zelf. |
| Mislukt | De Promise wordt afgewezen, of de functie gooit een fout. De widget toont dan zijn foutmelding in plaats van zijn bevestiging. |
De code draait in de browser van de bezoeker, op je site, dus een relatieve URL zoals /cart/add bereikt je winkel met de eigen sessie van de bezoeker. Verwijs naar de globale objecten van je site via window (bijvoorbeeld window.myCart); modern JavaScript is prima, het wordt voor oudere browsers getranspileerd.
Een minimaal voorbeeld
Eén verzoek per product, na elkaar. Vervang de URL en de body door het echte add-to-cart-verzoek van je winkel:
async function add_to_cart(products, arg)
{ // One request per product. If your cart takes several products at once, send one request instead.
for (const {internal_id, quantity} of products)
{ // Replace with your store's real "add to cart" request.
const response = await fetch('/cart/add',
{ method: 'POST',
credentials: 'include',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'product=' + encodeURIComponent(internal_id) + '&qty=' + quantity
});
if (!response.ok)
{ throw new Error(response.statusText);
}
}
}Hetzelfde, met alle verzoeken tegelijk verstuurd:
function add_to_cart(products, arg)
{ return Promise.all(products.map(p =>
fetch('/cart/add',
{ method: 'POST',
credentials: 'include',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'product=' + encodeURIComponent(p.internal_id) + '&qty=' + p.quantity
}).then(response =>
{ if (!response.ok)
{ throw new Error(response.statusText);
}
})
));
}Rapporteert je code zelf winkelwagenevents aan Personyze terwijl hij draait (een personyze.push met een productevent, bijvoorbeeld om de winkelwagen te spiegelen die je API teruggeeft), dan voegt Personyze er niet nog zijn eigen Product toegevoegd aan winkelwagen aan toe.
Berichten
Onder de code voegen Bericht tonen bij succesvol toevoegen en Bericht tonen wanneer toevoegen mislukt elk een bericht voor het hele account toe — Pictogramnaam, Tekst, Stijl (CSS) en Verbergen na (seconden), met een live voorbeeld. Het verschijnt na elke snelle toevoeging vanuit elke widget, naast de bevestiging die de widget zelf toont.
Snel verwijderen uit winkelwagen en Snel toevoegen aan verlanglijst
- Snel verwijderen uit winkelwagen — verderop in hetzelfde vak: code die draait als een bezoeker in een widget van Personyze op “Remove from cart” klikt. Die moet
remove_from_cart(products, arg)declareren; elk product draagt zijninternal_id. - Snel toevoegen aan verlanglijst — in de lade Product toegevoegd aan favorieten, onder Wat de widget doet: code die draait als een bezoeker in een widget van Personyze op “Add to wishlist” klikt. Die moet declareren:
add_to_wishlist(products, arg).
Beide volgen dezelfde regels: dezelfde argumenten, en een Promise die bij succes wordt vervuld. Een widget roept ze alleen aan als zijn ontwerp die knop heeft — de verlanglijsthartjes in de producttemplates van de galerij leggen het bewaren in Personyze vast zonder deze code.
Gerelateerd
- Tracking van productinteracties — weergaven, toevoegingen aan de winkelwagen en aankopen op je site detecteren.
- Product Slider & Grid en Buy Together — widgets met een knop Add to cart.