Skip to main content

Example: modifying one of the accelerators

On this page we'll walk you through making a simple change to the text accelerator and introduce the content type schemas, content types and handlebars templates that are included on your account. For more details about creating your own content types see the Schema Editor page.

Step 1: Open the text content type schema in the schema editor
Link copied!

To view the content type schemas that are already installed on your account, choose "Content type schemas" from the development menu in the Dynamic Content app. The accelerators content type schemas are displayed in the window, as shown in the image below.

To view or edit a schema open it in the schema editor by double clicking it in the list or choosing "Open" from its contextual menu. In this example we'll open the text schema.

The content type schemas available on your hub

Step 2: Add a property
Link copied!

You can add properties in the schema editor by choosing the property type from the "Add Property" menu. In this example we will add a string property to the text accelerator by choosing the "Text" type. Markdown format text can be added by choosing "Rich Text".

Editing the text accelerator content type schema

The new property will contain a summary of the main text item, so we'll set the property name to "summary" with a maximum length of 255 characters. A preview containing the new property is shown in the right hand side of the schema editor window.

Click the "Save" button to save changes to the schema.

Adding a new property to the text accelerator content type schema

Step 3: Syncing the text content type with its schema
Link copied!

When you make a change to a schema, you need to make a change to the content type that was registered from it. To view the list of content types registered on your hub, choose "Content types" from the Development menu.

Sync a content type with its schema by choosing sync with schema from its menu in the content type list

Find the content type to update and choose "Sync with schema" from its contextual menu. In this example the Text accelerator needs to be synced with its schema. When you choose "Sync with schema" a warning dialog is displayed to inform you that any changes you make will apply to existing content when viewed in the content editing window in production. See the syncing a content type with its schema for more details.

Adding a property to a content type schema does not effect existing content, so click "OK" to proceed.

A warning dialog is displayed informing you that updating the schema can effect content created using this content type

Step 4: Editing the handlebars template
Link copied!

The Dynamic Content SFCC Integration uses the Content Rendering Service to convert the content in slots from JSON format to HTML that is stored in slot configurations in SFCC.

A handlebars template for each of the accelerators content types is stored in your Content Hub account. You will need to edit the handlebars template for the text accelerator to include the property that was added in a previous step.

The integration uses a top level handlebars templated called "sfcc-contentWrapper".

The top level handlebars template used by the integration

sfcc-contentWrapper calls a template called "templateChooser" if the content it is sent is within a slot created from the accelerators slot type.

{{#if (test this.[@type] (toRegex ".*/sfcc-slot-accelerators.json")) ~}}
{{> templateChooser this.content }}

The templateChooser template will then call the handlebars partial that matches the content type. It uses the content type URL to choose the partial and for the text content type will use the "acc-template-text" template.

{{#if (test this.[@type] (toRegex ".*/text")) ~}}
{{> acc-template-text }}

{{#if (test this.[@type] (toRegex ".*/video")) ~}}
{{> acc-template-video }}

To edit the template for the text accelerator content type, go to your Content Hub account and find the "acc-template-text" file. Open it in the Text Editor application by right clicking its contextual menu (the cog icon) and choosing "Edit with -> Text Editor".

Add the handlebars to include the summary property. The handlebars template should now look something like:

<div class="amp-dc-text">
{{{markdown this.text}}}
<div class="amp-dc-summary">{{summary}}</div>

Save the file and publish it by clicking the up arrow on its card or choosing "Publish" from its menu.

Editing the text accelerator handlebars template in Content Hub

Step 5: Create some content
Link copied!

Create some content using the text accelerator content type. Notice that the summary property is included in the content form.

When you save the content and view its visualization, by clicking the eye icon in top right of the window, a preview of the text item is shown, including the new summary property. The handlebars templates are also used by the visualization, so your change to the handlebars template was all that was needed to update the visualization.

Add this content to a slot in an edition and schedule it, following the steps explained in the getting started guide.

Creating some content from the updated text accelerator content type including the new summary property

Step 6: View content in SFCC Storefront
Link copied!

Preview an edition containing content created from the text accelerator. The content is shown in SFCC Storefront, including the text entered for the summary property.

Viewing the content in SFCC Storefront

The schema editor

Syncing a content type with its schema