Consuming content
On this page we'll provide a step by step example of consuming content: retrieving JSON content from the CMS and converting this to HTML to render on a page. We will use the content set up in the Banner slot example which demonstrated how to create a slot item, add it to an edition, add some content and then schedule the edition to be published.
The steps
- Retrieve the slot content in JSON format
- Convert the returned JSON-LD to a content tree
- Combine this with a handlebars template to generate HTML
- Add some CSS styling and render this content on the page
This example demonstrates how to retrieve published content. The platform provides several ways of retrieving and previewing content before it has been published:
- Visualizations and card previews
- Content preview apps
In each case the Delivery API is used to retrieve content and the steps to consume the content will be the same as shown in this example. The main difference is that a virtual staging environment (VSE) is used to serve unpublished content, while published content is served from the production domain: cdn.c1.amplience.net
Don't use a VSE to serve production content
Note that VSEs should not be used to serve published, production content. If we notice excessive traffic from your VSE it will automatically be rate limited and may be disabled by our operations team. Therefore please ensure that all your production code uses the production domain of cdn.c1.amplience.netto serve content to your live environment and the appropriate media domains such as cdn.media.amplience.netto serve published media.
Example
In the banner slot example, the edition we created published content to a slot on the home page. This slot has the id 1f0fe60d-7b4b-4a39-a757-a1b221944443 and it contains a banner content item as shown in the image below:
Retrieving the slot content
To retrieve the contents of a slot, send a GET request to the content delivery API, with the slot id as one of the parameters. The IDs of the slots on your webpages or apps, it's the contents of the slots that are dynamic.
The code to retrieve the content from this slot is shown below. In this example the slot contains a single content item of one content type, but depending on how you choose to model you slots, they might be a lot more complex. For example, the slot might contain an array of content or multiple properties referencing different content types.
const slotID = '1f0fe60d-7b4b-4a39-a757-a1b221944443';
const encodedQuery = encodeURIComponent(JSON.stringify({'sys.iri':`http://content.cms.amplience.com/${slotID}`}));
const contentDeliveryUrl = `https://cdn.c1.amplience.net/cms/content/query?fullBodyObject=true&query=${encodedQuery}&scope=tree&store=ampproduct`;
const deliveryRequest = $.ajax({ url: contentDeliveryUrl});
// render the content or display error response
deliveryRequest
.done(renderContent)
.fail(showErrorMessage);
Converting the JSON-LD into a content tree
The slot is returned in JSON-LD format and to make it easier to work with, it needs to be converted into a content tree using the inlineContent method from the CMS SDK. The code to do this is shown below.
function renderContent(data) {
// use the Amplience CMS JavaScript SDK to manipulate the JSON-LD into a content tree
const contentTree = amp.inlineContent(data)[0];
// fetch the Handlebars template from the DOM
const templateSource = $('#tutorial-template').html();
const template = Handlebars.compile(templateSource);
// render the content using the template
const html = template(contentTree);
$("#contentRender").html(html);
}
Here's an example of the slot content converted into a content tree. You will notice that the bannerslot property contains within it the banner content item.
{
"@id":"http://content.cms.amplience.com/1f0fe60d-7b4b-4a39-a757-a1b221944443",
"_meta":{
"schema":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/bannerslot.json",
"name":"home-page-banner-slot"
},
"bannerslot":{
"@id":"http://content.cms.amplience.com/38a0e0a1-efad-4e04-be1e-10a042f02354",
"@type":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/tutorialbanner.json",
"_meta":{
"schema":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/tutorialbanner.json",
"name":"spring-sale-banner"
},
"calltoactiontext":"Find out more",
"background":{
"@id":"http://image.cms.amplience.com/500118e2-a788-4b89-89bd-b4c8b0373091",
"_meta":{
"schema":"http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
},
"id":"500118e2-a788-4b89-89bd-b4c8b0373091",
"name":"orange_dress",
"endpoint":"ampproduct",
"defaultHost":"cdn.media.amplience.net",
"mediaType":"image"
},
"calltoactionurl":"https://www.anyafinnstore.com/springsale",
"strapline":"Bank holiday sale coming soon",
"headline":"Get ready to update your wardrobe!"
},
"@type":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/bannerslot.json"
}
Rendering the content
To render the content, we first need to convert the JSON into HTML and to do this we use a handlebars template. You may choose to use whichever templating technology you prefer. Here is the code that loads the template, compiles it and then applies it to the JSON content to generate the HTML. The HTML is then added to an element on the page.
const templateSource = $('#tutorial-template').html();
const template = Handlebars.compile(templateSource);
const html = template(contentTree);
$('#content-render').html(html);
The handlebars "tutorial-template" handlebars template is shown below. Notice the 'with' helper is used to refer to 'bannerslot' property in the slot to make it easier to refer to the fields of the banner content type it contains.
<div id="contentRender"></div>
<!-- Handlebars Template to render content -->
<script id="tutorial-template" type="text/x-handlebars-template"></script>
The content is now rendered on the page using our CSS styling. In our example we're rendering the banner at full size.
Download the complete example as an HTML file.