Templates allow you to define web content once and then reuse that content across multiple modifications on your site.
Figure: Same template used in multiple modifications (click to enlarge)
Figure: Template content with a Mustache variable (Frosmo Control Panel)
Figure: Mustache variable value defined in the modification variation as a content option (Frosmo Control Panel)
Figure: Rendered modifications that use the above template but with different values for the Mustache variable (site)
The example assumes that you're managing your localized websites as a single site in the Frosmo Platform, and that you create the necessary placements or segments for displaying the correct modification on the correct website.
The example omits details about how exactly you make it possible to define values for Mustache variables in the modification. You'll learn more about this later.
For more information, see:
Why use templates?
Defining modification content with templates has several advantages:
- You can use the same template and therefore the same content in multiple modifications. Templates, in other words, allow you to single-source your modification content.
- You can separate static content, such as common elements, from dynamic content, such as product data fetched separately per product page. You define the static content in the template and set the dynamic content in the modification.
How templates work
A modification gets its content from one of two sources:
- From a variation. The content is defined directly in a modification variation as custom content. The content is only available to that variation in that modification.
- From a template. The content is defined outside the modification in a template. A modification variation links to that template for its content. Depending on the template, the variation may define content options that refine how specifically the content gets rendered on the page. The template, and therefore the content, is also available to other modifications on the site.
When a modification needs to be rendered, Frosmo Core retrieves the appropriate content either from the Frosmo back end or directly from the site's custom script, depending on whether content preloading is enabled:
- If the modification has content preloading disabled, Frosmo Core retrieves the content from the back end.
- If the modification has content preloading enabled, Frosmo Core retrieves the content from the custom script.
By default, if a template is actively used in a modification that has content preloading enabled, the platform automatically includes the template content in the site's custom script. This is because, as a rule, the content must be in the custom script for the content to be available to a modification that uses content preloading.
Figure: Template content flow with content preloading disabled vs. enabled in a modification (click to enlarge)
Template content, content options, and content prerenderer
When you create a template, you work with three key fields that together specify how the template works:
Content options schema. This is a JSON schema that describes the customizable or configurable content in the template, if any. If you use Mustache tags in the content, and if the values for those tags must be set in a modification variation or otherwise rely on information from the variation, define the appropriate schema for the tags. If your template contains only static content or does not require any input from the variation, you do not need to define a content options schema.
If defined, the Frosmo Control Panel uses the schema to generate and display a content options UI in the settings of each modification variation that uses the template. The UI allows users to set the tags to specific values per variation. If you do not define a schema, the content options UI of a variation is a single text field, which expects a JSON object that defines the values for the tags.
The following figures show a simple content options schema and the content options UI generated from that schema.
For example, if the template content uses a Mustache section for displaying a list of dynamically recommended products, define a prerenderer that first fetches the product data and then calls the content to be rendered with that data.
The following figure shows a content prerenderer that fetches product recommendations based on two content options set in the variation (
apiParams). The prerenderer then uses a third content option (
title) and the fetched product data to build the final data with which the content is rendered.
The following figure shows the template content that gets rendered with the data from the above content prerenderer.
Content options in the modification flow
If a template uses Mustache tags in its content, and if the values for the tags must be set in a modification variation, content options come into play as follows:
- In the template, you define a content options schema that describes each unique Mustache tag as a content option.
- In the template, you optionally define a content options UI schema that customizes the content options UI generated from the content options schema.
- When a user selects the template for a modification variation, the Control Panel generates and displays the content options UI based on the content options schema and, if defined, the content options UI schema.
- When the user sets the options to specific values in the content options UI and saves the variation, the Control Panel:
- Generates a JSON object describing the value assignments. The object contains a key-value pair for each option, where the key is the Mustache tag key and the value is the one set for the option representing that Mustache tag.
- Saves the JSON object as part of the variation.
- When the variation is loaded on a page, Frosmo Core:
- Retrieves the template content from the Frosmo back end or, if the modification has content preloading enabled, from the custom script.
- Retrieves the JSON object with the content options from the Frosmo back end or, if the modification has content preloading enabled, from the custom script.
- Replaces the Mustache tags in the template content based on the key-value pairs in the JSON object.
- Renders the final content to the page.
Figure: Content options in the modification flow, with content preloading disabled (click to enlarge)
Figure: Content options in the modification flow, with content preloading enabled (click to enlarge)
Content prerendering in the modification flow
When a modification variation that uses a template with a content prerenderer is loaded on a page, Frosmo Core:
- Retrieves the template content.
- Retrieves the JSON object containing the content options set in the variation, if any.
- Retrieves the content prerenderer code.
- Runs the prerenderer.
- If the template uses content options, the prerenderer takes the content option values from the JSON object, uses those values to retrieve or otherwise build the final values for the Mustache tags, and requests the content to be rendered with the new values.
- If the template does not use content options, the prerenderer independently builds the final values for the Mustache tags, and requests the content to be rendered with these values.
- Replaces the Mustache tags in the template content with the values from the prerenderer.
- Renders the final content to the page.
Figure: Content prerendering in the modification flow with content options (click to enlarge)
Figure: Content prerendering in the modification flow without content options (click to enlarge)
Both figures above show a situation where content preloading is disabled. If content preloading was enabled, the template content, any content options, and the content prerenderer code would be included in the site's custom script, and Frosmo Core would retrieve them from the custom script rather than from the Frosmo back end.