Predict Web Recommender-Vorlagen verwenden die beliebte Vorlagensprache doT.js.
Wenn empfohlene Artikel von den Recommender-Servern im SC-Objekt zurückgegeben werden, steuert die Vorlage Struktur und Inhalt der Dokumentenelemente, die in Ihr Empfehlungs-Widget eingefügt werden. Im Grunde ist eine Vorlage ein Stück HTML-Code, das JavaScript-Snippets enthält.
Wir stellen eine Standardvorlage zur Verfügung, die durch CSS gesteuert wird, aber Sie können gern Ihre eigene Vorlage implementieren. Wir raten Ihnen, sich mit den Konzepten vertraut zu machen, indem Sie diesen Abschnitt lesen. Dann können Sie mit der eigentlichen Implementierung beginnen, indem Sie die Standardvorlage kopieren und abändern.
Inhalt:
Eine nicht vordefinierte Recommender-Vorlage verwenden
Eine Recommender-Vorlage definieren
Fügen Sie Ihre Vorlage zu einem Skriptblock hinzu, bei dem das scripts type-Attribut auf text/html gesetzt ist. Beginnen Sie innerhalb des Blocks mit der Präambel <![CDATA[ und schließen Sie mit ]]>. Sie können mehrere Vorlagen definieren, indem Sie verschiedene ids verwenden. Das Beispiel unten zeigt, wie Sie eine Dummy-Vorlage hinzufügen, die nur den Text Dies ist meine erste Website Recommender-Vorlage anzeigt.
<script type="text/html" id="my-recommender-template"> <![CDATA[ <i>This is my first recommender template</i>. ]]> </script>
Die Vorlage auf eine Recommender-Box anwenden
Die Vorlage kann an den API-Befehl recommend übergeben werden, indem templateId gesetzt wird. Zum Beispiel kann die oben definierte my-recommender-template wie unten auf das RELATED-Widget angewendet werden.
<div id="my-recommendation-container"></div> <script> ScarabQueue.push(["recommend", { logic: "RELATED", containerId: "my-recommendation-container", templateId: "my-recommender-template" }]); </script> Die Vorlagensprache
Vorlagen werden durch das JavaScript-Objekt SC ersetzt, das die empfohlenen Produkte im Array SC.page.products hält. Jedes Produkt hat Attribute, die den Spalten des hochgeladenen Produktkatalogs entsprechen. Zum Beispiel bezieht sich SC.page.products[0].title auf den Inhalt des Katalogfelds Titel des ersten empfohlenen Artikels etc.
Die Größe dieses Arrays überschreitet niemals die Grenze, die als Argument an den Befehl recommend übergeben wird. Die Vorlage ist im Wesentlichen ein HTML-String, aber Sie können mit {{= variable }} den Wert einer JavaScript-Variable in den HTML-Code einfügen. Ein Beispiel:
<i>We recommend {{=SC.page.products.length}} number of products for You</i>! Außerdem kann die Vorlage JavaScript-Codeblöcke zwischen {{ und }} enthalten. Ein Beispiel:
{{ if(SC.page.products.length > 0) { }} <i>We primarily recommend {{=SC.page.products[0].title}} for You</i>! {{ } else { }} <i>Sorry! No recommendations found!</i> {{ } }} Die äußeren HTML-Elemente empfohlener Artikel markieren
Unser System muss jeden Klick auf empfohlene Artikel verfolgen. Um dies zu unterstützen, müssen Sie das Attribut data-scarabitem zu einem der HTML-Elemente hinzufügen, die den empfohlenen Artikel enthalten, und den Wert auf die ID des empfohlenen Produktes setzen. Beispiel für einen Link zu einem empfohlenen Artikel, enthalten in einem span-Element:
<span data-scarabitem="{{= SC.page.products[i].id }}"> <a href="{{= SC.page.products[i].link }}"> <img src="{{= SC.page.products[i].image }}"> {{= SC.page.products[i].title }} </a> </span> Standardvorlage kopieren und abändern
Wenn Sie mit dem vorigen Abschnitt vertraut sind, beginnen Sie mit der konkreten Implementierung, indem Sie die unten genannte Standardvorlage verwenden und abändern.
<script type="text/html" id="my-recommender-template"> <![CDATA[ {{ if (SC.page.products.length) { }} <div class="scarab-itemlist"> <div class="scarab-prev"></div> {{ for (var i=0; i < SC.page.products.length; i++) { }} {{ var p = SC.page.products[i]; }} <span data-scarabitem="{{= p.id }}" class="scarab-item"> <a href="{{= p.link }}"> <img src="{{= p.image }}"> {{= p.title }} </a> </span> {{ } }} <div class="scarab-next"></div> </div> {{ } }} ]]> </script> Denken Sie daran, dass Sie die Vorlage auf jedes Recommender-Widget anwenden müssen, wie im Beispiel unten:
<div id="my-recommendation-container"></div> <script> ScarabQueue.push(["recommend", { logic: "RELATED", containerId: "my-recommendation-container", templateId: "my-recommender-template" }]); </script> Ein Beispiel:
Direkt in Javascript mit den empfohlenen Artikeln arbeiten
Wenn Sie unmittelbar auf die empfohlenen Artikel zugreifen möchten, können Sie eine JavaScript-Funktion an den Befehl recommend übergeben, der als Success Handler bezeichnet wird. Wird aufgerufen, nachdem der Empfehlungsdienst die Empfehlungen zurückgegeben hat, aber bevor das Widget gerendert wird. Der Success Handler nimmt zwei Parameter, das SC-Objekt und eine render-Funktion, die aufgerufen werden muss, um das Widget-Rendering zu starten. Folgendes können Sie mit dieser Funktion tun.
Rabatte anzeigen
Sagen wir, Sie möchten den Rabatt auf das Produkt im Vergleich zum empfohlenen Ladenpreis anzeigen. Sie könnten den Wert aus den Feldern price und msrp im Vorlagencode zwischen Doppelklammern berechnen {{ }}, aber dadurch wäre die Vorlage schwerer zu lesen. Mit der Funktion success können Sie die Anzeige von der Logik trennen.
var mySuccessHandler = function(SC, render) { for (var i = 0, l = SC.page.products.length; i < l; i++) { var product = SC.page.products[i]; product.discount = ((1 - product.price / product.msrp) * 100).toFixed(0) + '%'; } render(SC); }; ScarabQueue.push(["recommend", { logic: "RELATED", containerId: "my-recommendations", success: mySuccessHandler }]); Das obige Beispiel ermöglicht Ihnen, das Feld discount in der Recommender-Vorlage ähnlich wie Katalogfelder wie title oder link zu verwenden.
Tun Sie etwas, nachdem die Empfehlungen gerendert wurden.
Vielleicht möchten Sie einen Standard-Click Handler hinzufügen oder eine Animation starten, nachdem das Widget gerendert wurde.
var mySuccessHandler = function(SC, render) { render(SC); attachMyClickHandler(); }; ScarabQueue.push(["recommend", { logic: "RELATED", containerId: "my-recommendations", success: mySuccessHandler }]); Benutzen Sie kein Scarab-Rendering, sondern rendern Sie mit Ihrem eigenen Code.
Wenn Sie einfach nur die IDs der empfohlenen Produkte haben möchten und sich um den Rest selbst kümmern, können Sie dies mithilfe eines Success Handlers tun, der nicht render aufruft.
var mySuccessHandler = function(SC, render) { var recommendedItems = []; for (var i = 0, l = SC.page.products.length; i < l; i++) { recommendedItems.push(SC.page.products[i].id); } doMyOwnThing(recommendedItems); }; ScarabQueue.push(["recommend", { logic: "RELATED", containerId: "my-recommendations", success: mySuccessHandler }]); Sie werden das Widget nach wie vor in dem gegebenen container rendern und die empfohlenen Artikel mit data-scarabitem-Attributen markieren müssen, da das Click Tracking andernfalls nicht funktioniert.
Live-Daten von Ihren Servern erhalten
In einigen Szenarien müssen Sie zusätzliche Informationen zu den empfohlenen Artikeln einholen, indem Sie über asynchrone Requests mit anderen Servern kommunizieren. Zum Beispiel verkaufen Sie Kinokarten und wollen die genaue Anzahl von verfügbaren Karten anzeigen, indem Sie die Verfügbarkeit in Ihrer eigenen Buchungsdatenbank überprüfen.
var mySuccessHandler = function(SC, render) { $.ajax({ url: 'ajax/num_available_tickets?items=...', success: function(data) { for (var i = 0, l = SC.page.products.length; i < l; i++) { SC.page.products[i].num_available_tickets = ... } render(SC); } }); }; ScarabQueue.push(["recommend", { logic: "RELATED", containerId: "my-recommendations", success: mySuccessHandler }]); Das Feld num_available_tickets kann jetzt im Vorlagencode verwendet werden. Bitte beachten Sie, dass dies die Anzeige des Widgets verzögert, da der Browser auf eine Extra-Request warten muss.
Problembehandlung
Fehler beim Überprüfen der Web Recommender Vorlagen: 'Unexpected "}"
Der Web Recommender verwendet dieselbe Vorlagensprache wie die TWIG-Personalisierung, was in Hinblick auf die geschwungenen Klammern { und } zu Fehlern führen kann. In Folge wird bei Überprüfung der Vorlage möglicherweise folgende Fehlermeldung ausgegeben:
Für dieses Problem gibt es zwei mögliche Lösungen.
1. Entfalten Sie die geschwungenen Klammern mittels String-Verkettung, etwa:
2. Deaktivieren Sie das Twig Parsing, indem Sie Teile des Contents zwischen Statements des Typs verbatim/endverbatim einschließen, wie etwa:
<!-- {% verbatim %} --> <script> </script> <!-- {% endverbatim %} --> oder
<script> // {% verbatim %} // {% endverbatim %} </script>