Search

Searching DEVELOPERS

Export Page

This document provides information about integrating Content Authoring with your preferred ecommerce tool as well as mobile applications. We will introduce the general principles that apply to any integration, irrespective of the tool used, and outline some possible techniques for both front end and back end integrations).

See the Ecommerce Integrations pages for more information about the standard ecommerce integrations.

Overview

The image below shows a generic integration with an ecommerce system and the Amplience CMS. The details of integrating with each ecommerce system will vary, but the diagram provides an overview of the steps involved. When the user requests a page on your web site:

  • The page will be processed by the ecommerce system. Each page will generally have a page definition within the commerce system, containing standard information such as the header and footer, as well as one or more slots. 
  • The ecommerce system will process this page definition and get the information to render each part.
  • Each slot will contain enough information to create the HTML to show on the page. This generally include the content ID and the templates (such as handlebars templates) used to render the content into HTML.
  • The page will then be built up using the header, footer, and the rendered content from each of the slots.
  • The HTML will be served back to the user and combined with CSS to display the page.

Integration in more detail

Generally content will be imported and stored in the ecommerce system first and then served to the user's browser when a page containing the content is requested. The diagram below shows an example of this process in more detail.

  • The business user will choose the content to import
  • For each piece of content, the ecommerce platform will send a GET request to the Amplience CMS to retrieve the content
  • The Amplience CMS will return the content in JSON-LD format
  • The ecommerce platform converts the JSON-LD into a JSON content tree
  • The content is then combined with a handlebars template to generate the HTML which is then stored in the ecommerce platform

This HTML will then be associated with one or more content slots in the ecommerce platform
Most ecommerce systems will have the concept of a content slot that maps to an area within a website- either the an entire page or a section of a page. The ecommerce system will have some form of templating engine that allows users to choose which slot a piece of content will be assigned to and define the page header and footer, together with additional JavaScript and styling information used to display the page. 

  • When the user requests this page from their browser, it will be retrieved from the content slot and served to the user's browser as an HTML page together with CSS.

You may have several templates that can be used to render the same types of content. This would allow you to create templates for a holiday promotional campaign, adding a countdown without having to modify the content itself, for example. The business user could then choose which template to use to render particular pieces of content.

 

Retrieving content from the CMS

Retrieving content from the Amplience CMS follows the same basic steps. 

  • Content is stored and retrieved in JSON format. We don’t store any templates or styling information.
  • Every piece of content is identified by its own unique content ID (for example:  fbba4433-00bd-4a2b-a1bb-2d7dcc8abb12). 
  • To retrieve a piece of content you send an AJAX get request (or a Get request if you are calling the API from back-end code) to our delivery API, including the content ID as part of the URL.
  • The response will contain the JSON for this content- in JSON linked data (JSON-LD) format. This needs to be converted into a tree structure so it’s easier to combine with your own templates- such as handlebars. We provide a JavaScript utility function called inlineContent that takes the JSON linked data format and flattens it into a tree structure.
  • This JSON content is then combined with your template to create the HTML and then added to the ecommerce system as explained in integration in more detail

How you handle the retrieving of content depends on your integration approach- whether you are using front-end or back-end code. Some different integration approaches are explained in the integrations approaches section.

You can find more details of consuming content from the Content Authoring Developer Tutorial, Part 1: Quick Start.

Video

The following video shows the process of retrieving and consuming content in detail. As demonstrated in the video, the Content Authoring app includes a JSFiddle template that includes code that will send a request to retrieve the content, convert the returned JSON-LD into a content tree and combine this with a handlebars template to render the content as HTML. 

 

Integration approaches

The HTML for the page is generated by combining the information returned by the Amplience CMS with your own set of templates (including CSS and templating files such as handlebars). The way that you serve this HTML is up to you, but the the approach you take will either be a 'front end' integration or a back-end integration. 

Front-end integrations

With a front end integration, the code to generate the HTML will be written using JavaScript, HTML and using a templating technology such as handlebars. 

There are two ways of doing a front end integration: copying the code generated from a visualization and creating your own front end code.

The 'copy' button approach

The simplest integration, and one that should only be used as a quick proof of concept, is to include a ‘Copy’ button on your visualisations that will copy the static HTML for a piece of content. The HTML is copied to the clipboard and could then be added to a slot in your ecommerce system. 

An example visualization for the tutorial banner example that includes a 'Copy' button is shown below.

 Click here for an example visualization with a copy button...

The modified version of the tutorial banner type that uses this visualisation is shown below.

 Click here to expand the content type...

The image below shows a modified version of the Tutorial banner example which includes the Copy HTML button. 

When the button is pressed the generated HTML is copied to the clipboard.

Here's an example of the generated HTML that will be copied from the visualization.

 Click here for an example of HTML copied...


Writing front-end code

Another approach is to write the code to retrieve and consume the content in a front-end integration, using JavaScript similar to that included in the JSFiddle template in the Content Authoring app (as shown in the video above), taken from the Content Authoring accelerators or the Developer Tutorials- Part 1: Quick StartYou might use this approach in a mobile application, to consume content within a webview or native code. One of the disadvantages of this approach is that SEO information will not be included in the HTML.

Back-end integration

The most common type of integration is a back-end integration, where the approach outlined in the integration in more detail section is performed with server based code. To write a back-end integration you would need to write your own version of the the inline content method to convert the JSON-LD content into a content tree. However, while this method does involve the most development effort upfront, it does take advantage of SEO features and you can increase performance by caching and intelligently serving pages.

Related Pages

Content Authoring Developer Tutorial, Part 1: Quick Start

Content Authoring- Accelerators

Ecommerce Integrations

 

 

 

 

 

  • No labels