Ein Empfehlungs-Widget kann ein Produkt in den Warenkorb des Besuchers legen, ohne dass er die Seite verlässt: Der Button Add to cart der Karte führt ein kurzes Stück JavaScript aus, das Sie einmal für Ihr Konto speichern und das jedes Widget verwendet. Personyze kann nicht wissen, wie der Warenkorb Ihres Shops funktioniert, daher ist der Code Ihre Sache — meist ein paar Zeilen rund um die eigene „Hinzufügen“-Anfrage Ihres Warenkorbs.
Wo der Code liegt
Gehen Sie zu Einstellungen → Empfehlungs-Einrichtung → Produkt-Tracking, öffnen Sie Produkt in den Warenkorb gelegt und klappen Sie unter Was das Widget tut den Bereich Schnell in den Warenkorb auf. Das Panel kennzeichnet ihn als Personyze-Widget-Callback (kein Tracker): Er erkennt keine Warenkorb-Hinzufügungen auf Ihrer Website — das tun die Quellen darüber —, sondern läuft, wenn ein Besucher in einem Personyze-Widget auf „Add to cart“ klickt.
Das Feld öffnet sich mit einer Code-Vorlage. Bearbeiten Sie sie und klicken Sie auf Speichern. Solange hier kein funktionierender Code gespeichert ist, schlägt der Button fehl, und das Widget zeigt seine Fehlermeldung.
Was der Code tun muss
| Teil | Was er ist |
|---|---|
| Die Funktion | Der Code muss eine Funktion mit dem Namen add_to_cartdeklarieren. Alles andere lehnt das Speichern mit This script must declare function named "add_to_cart()" ab, ein Skript mit Fehlern mit There are errors in script. Einige Widget-Optionen und ältere Anleitungen erwähnen noch add_to_cart_for_personyze(); aufgerufen wird die Funktion add_to_cart. |
products |
Ein Array mit einem Objekt pro Produkt: internal_id (die interne ID des Produkts in Ihrem Katalog, als String) und quantity (1 oder mehr). Ein Bundle-Widget übergibt alle ausgewählten Produkte in einem Aufruf. Katalogspalten, die Sie unter Verfügbare Felder → Feld hinzufügen ergänzen, werden unter ihrem eigenen Namen in jedem Objekt mitgeliefert — fügen Sie sku hinzu, und jedes Produkt enthält dann p.sku. |
arg |
Undefiniert, sofern das Widget es nicht setzt. Jedes Widget hat dafür ein eigenes Feld — je nach Vorlage Quick Add to Cart — Cart Integration Argument oder Extra add_to_cart Argument — für alles, was sich pro Widget unterscheidet, etwa eine Variante oder eine Menge. |
| Rückgabewert | Ein Promise. Eine async function gibt automatisch eines zurück; alles andere schlägt fehl mit add_to_cart() must return Promise object. |
| Erfolg | Das Promise wird erfüllt. Personyze erfasst dann für jedes Produkt Produkt in den Warenkorb gelegt, dem Widget zugeordnet — Sie melden es nicht selbst. |
| Fehlschlag | Das Promise wird abgelehnt, oder die Funktion wirft einen Fehler. Das Widget zeigt dann seine Fehlermeldung statt seiner Bestätigung. |
Der Code läuft im Browser des Besuchers auf Ihrer Website, daher erreicht eine relative URL wie /cart/add Ihren Shop mit der eigenen Sitzung des Besuchers. Greifen Sie auf die globalen Objekte Ihrer Website über window zu (zum Beispiel window.myCart); modernes JavaScript ist kein Problem, es wird für ältere Browser transpiliert.
Ein minimales Beispiel
Eine Anfrage pro Produkt, nacheinander. Ersetzen Sie URL und Body durch die echte Warenkorb-Anfrage Ihres Shops:
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);
}
}
}Dasselbe, mit allen Anfragen gleichzeitig:
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);
}
})
));
}Meldet Ihr Code während der Ausführung selbst Warenkorb-Ereignisse an Personyze (ein personyze.push mit einem Produktereignis, etwa um den Warenkorb zu spiegeln, den Ihre API zurückgibt), fügt Personyze nicht zusätzlich ein eigenes Produkt in den Warenkorb gelegt hinzu.
Nachrichten
Unter dem Code fügen Meldung anzeigen, wenn das Hinzufügen erfolgreich war und Meldung anzeigen, wenn das Hinzufügen fehlgeschlagen ist jeweils eine kontoweite Meldung hinzu — Symbolname, Text, Stil (CSS) und Ausblenden nach (Sekunden), mit Live-Vorschau. Sie erscheint nach jedem schnellen Hinzufügen aus einem beliebigen Widget, zusätzlich zur Bestätigung, die das Widget selbst zeigt.
Schnell aus dem Warenkorb entfernen und Schnell auf die Wunschliste
- Schnell aus dem Warenkorb entfernen — weiter unten im selben Feld: Code, der ausgeführt wird, wenn ein Besucher in einem Personyze-Widget auf „Remove from cart“ klickt. Er muss Folgendes deklarieren:
remove_from_cart(products, arg); jedes Produkt enthält seineinternal_id. - Schnell auf die Wunschliste — in der Schublade Produkt zu Favoriten hinzugefügt unter Was das Widget tut: Code, der ausgeführt wird, wenn ein Besucher in einem Personyze-Widget auf „Add to wishlist“ klickt. Er muss Folgendes deklarieren:
add_to_wishlist(products, arg).
Beide folgen denselben Regeln: dieselben Argumente und ein Promise, das bei Erfolg erfüllt wird. Ein Widget ruft sie nur auf, wenn sein Design diesen Button hat — die Wunschlisten-Herzen in den Produktvorlagen der Galerie erfassen das Speichern in Personyze auch ohne sie.
Verwandte Themen
- Tracking von Produktinteraktionen — Ansichten, Warenkorb-Hinzufügungen und Käufe auf Ihrer Website erkennen.
- Product Slider & Grid und Buy Together — Widgets mit einem In-den-Warenkorb-Button.