Rendering Widgets

This is a supplementary documentation to our Full Integration with A/B Testing documentation, that explains in more detail how to render recommendations correctly.

🚧

See our Full A/B testing integration instructions

We recommend reading our Full integration with A/B testing instructions for a big-picture view of the entire integration.

For technical documentation on the precise specifications of the functions, see:

• $p("register") documentation.
• $p("render") documentation.

We also have the tracking code lines in the code snippets, but tracking as a topic is discussed more in the Tracking Widgets section.

2. Rendering Widgets using Mustache template

Step 1. Add recommendation unit placeholder for your widget.

HTML

<div id="li-recommendation-unit"></div>

Step 2. Add a mustache template for rendering the recommendations to your page.

HTML

<script type="application/mustache"
        id="li-recommendation-template">
  {{#items}}
  <div class='recommended_item'>
    <a href="{{url}}">
      <img src="{{thumbnail}}" width="150" height="150" />
      <span class="title">{{title}}</span>
    </a>
  </div>
 {{/items}}
</script>

Step 3. Render recommendations.

JavaScript

// Callback renders and injects results into the placeholder.
$p('register', {
		max: 5, // Number of items you want to show
  	widget: 'default-widget',
		callback: function(resp) {
			// Query selector should match div name from Step 1
			var el = document.querySelector('#li-recommendation-unit');
			// Template should match mustache template name from Step 2
			var template = document.querySelector('#li-recommendation-template').innerHTML;
			// Basically Mustache.render(template, resp);
			el.innerHTML = $p('render', template, resp);
                    
			console.log("Debug was set to true; disable it in production!"); // Remove in production
			
      $p('track', {
         // Div name from Step 1 and recommendation item div name from Step 2
			   elements: document.querySelectorAll('#li-recommendation-unit > div.recommended_item'),
         name: 'default-widget',
			   // Match widget name
         source: 'LI',
			   // Source "LI" indicates recommendations are provided by LiftIgniter
			   _debug : true
			   // Optional: show alerts in console on click or visible events. Disable in production!
			});
		}
   });

// Executes the registered call.
$p('fetch');

Note that you need to keep the template name and query selector consistent with your mustache template and div.

3. Testing that the recommendations are rendering correctly

When you execute your code to register and fetch, you should see LiftIgniter's recommendations correctly render in the place that you intended for them to show up. You should verify that the recommendations are rendering correctly. In order to verify that the items being rendered are the ones being recommended by LiftIgniter, and that they are being rendered in the correct order, you can add the following line to log the response in the console, and then compare the recommendations.

JavaScript

console.log(resp);// This should be the first line in the callback function

If you notice problems with the number of items returned, see the debugging guidance at Quick-Testing LiftIgniter. If you notice problems with the fields we are returning (for instance, we are returning the wrong images), see the debugging guidance in Section 1 of Editing Fields/Hiding Item.

If you are engaging in client-side filtering of the recommendations, then you should make sure that you preserve the order in which we returned the items.

🚧

Remember to add tracking

Proceed to the next section to make sure the tracking is implemented correctly before you push your code to production.