Dynamic pages¶

The JavaScript library also support dynamic pages. The following code snippet shows how a dynamic page named books-and-movies containing two sub-panels and based on the predefined public panel /top-sellers is instantiated and used.

esalesObj.dynamicPage("books-and-movies", "1740c017b6d980df4f9348727384d088c7e1ad3fe7e022c81a1fc8a16333bcaf")
    .subpanel("top-selling-books", "8fe60e383b26844e496cdac0c1ad526060116090e95797e7bbac4f45ed1cf409", "/top-sellers", { "filter": "category:'book'" })
    .subpanel("top-selling-movies", "31a93b91446c88f442a1ee25dd0a44293f874d767f154599612aa57c052debdf", "/top-sellers", { "filter": "category:'movie'" })
    .fetch({ "window_first": "1", "window_last": "3" })    // "arg." is automatically prepended to dynamic page arguments when JavaScript is used.
    .error(function(msg) {
        console.log("ERROR: " + msg);
    })
    .success(function(data) {
        renderOnPage(data);
    });

The response to this dynamic page request could look like this:

JSON

{
   "topSellingBooks":[{
        "name": "top-selling-books",
        "ticket": "Oy9keW5hbWljLXBhZ2VzL2Jvb2tzLWFuZC1tb3ZpZXMvdG9wLXNlbGxpbmctYm9va3M7IzsjOyM7IzsjOyM7Izs",
        "path": "/dynamic-pages/books-and-movies/top-selling-books",
        "displayName": "Top Sellers",
        "description": "Lists the most sold products right now.",
        "attributes": {

        },
        "resultType": "products",
        "products": [{
            "key": "P1",
            "ticket": "Oy9keW5hbWljLXBhZ2VzL2Jvb2tzLWFuZC1tb3ZpZXMvdG9wLXNlbGxpbmctYm9va3M7Iztwcm9kdWN0X2tleTtQMTAxMzc1MjY7IztPQkpFQ1RJVkUkO05PTkU6Tk9ORTs3Nzs",
            "variants": [],
            "attributes": {
                "product_key": "P1",
                "rank": "1",
                "relevance": "1.0",
                "title": "The Getaway - Diary of a Wimpy Kid ",
                authors: "Jeff Kinney"
            }
        },
        {
            "key": "P2",
            "ticket": "Oy9keW5hbWljLXBhZ2VzL2Jvb2tzLWFuZC1tb3ZpZXMvdG9wLXNlbGxpbmctYm9va3M7Iztwcm9kdWN0X2tleTtQMTA2OTE3MzM7IztPQkpFQ1RJVkUkO05PTkU6Tk9ORTs3Nzs",
            "variants": [],
            "attributes": {
                "product_key": "P2",
                "rank": "2",
                "relevance": "0.5",
                "title": "Wonder",
                authors: "R. J. Palacio"
            }
        },
        {
            "key": "P3",
            "ticket": "Oy9keW5hbWljLXBhZ2VzL2Jvb2tzLWFuZC1tb3ZpZXMvdG9wLXNlbGxpbmctYm9va3M7Iztwcm9kdWN0X2tleTtQMTA4MTM1Nzc7IztPQkpFQ1RJVkUkO05PTkU6Tk9ORTs3Nzs",
            "variants": [],
            "attributes": {
                "product_key": "P3",
                "rank": "3",
                "relevance": "0.3333333333333333",
                "title": "Origin",
                authors: "Dan Brown"
            }
        }]
    }],
    "topSellingMovies": [{
        "name": "top-selling-movies",
        "ticket": "Oy9keW5hbWljLXBhZ2VzL2Jvb2tzLWFuZC1tb3ZpZXMvdG9wLXNlbGxpbmctbW92aWVzOyM7IzsjOyM7IzsjOyM7",
        "path": "/dynamic-pages/books-and-movies/top-selling-movies",
        "displayName": "Top Sellers",
        "description": "Lists the most sold products right now.",
        "attributes": {

        },
        "resultType": "products",
        "products": [{
            "key": "P4",
            "ticket": "Oy9keW5hbWljLXBhZ2VzL2Jvb2tzLWFuZC1tb3ZpZXMvdG9wLXNlbGxpbmctbW92aWVzOyM7cHJvZHVjdF9rZXk7UDEwMTM3ODI5OyM7T0JKRUNUSVZFJDtOT05FOk5PTkU7Nzc7",
            "variants": [],
            "attributes": {
                "product_key": "P4",
                "rank": "1",
                "relevance": "1.0",
                "title": "Justice Leage"
            }
        },
        {
            "key": "P5",
            "ticket": "Oy9keW5hbWljLXBhZ2VzL2Jvb2tzLWFuZC1tb3ZpZXMvdG9wLXNlbGxpbmctbW92aWVzOyM7cHJvZHVjdF9rZXk7UDEwMTM4MTIxOyM7T0JKRUNUSVZFJDtOT05FOk5PTkU7Nzc7",
            "variants": [],
            "attributes": {
                "product_key": "P5",
                "rank": "2",
                "relevance": "0.5",
                "title": "Thor: Ragnarok"
            }
        },
        {
            "key": "P6",
            "ticket": "Oy9keW5hbWljLXBhZ2VzL2Jvb2tzLWFuZC1tb3ZpZXMvdG9wLXNlbGxpbmctbW92aWVzOyM7cHJvZHVjdF9rZXk7UDEwMTM4MTI0OyM7T0JKRUNUSVZFJDtOT05FOk5PTkU7Nzc7",
            "variants": [],
            "attributes": {
                "product_key": "P6",
                "rank": "3",
                "relevance": "0.3333333333333333",
                "title": "Morder on Orinet Express"
            }
        }]
    }]
}

A name for the whole page, and names for each sub-panel must be set. Together with the name, for each panel a special token must be provided. These tokens are called dynamic page tokens.

Dynamic page tokens¶

Voyado Elevate collects statistics about panel usage based on panel names. These kind of statistics are also collected for dynamic pages and their sub-panels. Dynamic page tokens are designed to prevent misuse of dynamic pages by a malicious user.

Risk of errors in panel statistics

Statistics are based on panel names. Generating new names for dynamic pages and sub-panels as they are reused will result in inaccurate panel statistics. If there is a need to rename dynamic pages, please consider using local attributes instead.

All panel names must be validated by providing a valid token for each one. To create the token, the class MessageAuthentication first be implemented. Tokens are then generated with a private key (provided by Voyado to the customer) as seen in the example below.

//Example in C#.
var auth = new MessageAuthentication("{private-key}");
var dynamicPageToken = auth.Sign("{dynamic-page-name}");
var subpanelToken = auth.Sign("{subpanel-name}");