$p("render")

$p("render"): (String, Object, Function, [String]) -> undefined

📘

Technical documentation

This page includes technical documentation around the render function, used as part of the code to render LiftIgniter recommendations. For broader context around rendering, see our documentation on Rendering Widgets.

$p("render") takes in the template, item (to render on widget), callback, and array of strings to return. For example, let's say that our recommendation returns:

JavaScript

var item = {
	url: "www.google.com",
  title: "google",
  description: "search engine",
  thumbnail: "www.google.com/favicon.ico"
}

And we want it to render it in the following form:

HTML

<div>
<a href="www.google.com"><img src="www.google.com/favicon.ico"><p>Click here to go to Google</p></a>
<p>search engine</p>
</div>

You can see the specific use case in this documentation. But you can define a Mustache template and run our render function along with the item defined above:

JavaScript

var template = '<div>' +
	'<a href="{{url}}"><img src="{{thumbnail}}"><p>{{title}}</p></a>' +
	'<p>{{description}}</p>' +
	'</div>'
  
var item = {
	url: "www.google.com",
  title: "google",
  description: "search engine",
  thumbnail: "www.google.com/favicon.ico"
}

// If there is no callback, then the function returns the result string.
// In this case it prints result string.
$p("render", template, item, function(result){return result})

render function will return what we wanted.

However, you may not want to use {{}} brackets due to collision with Google Tag Manager or other sort of template you have on your site. In that case, you can configure the brackets to an arbitrary field by passing in an array containing string expression for custom left bracket and right bracket.

JavaScript

// Note that we are using '<%' and '%>' as a substitute to '{{' and '}}'
var template = '<div>' +
	'<a href="{%url%}"><img src="{%thumbnail%}"><p><%title%></p></a>' +
	'<p>{%description%}</p>' +
	'</div>'
  
var item = {
	url: "www.google.com",
  title: "google",
  description: "search engine",
  thumbnail: "www.google.com/favicon.ico"
}

// You can configure the left and right bracket by passing in array of string in which first element and second element correspond to left and right brackets respectviely.
$p("render", template, item, function(result){return result}, ['{%','%}'])

// if you don't want to define the callback,
$p("render", template, item, undefined, ['{%','%}'])