Panel queries¶
Panel queries are the main way of fetching results, such as products or ads from Elevate 3 Enterprise. With the JavaScript library panels can be fetched by using the panel function.
The following code snippet fetches the panel /product-page with arguments window_first=1, window_last=10, and filter=category[book] from the instantiated esales object.
esalesObj.panel("/product-page").fetch({
window_first: 1,
// "arg." is automatically prepended to panel arguments
// when the JavaScript is used.
window_last: 10,
filter: "category:'book'"
}).error(function(msg) {
console.log("ERROR: " + msg);
}).success(function(data) {
renderOnPage(data);
});
The structure of the object returned by the panel query depends on the structure of the panel /product-page. Panels are configured in Elevate by building a tree structure of areas and backfills. This tree structure is converted by the Web API to a flat JSON-structure in the following format:
// e.g. a product page
Area-1
Result-1
Result-2
...
Area-2
Result-1
...
Here is an example using the following visualised panel tree structure:
// Visualisation example
[Product Page]
┌─────────────────────┼─────────────────────┐
Ads by Products Product Information [For Customer]
┌──────────────┴──────────────┐
Recommend Based on Product Recommend Based on Customer
The root panel "Product Page" is a zone and meant to be used on a product page. It contains panels for related ads and product information for the viewed product. It also includes a zone named "For Customer" with two sub-panels for recommendations.
If a panel is missing required arguments the request to it will fail. Sub-panels with errors are omitted when requested via the RESTful API.
In the following example based on the tree structure above, the panel "Recommend Based on Product" is failing due to a missing argument. When this result is requested through the Elevate Web API the result looks like this:
JSON
{
"adsByProducts":[
{
"name":"ads-by-products",
"ticket":"L3Byb2R1Y3QtcGFnZS9hZHMtYnktcHJvZHVjdHM7IzsjOyM7Izsj",
"path":"/product-page/ads-by-products",
"displayName":"Ads by Products",
"description":"Ads associated with the specified products.",
"resultType":"ads",
"ads":[
{
"attributes":{
"title":"Games for 99 SEK",
"campaign_key":"low_prices",
"rank":"1",
"live_products":"4",
"start_time":"1980-01-01T00:00:00+01:00",
"ad_key":"ad2",
"included":"category:'game' AND price:'9900' AND campaign:'4007547'",
"ad_type":"products",
"url":"index.jsp?campaign=4007547",
"related":"category:'game'"
},
"ticket":"L3Byb2R1Y3QtcGFnZS9hZHMtYnktcHJvZHVjdHM7YWQyOyM7IzsjOyM",
"products":[
{
"attributes":{
"title":"Flight Simulator 2004 Century Flight",
"rank":"1",
"product_key":"P199449"
},
"variants":[],
"ticket":"L3Byb2R1Y3QtcGFnZS9hZHMtYnktcHJvZHVjdHM7YWQyO3Byb2R1Y3Rfa2V5O1AxOTk0NDk7Izs"
},
{
"attributes":{
"title":"Battlefield 2: Complete Collection",
"rank":"2",
"product_key":"P712285"
},
"variants":[],
"ticket":"L3Byb2R1Y3QtcGFnZS9hZHMtYnktcHJvZHVjdHM7YWQyO3Byb2R1Y3Rfa2V5O1A3MTIyODU7Izs"
},
{
"attributes":{
"title":"Mass Effect (DVD-ROM)",
"rank":"3",
"product_key":"P890975"
},
"variants":[],
"ticket":"L3Byb2R1Y3QtcGFnZS9hZHMtYnktcHJvZHVjdHM7YWQyO3Byb2R1Y3Rfa2V5O1A4OTA5NzU7Izs"
},
{
"attributes":{
"title":"Far Cry 2",
"rank":"4",
"product_key":"P874718"
},
"variants":[],
"ticket":"L3Byb2R1Y3QtcGFnZS9hZHMtYnktcHJvZHVjdHM7YWQyO3Byb2R1Y3Rfa2V5O1A4NzQ3MTg7Izs"
}
]
}
]
}
],
"productInformation":[
{
"name":"product-information",
"ticket":"L3Byb2R1Y3QtcGFnZS9wcm9kdWN0LWluZm9ybWF0aW9uOyM7IzsjOyM7Iw",
"path":"/product-page/product-information",
"displayName":"Product Information",
"description":"Displays information for one or more specified products.",
"resultType":"products",
"products":[
{
"attributes":{
"title":"Wii Wireless balance board - White (Big Ben)",
"rank":"1",
"product_key":"P10136986"
},
"variants":[],
"ticket":"L3Byb2R1Y3QtcGFnZS9wcm9kdWN0LWluZm9ybWF0aW9uOyM7cHJvZHVjdF9rZXk7UDEwMTM2OTg2OyM7"
}
]
}
],
"forCustomer":[
{
"name":"recommend-based-on-customer",
"ticket":"L3Byb2R1Y3QtcGFnZS9mb3ItY3VzdG9tZXIvcmVjb21tZW5kLWJhc2VkLW9uLWN1c3RvbWVyOyM7IzsjOyM7Iw",
"path":"/product-page/for-customer/recommend-based-on-customer",
"displayName":"Recommend Based on Customer",
"description":"Products that a specific customer might want to buy.",
"reportTag":"recommendation",
"resultType":"products",
"products":[
{
"attributes":{
"title":"Worrisome Heart",
"rank":"1",
"relevance":"0.18072794471145223",
"product_key":"P885089"
},
"variants":[],
"ticket":"L3Byb2R1Y3QtcGFnZS9mb3ItY3VzdG9tZXIvcmVjb21tZW5kLWJhc2VkLW9uLWN1c3RvbWVyOyM7cHJvZHVjdF9rZXk7UDg4NTA4OTsjOw"
},
{
"attributes":{
"title":"Only by the Night",
"rank":"2",
"relevance":"0.1662201190443174",
"product_key":"P951210"
},
"variants":[],
"ticket":"L3Byb2R1Y3QtcGFnZS9mb3ItY3VzdG9tZXIvcmVjb21tZW5kLWJhc2VkLW9uLWN1c3RvbWVyOyM7cHJvZHVjdF9rZXk7UDk1MTIxMDsjOw"
},
{
"attributes":{
"title":"Flight Simulator X Gold Edition",
"rank":"3",
"relevance":"0.06423038878254093",
"product_key":"P966422"
},
"variants":[],
"ticket":"L3Byb2R1Y3QtcGFnZS9mb3ItY3VzdG9tZXIvcmVjb21tZW5kLWJhc2VkLW9uLWN1c3RvbWVyOyM7cHJvZHVjdF9rZXk7UDk2NjQyMjsjOw"
}
]
}
]
}
Rendering a web page¶
The JSON-serialised panel result returned by the JavaScript library is designed to be as easy as possible to use from JavaScript templates, mostly tested with Mustache and Handlebars.
Here is an example of a template for the result of the "For Customer" area shown above.
<div>
{{#forCustomer}}
<div>
<h2>{{displayName}}</h2>
{{#products}}
<div>
<a href="products/{{attributes.product_key}}" onclick="esalesObj.notifyClick('{{ticket}}')">
More information about {{attributes.title}}
</a>
</div>
{{/products}}
</div>
{{/forCustomer}}
</div>
In the case of Mustache, the above template can be used directly together with the panel result:
esalesObj.panel("/product-page").fetch({presentation_attributes: "title", products: "{product_key}"}).success(function(panels) {
var productPage = Mustache.render(template, panels);
$('body').html(productPage);
});