Search

Searching DEVELOPERS

Export Page

Content Authoring- Accelerators

The Content Authoring accelerators are a set of resources that can speed up your Content Authoring implementation by up to 80 percent. The accelerators are a collection of the most useful and commonly used content types, including sliders, banners, blogs and video, together with all the code you need to render content created using these types. The code has been designed to make it easy to incorporate into your own projects and customise to meet your needs. As part of the package we've also included the HTML, JavaScript, CSS and handlebars templates required to render content created using these types, both as visualizations in the Content Library, on your own website or within an app. We've also included the icons and cards for each content type. 

All the resources for each of the content types, including code and installation instructions are in GitHub and that's where you should go for the latest versions. This repository includes the content types, ready for you to add to your account, together with all the rendering code. 

On this page we'll go into detail about the content types provided in the repository, explain how to use them in your account and how to customise the code to meet your requirements.

The content types are discussed in the order in which you are likely to use them. So, images, text and video can be contained within banners and sliders, while the homepage is a container for all the other content types.

For more information about using the Accelerators with Salesforce Commerce Cloud see Cartridges for SFCC: Setup Accelerators.

Video: Introducing the Accelerators

 

The Content Types

The accelerators include a wide range of content types. In this section we'll list the types provided, together with an example of the visualisation for each type and its properties.

Image

The image type allows you to add a simple image as content as well as an optional roundel- text used to highlight a promotion, for example.

If you want the image to include a roundel, make sure that a transformation template named 'roundel' is included in your account, as explained in the read me file. A 1x1px image named "empty.png" also needs to be added to your Content Hub for the roundel to be displayed.

An image with a roundel is shown below.

The options provided by the Image content type are explained in more detail below.

 Click here to find out more about the Image content type...

The image content type contains an image, together with some alt text that is shown if the image is not available.

A separate roundel image can be layered on top of the main image. When specifying a roundel you have control over the following properties:

  • The roundel image
  • "Roundel ratio"- this property defines the size of the roundel
  • "Roundel Position"- determines on which corner of the image the roundel should appear. Choose from top left, top right, bottom left, bottom right
  • SEO Text” – will be added to the image URL and should contain no spaces

 

Video

The video is stored in Content Hub and served at different transcode profiles in a simple video player.

 

Text

The text content type allows content to be added in markdown format. It makes use of the showdown library to render the text.

Banner

The banner type displays an image and includes properties for header and subheader and also allows you to specify the various layout options. 

More information about the banner type is shown below.

 Click here for more details on the banner content type...

Some of the properties for the Banner content type as shown in the diagram. The other properties include:

  • Image- the background banner image
  • Value – a URL or ID for the button call to action
  • Alignment- choose whether to align the box on the left or right.
  • Banner Colour- a hex value specifying the colour of the box
  • Banner Opacity- a value between 0 and 1 for the opacity of the box
  • Stack Mobile Layout- the text stacks underneath image for small screens. The image shown uses the mobile layout

 


Slider

The slider is an implementation of the popular carousel slider content type. You can add video, banners and images and specify whether to loop the slider and display the navigation dots. The slider can contain several other content types, so you'll need to add these to your content type library before adding the slider type. For more details, code and other resources see the GitHub page for the slider type.

The slider is made up of individual slides. The properties of this content type are as follows:

  • “Slides” – made up of banner / image or video content types
  • “Loop Slider” – slides constantly loop through if ticked or will end at the last slide, if not ticked
  • “Navigation Dots” – visible if ticked or not visible if not ticked. 

The slider can contain up to 8 slides.

Split Block

Split Block is designed to show a combination of images, video or text content, with a configurable ratio defining how the content is displayed. 

More information about the split block is shown below.

 Click here for more information about the Split Block content type...
The following properties are defined in the content type.
  • ”Content” – you can select an image, video or text content type in either position
  • “Split Ratio” – this determines the size ratio between the two assets. Options are 50/50…70/30 or 30/70
Content Item in 1st position stacks on top of content item in 2nd position on a mobile device:

 

