Les modèles web recommender Predict utilisent le langage de modèle populaire doT.js.
Quand les articles recommandés sont retournés des serveurs recommender dans l'objet SC, le modèle contrôle la structure et le contenu des éléments de document insérés dans votre widget de recommandation. A la base, un modèle est un morceau de code HTML contenant des fragments de JavaScript se référant aux articles recommandés.
Nous proposons un modèle par défaut contrôlé par CSS, mais n'hésitez pas à implémenter votre propre modèle. Nous vous conseillons de vous familiariser avec les concepts en lisant cette section. Vous pourrez ensuite commencer l'implémentation proprement dite en copiant et en modifiant le modèle par défaut.
Contenus :
Utiliser un modèle recommender autre que par défaut
Définir un modèle recommender
Ajoutez votre modèle à un bloc de script avec la caractéristique scripts type réglée sur text/html. A l'intérieur du bloc, commencez par le préambule <![CDATA[ et terminez par ]]>. Vous pouvez définir plusieurs modèles en utilisant différents ids. L'exemple ci-dessous montre comment ajouter un modèle fictif qui n'affiche rien que le texte C'est monr premier modèle de site Web recommender .
<script type="text/html" id="my-recommender-template"> <![CDATA[ <i>This is my first recommender template</i>. ]]> </script>
Appliquer le modèle à une case recommender
Le modèle peut être transmis à la commande d'API recommend en paramétrant templateId. Par exemple, le my-recommender-template définit plus haut peut être appliqué au widget RELATED comme ci-dessous.
<div id="my-recommendation-container"></div> <script> ScarabQueue.push(["recommend", { logic: "RELATED", containerId: "my-recommendation-container", templateId: "my-recommender-template" }]); </script> Le langage du modèle
Les modèles se substituent à l'objet JavaScript SC qui disposent les produits recommandés dans l'éventail SC.page.products. Chaque produit a des caractéristiques correspondant aux colonnes du catalogue téléversé. Par exemple, SC.page.products[0].title réfère au contenu du champ de catalogue titre du premier article recommandé, etc.
La taille de cet éventail ne dépasse jamais la limite donnée à la commande recommend comme argument. Le modèle est fondamentalement une chaîne HTML, mais vous pouvez insérer la valeur d'une variable JavaScript variable dans le HTML avec {{= variable }}. Par d’exemple :
<i>We recommend {{=SC.page.products.length}} number of products for You</i>! De plus, le modèle peut contenir des blocs de code JavaScript entre {{ et }}. Par d’exemple :
{{ 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> {{ } }} Marquer les éléments HTML extérieurs des articles recommandés
Notre système doit pouvoir tracer chaque clic sur des articles recommandés. Pour rendre cela possible, vous devez ajouter la caractéristique data-scarabitem à l'un des éléments HTML contenant l'article recommandé, et régler la valeur sur l'ID du produit recommandé. Voici l'exemple d'un lien vers un article recommandé contenu dans un élément span :
<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> Copier et modifier le modèle par défaut
Si vous êtes familier de la section précédente, vous commencez l'implémentation effective en utilisant et en modifiant le modèle par défaut cité ci-dessous.
<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> N'oubliez pas que vous devez appliquer le modèle à chaque widget recommender comme dans l'exemple ci-dessous :
<div id="my-recommendation-container"></div> <script> ScarabQueue.push(["recommend", { logic: "RELATED", containerId: "my-recommendation-container", templateId: "my-recommender-template" }]); </script> Voici un exemple :
Travailler avec les articles recommandés directement dans JavaScript
Su vous voulez accéder aux articles recommandés directement, vous pouvez transmettre une fonction JavaScript à la commande recommend, appelée le gestionnaire de réussite. Elle est appelée après que le service de recommandation retourne les recommandations, mais avant que le widget ne soit rendu. Le gestionnaire de réussite prend en compte deux paramètres, l'objet SC et une fonction render qui doit être appelée pour commencer le rendu du widget. Voici certaines des choses que cette fonction vous permet de faire.
Afficher les rabais
Disons que vous voulez afficher le rabais sur le produit comparé au prix recommandé au détail. Vous pourriez calculer la valeur à partir des champs price et msrp dans le code de modèle entre double parenthèses {{ }}, mais cela rendrait la lecture du modèle plus difficile. La fonction success vous permet de séparer l'affichage de la logique.
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 }]); L'exemple ci-dessus vous permet d'utiliser le champ discount dans le modèle recommender, de manière similaire aux champs de catalogue comme title ou link.
Faire quelque chose après le rendu des recommandations
Vous pourriez avoir intérêt à attacher un gestionnaire de clic personnalisé, ou à commencer une animation après que le widget aura été rendu.
var mySuccessHandler = function(SC, render) { render(SC); attachMyClickHandler(); }; ScarabQueue.push(["recommend", { logic: "RELATED", containerId: "my-recommendations", success: mySuccessHandler }]); N'utilisez pas le rendu Scarab, mais plutôt votre propre code
Si vous voulez juste obtenir les identifiants des produits recommandés, et gérer le reste de votre côté, vous pouvez le faire avec un gestionnaire de réussite qui n'appelle pas render.
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 }]); Vous devrez quand même rendre le widget dans le container donné, et marquer les articles recommandés avec les caractéristiques data-scarabitem, autrement le traçage de clic ne fonctionnera pas.
Obtenez des données live de vos serveurs
Dans certains scénarios, vous devez collecter des informations supplémentaires sur les articles recommandés en adressant à d'autres serveurs des requêtes asynchrones. Par exemple, mettons que vous vendez des billets de cinémas, et vous voulez afficher le nombre exact de billets disponibles, en vérifiant la disponibilité dans votre propre base de données de réservation.
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 }]); Le champ num_available_tickets peut maintenant être utilisé dans le code de modèle. Veuillez noter que cela retarde l'apparition du widget, puisque le navigateur devra attendre une requête supplémentaire.
Résolution des problèmes
Erreurs validant les modèles Web Recommender : 'Imprévu "}"
Web Recommender utilise le même langage de modèle que la personnalisation TWIG, ce qui peut entraîner des erreurs lorsque le parenthèses sont bouclées { and }. Ceci peut entraîner le message suivant au moment de la validation d'un modèle :
On peut régler ce problème de deux manières.
1. Déplier les accolades avec la concaténation de chaîne, telle que :
2. Désactiver le parsing de twig en incorporant des parties du contenu entre les énoncés verbatim/endverbatim, tels que :
<!-- {% verbatim %} --> <script> </script> <!-- {% endverbatim %} --> ou
<script> // {% verbatim %} // {% endverbatim %} </script>