Contextual pages are a way to trigger XGen elements to render based off of JavaScript logic instead of basing it off of the URL. This will add a query parameter to the render request that can be used within an element’s page triggers to determine its rendering condition. The contextual pages set in this array will be applied when the page has been matched.
By default, when a page is matched, it’s name will be added to the contextual pages. If you have a page named “pdp,” when it is matched the query parameter xse_page=pdp will be added to the render request.
Syntax
contextualPages: {
key1: value1,
key2: () => value2,
key3: async () => await value3
}Usage
In the contextualPages object pass in the name of the variable as the key. Then you can either set the item to the value you want to return, or set the item to a function that returns the value you want.
Example
contextualPages: {
isOnSale: () => {
const fullPrice = document.querySelector('#price').textContent;
const salePrice = document.querySelector('#salePrice').textContent;
return parseFloat(salePrice) < parseFloat(fullPrice);
},
isSpecialItem: async () => {
const response = await fetch(location.pathname).then(r => r.json);
return response.item.tags.includes('special');
}
}In this example, the resulting query string will look something like this depending on the value of each function:
xse_page={page name}&gender=male&isOnSale=true&isSpecialItem=false