Card

The card type is useful for creating product index screens with images, text and links. Cards are typically shown in a card list screen as shown here

More information about the properties of the card type is shown below.

 Click here for more information about the card content type...

The following are properties of the card:
  • "image"- the card image
  • "card name"- this is the text shown under the image in this example
  • "description"- shown under the card name
  • "link"- the URL for the call to action. This must be an absolute URL
  • "link value"- the text shown for the call to action


Card List

As its name suggests, the card list content type is used to display a list of cards. You can find the source code and other resources for this content type here.

You can find out more about the card list type in the section below.

 Click here to find out more about the Card List content type...

 

  • A “Card List” is made up of multiple “card” content types
  • The maximum number of cards is 6
  • You can have a maximum of 5 cards across the width of the page. 
  • The Card List "Heading" is shown in the image and is specified in the content type
  • When "hero" format is selected, the first card is emphasised (when shown on the Desktop)
  • This feature is only supported when using three cards

 

Like all the accelerator content types, the card list is responsive and will adjust to mobile and tablet devices.

Mobile

Tablet

 

 

 

Blog

Blogs can contain multiple content of type text, images and video, together with a snippet that defines the preview to be shown in a listings page. You will need to add other content types such as images and text, to your content type library before adding the blog type. 

The following are properties of the Blog content type:

  • Snippet – the blog comes with a snippet render that can be used for showing a preview of blog content. There is no visualisation for the blog snippet included in your account
  • Image- the image to be used in the blog snippet
  • Title- the title to be used for the snippet
  • Snippet Description- the short description to display in the snippet
  • Call to action- label and version. To display with the snippet.

Blog content:

  • Title- the blog title
  • Keywords- a configurable list of drop-down list of keywords that can be used for tagging content. This list is specified in the content type, so you would add the keywords you want to use.
  • Content – the user can add up to 20 assets, either images, video or text that will displayed stacked on top of each other


External Block

The external block content type allows you to add content as HTML code. This is useful for embedding content such as maps, for example. The code and associated resources for this type can be found here.

 

Promo Banner

The promo banner type allows you to add content for clickable multiple banner sections as shown in the example below. You will need to add the section content type before adding promo banner to your content type library. 

The icon and text are all hyperlinked and will go to the link that you entered.

A maximum of four banner items can be added. The first two banner items will be shown on tablet and mobile.

Homepage

The home page content type allows you to quickly put together a home page consisting of many of the accelerator content types including video, text and banners. You will need to ensure that the other content types are added to your content type library before adding Homepage. More information about this content type is shown below.

The Homepage type allows the user to create a full page of content using the following content types. These content types can be included in any order.

  • Slider
  • Promo Banner
  • Video
  • Text
  • External Block
  • Split Block
  • Card List
  • Image

 

Configuring a content type

Before you can use the content types included in the accelerators, you need to do some one time set up:

  • Find the latest version of the content type and code in GitHub
  • Add the content type to your account. Instructions are included in the Read Me file for each content type. Just copy the contents of the .json file in each folder and paste this into a new content type window. If a content type contains other types then these types should be added first. 
  • Go to the Content Library and create some content using this content type
  • Find the content type ID
  • Add this content type ID to the rendertypes.js file
  • Modify the visualization to reference rendertypes.js
  • Update the content type to include the URL of your modified visualization
  • Repeat the process for all the content types you wish to use
  • Build an updated version of the 'dist' folder and upload the contents of this folder to your own server location- such as AWS
 Click here to for more details of configuring a content type...

If content type has not been configured, then an error will be displayed when you viewing a visualization of content created using this type.

The Content Type ID

When you add a content type to your account, a unique content type ID is generated for it. This is separate to the content ID that identifies an individual piece of content. The content type ID is used by the accelerators rendering code to select which handlebars template to use to render a piece of content. The mapping between content type IDs and each content type is specified in a renderTypes JavaScript object and you'll need to edit this object to include the content type IDs from your own account. 

An example of the renderTypes object is shown below. The content type IDs from your own account will be different to the ones shown here:

