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.
- 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:
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:
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
c1.adis.wsto serve content to your live environment and the appropriate media domains such as
i1.adis.wsto serve published media.
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.
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.
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.
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.
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.
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.