Skip to content

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);
});
×
Copyright

This online publication is intellectual property of Voyado Lund AB. Its contents can be duplicated in part or whole, provided that a copyright label is visibly located on each copy and the copy is used in conjunction with the product described within this document.

All information found in these documents has been compiled with utmost attention to detail. However, this does not guarantee complete accuracy. Neither Voyado Lund AB nor the authors shall be held liable for possible errors or the consequences thereof.

Software and hardware descriptions cited in these documents might be registered trademarks. All trade names are subject to copyright restrictions and may be registered trademarks. Voyado Lund AB essentially adheres to the manufacturer’s spelling. Names of products and trademarks appearing in this document, with or without specific notation, are likewise subject to trademark and trade protection laws and may thus fall under copyright restrictions.

CLOSE