var renderTypes = {
"blog": "163be330-ccaa-4578-ac54-2bd90eb2b14c",
"image": "923e3e48-0fea-422c-b8e0-0484fac9488d",
"text": "d91e33c9-adb7-4ea5-810e-e7750fce79a4",
"banner": "97085115-7057-41fa-8b99-ef47935ef058",
"link": "7b908316-30d9-409e-8ff7-c23fa8526cfe",
"video": "90959bb1-5135-4aa0-bc70-44f594af8223",
"slider": "1eec3f35-e6e0-4fad-b77e-bf2688014856",
"snippet": "fd83d76a-fbf4-4c7a-8c2b-e15245c1ccb2",
"card": "c06334a3-f1aa-4f91-97e3-36471596c2ba",
"splitBlock": "fa868414-4eef-4318-8660-c2f05487535c",
"promoBanner": "ac89055d-ee58-4a34-95bc-3baa96a3f97b",
"externalBlock": "abbdbc0b-8de2-4e6e-bc43-5aed9cd2ff9e",
"cardList": "cb0fce82-ce50-4473-a3d2-85734f91607f",
"homepage": "0d61522d-598f-4453-bc5c-603fc02df672"
};

To edit the renderTypes object, clone the GitHub repository to your local disk and edit renderTypes.js in the following location:

ca-frontend-renders/src/reusable/js/renderTypes.js

Finding the content type ID

To identify a content type ID, go to the Content Library, find a piece of content created using the content type you want to use, choose Get Content ID/Link from the content's card menu and then click on 'View in JSFiddle'. 

You can find out more about using JSFiddle in the Content Authoring developer tutorial.

When the JSFiddle window opens, click 'Run' to retrieve the content, click the 'View JSON' button and select the Content Tree tab. The content type ID is listed under "@type" as highlighted in the image below: 

This id should then be added to the renderTypes.js file as shown above.


Editing the visualization

Once you have set up the renderTypes.js file to include the content type IDs from you own account, you will need to update each of the visualizations to point to the location of your modified renderTypes.js file. 

In each content types folder there is a visualisation.html file. Search for the 'src' reference to rendertypes.js and change the URL to point to your updated version.

For example:

<script src="https://s3-eu-west-1.amazonaws.com/amp-product/accelerators/reusable/renderTypes.js"></script>

Note that rendertypes.js is not included in every visualization, so you won't need to update all of them. However we do recommend using your own copy of each visualization.

Editing the content type

For each content type you will need to update the visualization uri to point to your copy:

For example:

"card": [
{
"id": "defaultCard",
"category": "card",
"default": true,
"label": "Default card",
"uri": "//apps.dev-artifacts.adis.ws/cms-cards/master/latest/gallery/index.html",
"mapping": {
"headline": "/_title",
"image0": "/image/image"
}
},
{
"id": "defaultviz",
"category": "visualization",
"default": true,
"label": "Default Visualization",
"uri": "https://dev-solutions.s3.amazonaws.com/ca-frontend-renders/dist/renders/card/package/visualisation.html"
}
]
},

Once all the files are updated, upload them to your own chosen location. The visualisations for each content type should now display correctly.

Other resources

Each content type folder in the repository includes

  • a handlebars template
  • .sass files for desktop and mobile (these compile into .css files)
  • a visualisation.html file
  • an index.html file.

This is a sample home page for the content and contains some generic code that you will need to customise with your own data:

AmpCa.utils.getCaData({
auth: {
baseUrl: 'https://c1.adis.ws',
id: '476e3ddb-61b5-4c49-a5f4-db3e37f21f05',
store: 'csdemo'
},

Replace the id with a content ID of a piece of your chosen content and the store with the name of your account. Once updated, this home page can be used to test out your content and as a basis for your own code to display content on your website.

Related pages

Content Authoring accelerators GitHub page

Content Authoring Developer Tutorial, Part 1

Creating a content type

Visualizations tutorial

Cartridges for SFCC: Setup Accelerators

 

  • No labels