Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from this space and version 7.4

...

If the template content uses Mustache tags, enter a content options schema for the template. The content options schema is a JSON schema. For more information about creating the schema, see Content options schema.

SettingDescriptionRole
NameEnter a name for the template.Required
DescriptionEnter a description for the template. You can use the description to, for example, explain what sort of content the template renders, and when and how to use the template.Optional
Export content

Select when to export the template content to the custom script of the site. Exporting the content means adding it directly to the custom script.

Modifications that have content preloading enabled require the template content to be available in the custom script. Modifications that do not use content preloading get their content from the Frosmo back end, not from the custom script, so this setting does not affect them.

By default, this is set to Automatic, which means the platform automatically determines whether the template content needs to be added to the custom script. The main reason to exclude the content from the custom script is if the template is currently not actively used in modifications that have content preloading enabled: either the template is not used in any modification variation, or the template is only used in variations that are inactive or whose modifications are inactive.

Warning

Do not change this setting unless you're sure you know what you're doing.

You can select from the following options:

  • Automatic: The platform determines whether the template content needs to be added to the custom script. If the template is used in an active variation of an active modification, and if the modification has content preloading enabled, the platform adds the template content to the custom script. Otherwise, the platform does not add the content. This is the recommended option, as it makes the content available only when needed and keeps the custom script size to a minimum.
  • Always: The platform always adds the template content to the custom script, even if the template is not actively used in modifications that have content preloading enabled. This can bloat the custom script and decrease performance.
  • Never: The platform never adds the template content to the custom script, even if the template is actively used in modifications that have content preloading enabled. This option is mainly reserved for templates used in legacy recommendation modifications. If you want the template to work with regular modifications, do not select this option.

The default option is Automatic.

Required
Content

Enter the template content. You can enter any combination of HTML, CSS, and JavaScript as the content. .

Tip

When you create a new template, this field contains example code to get you started. You can remove the code if you don't need it.

You can also use use Mustache tags in  anywhere in the content to create placeholders create placeholder elements for values. The tags get replaced with specific values in the rendered modification based on the content options you define for in the template and set in map to the modification.

Tip

When you create a new template, this field contains example code to get you started. You can remove the code if you don't need it.

The following example content creates a button whose label is a Mustache variable. The variable must be defined as a content option for the template, so that the label can be set to a specific value in a modification variation.

Code Block
languagexml
themeRDark
<button class="btn btn-subscribe">{{buttonLabel}}</button>
RequiredContent options schema
Tip

When you create a new template, this field contains example code to get you started. You can remove the code if you don't need it.

The following example schema describes a single content option: a string value for the buttonLabel Mustache tag used in the template content.

Code Block
languagejs
themeRDark
{
    "type": "object",
    "title": "",
    "properties": {
        "buttonLabel": {
            "type": "string",
            "title": "Label"
        }
    },
    "required": [
        "buttonLabel"
    ]
}

The following figures show the content options UI rendered from the preceding schema, with an example value, and the final modification as rendered on the page, respectively.

Content options UI for button labelImage Removed

Button rendered on pageImage Removed

Note

If you do not enter a content options schema for the template, the content options UI of a variation that uses the template is a single text field, which expects a JSON object that defines the replacement values for the Mustache tags. The following figure shows the content options UI and the JSON object for the preceding example when the template does not include a schema. In this case, whomever creates the modification must also provide the JSON object.

Content options UI for button label as JSON objectImage Removed

OptionalContent options UI schema

If you want to further customize the content options UI, define a UI schema for it. The UI schema is a JSON object that describes how specifically to render the form input components that make up the content options UI. The UI schema is specific to the react-jsonschema-form React component, which the Control Panel uses to build the content options UI.

Tip

When you create a new template, this field contains example code to get you started. You can remove the code if you don't need it.

For more information about the react-jsonschema-form component, see:

The following example UI schema customizes the buttonLabel text input component with a placeholder text that is displayed in an empty input field.

Code Block
languagejs
themeRDark
{
    "buttonLabel": {
        "ui:placeholder": "Enter the button label"
    }
}

Customized content options UI for button labelImage Removed

OptionalContent options UI preview

You can view a live, interactive preview of the content options UI as rendered based on the Content options schema and Content options UI schema.

Content options UI previewImage Removed

You can also preview the JSON object that gets generated from the values set in the content options UI. The Control Panel saves this object to the modification variation, and Frosmo Core uses the object to replace the Mustache tags in the template content with the actual values to render on the page.

JSON object previewImage Removed

Defining the template settingsImage Removed

Figure: Defining the template settings (click to enlarge)

Content options schema

...

tags. You can allow Frosmo Control Panel users to set the content option values from a modification variation, or you can set the values directly in the Content prerenderer field. You can also mix these two approaches.

If you want to separate the structure, presentation, and static parts of the content (HTML, CSS, JavaScript) from the logic that defines the values for the Mustache tags (JavaScript), use the Content field for the former and the Content prerenderer field for the latter.

Tip

For an example template that uses the Content field for all its content code, see Example: Creating a hero banner from a template.

The following example content creates a button whose label is a Mustache variable with the key buttonLabel. To render the variable with a specific value, the template must either define a content options schema that describes the buttonLabel content option, which is then set in a modification variation, or define and set the buttonLabel content option in the Content prerenderer field.

Code Block
languagexml
themeRDark
<button class="btn btn-subscribe">{{buttonLabel}}</button>


Required
Content prerenderer

Enter the JavaScript code for defining the values for the Mustache tags in the template content and for rendering the content with those values.

Use this field for implementing the logic that needs to be executed before the content can be displayed on the page. While you can put all your JavaScript in the Content field, separating your prerendering logic from your presentation logic (content) makes it easier to manage each.

Tip

If all the Mustache tag values can be defined directly in a modification variation, meaning you do not need to separately retrieve or otherwise build the values, leave this field empty, and instead define a content options schema for the template.

You can use the following object variables in the code:

  • easy: Access Frosmo Platform features and data, such as the site configuration (easy.config) and visitor context data (easy.context). This is the same object you get when you use frosmo.easy in the browser console.

    For more information about debugging modifications and other platform features in the console, see Console debugging with Frosmo Core.

  • site: Access site functions and data defined in the site's custom code. This is the same object you get when you use frosmo.site in the browser console.

    Note

    site is only available on sites that include custom code in their custom script.


  • templateInstance: Access the data and functionality for the current template instance:
    • name: String containing the name of this template.
    • options: Object containing the content options set in the modification variation.
    • render: Function for rendering the template content defined in the Content field. The function takes an optional object parameter containing the values for the Mustache tags. If the template content does not use any Mustache tags, omit the parameter when calling the function.

To render the template content for the modification, call templateInstance.render().

Warning

If you use the Content prerenderer field, but do not call templateInstance.render() in it, the template content is not rendered on the page.

The following example code takes the buttonLabel content option value set in a modification variation, appends the value with an exclamation mark, and renders the template content with the modified value.

Code Block
languagejs
themeRDark
var newButtonLabel = templateInstance.options.buttonLabel + '!';
var newOptions = { buttonLabel: newButtonLabel };

templateInstance.render(newOptions);

The following figures show the final modification as rendered on the page.

Button rendered on pageImage Added

Optional
Content options schema

If the template content uses Mustache tags whose values must be set in the modification variation, or if defining the values requires some other input from the variation, enter a content options schema for the template. The Frosmo Control Panel uses the schema to generate and display a content options UI in the variation settings. The UI allows users to set the Mustache tags to specific values for the variation.

For more information about creating the schema, see Content options schema.

Tip

When you create a new template, this field contains example code to get you started. You can remove the code if you don't need it.

The following example schema describes a single content option: buttonLabel, which takes a string value. In the content options UI of a modification variation, the schema translates into a single, mandatory string field with the title "Label". Entering a value in the field sets the buttonLabel content option to that value for the variation.

Code Block
languagejs
themeRDark
{
    "type": "object",
    "title": "",
    "properties": {
        "buttonLabel": {
            "type": "string",
            "title": "Label"
        }
    },
    "required": [
        "buttonLabel"
    ]
}

The following figures show the content options UI rendered from the preceding schema, with an example value, and the final modification as rendered on the page, respectively. (In this example, the template content uses a {{buttonLabel}} variable that gets its value as is from the modification variation.)

Content options UI for button labelImage Added

Button rendered on pageImage Added

Note

If you do not enter a content options schema for the template, the content options UI of a variation that uses the template is a single text field, which expects a JSON object that defines the values for the Mustache tags. The following figure shows the content options UI and the JSON object for the preceding example when the template does not include a schema. In this case, whomever creates the modification variation must also provide the JSON object.

Content options UI for button label as JSON objectImage Added


Optional
Content options UI schema

If you want to further customize the content options UI, define a UI schema for it. The UI schema is a JSON object that describes how specifically to render the form input components that make up the content options UI. The UI schema is specific to the react-jsonschema-form React component, which the Control Panel uses to build the content options UI.

Tip

When you create a new template, this field contains example code to get you started. You can remove the code if you don't need it.

For more information about the react-jsonschema-form component, see:

The following example UI schema customizes the buttonLabel text input component with a placeholder text that is displayed in an empty input field.

Code Block
languagejs
themeRDark
{
    "buttonLabel": {
        "ui:placeholder": "Enter the button label"
    }
}

Customized content options UI for button labelImage Added

Optional
Content options UI preview

You can view a live, interactive preview of the content options UI as rendered based on the Content options schema and Content options UI schema.

Content options UI previewImage Added

You can also preview the JSON object that gets generated from the values set in the content options UI. The Control Panel saves this object to the modification variation, and Frosmo Core uses the object to replace the Mustache tags in the template content with the actual values to render on the page.

JSON object previewImage Added


Defining the template settingsImage Added

Figure: Defining the template settings (click to enlarge)

Content options schema

Content options allow you to customize template content for individual modifications. While all modifications that use the same template share the same basic content, the template can provide options for customizing that content per modification. The content options are based on the Mustache tags in the template content, and either directly provide the values for those tags or otherwise provide input that is required to define the final values. You define the content options in the template, but you set the options separately in each modification variation that uses the template. The template content together with the content options as set in a variation define what finally gets rendered on the page.

Example 1: Template content uses a Mustache variable for a customizable button label. You define a content options schema that describes the label, so that users can enter the desired label text in the modification variation.

Example 2: Template content uses a Mustache section for rendering a list of trending products. The product data for the list is fetched in the content prerenderer. However, fetching the data requires as input the number of products to list. You define a content options schema for the number, so that users can select the desired number of products in the modification variation, which then gets passed as input to the prerenderer.

From template content through content options to rendered content

Figure: From template content through content options to rendered content (click to enlarge)

...

  • The data type of the value expected for each unique Mustache tag.
  • The details for rendering a form input component for each unique Mustache tag. The components together make up the content options UI for customizing the template content in a modification variation. The Control Panel uses the react-jsonschema-form React component to build the UI. You set the Mustache tags to specific values in the UI when creating a modification variation.

...