Switch Template Support - BloomReach Experience - Open Source CMS

This article covers a Hippo CMS version 10. There's an updated version available that covers our most recent release.

17-12-2015

Switch Template Support

Introduction

Goal

Configure multiple variants of a Freemarker template, which can be selected in a component's configuration in the Channel Manager.

Background

With switch template support you can switch (in production) between multiple freemarker templates for component items in  container components configurable via the  Template Composer . Switch template works seamlessly with the enterprise modules   relevance and  experiments, where the latter is specifically interesting to find out whether the new template results in higher conversion. Switch template support requires you are using   freemarker templates as web files.

Use Switch Templates

Assume you have the following Freemarker templates stored as web files:

+ bootstrap
  + webfiles
    + src
      + main
        + resources
          + site
            + ftl
              + base
              | + main
              |   + list.ftl 
              + layout
                 + webpage.ftl

And you have a catalog component item that has webfile:/ftl/base/main/list.ftl or you have an existing container item configured in a container that has webfile:/ftl/base/main/list.ftl, and you need in the Template Composer to be able to 

  1. switch to a different view (renderer), or
  2. configure a different view depending on the visitor profile (enterprise relevance) or
  3. try a different view to experiment conversions (enterprise experiments). 

then you can achieve this using the switch template feature.

Template Variants

To have multiple variants of a template like list.ftl available in the template composer, you only need to create next to  list.ftl a sibling folder called  list and in the folder store the available variants. For example:

+ bootstrap
  + webfiles
    + src
      + main
        + resources
          + site
            + ftl
              + base
              | + main
              |   + list
              |   |   + list-title.ftl
              |   |   + list-title-date.ftl
              |   |   + list-title-date-image.ftl
              |   + list.ftl            
              + layout
                 + webpage.ftl

With the above web files setup, every container item component that uses webfile:/ftl/base/main/list.ftl will get in its properties window in the Template Composer a drop down to switch to an alternative template. 

switch template

Labels for Template Variant Names

As can be seen in the picture above, the drop down contains the files names of the freemarker templates

  • list-title-date-image.ftl
  • list-title-date.ftl
  • list-title.ftl
  • list.ftl

Achieving a label per Freemarker template works just like Backing a ResourceBundle with Properties Files and can be done by adding a resource bundle that is the name of the folder ( list in this example) plus .properties, i.e.  list.properties in this example:

+ bootstrap
  + webfiles
    + src
      + main
        + resources
          + site
            + ftl
              + base
              | + main
              |   + list
              |   |   + list-title.ftl
              |   |   + list-title-date.ftl
              |   |   + list-title-date-image.ftl
              |   + list.ftl
              |   + list.properties
              + layout
                 + webpage.ftl

list.properties contains as keys the names of each of the freemarker template file and as value the display name you want to have for the template in the drop down, for example:

list.ftl = List (title, date, image, summary)
list-title.ftl = List (title)
list-title-date.ftl = List (title, date)
list-title-date-image.ftl = List (title, date, image)

Adding this results in a drop down with labels:

switch template labels

Localized Labels for Template Variant Names

To achieve localized labels for the template variants, for example for locale  fr_FR you can add as a sibbling to list.properties also the file list_fr.properties or list_fr_FR.properties containing the localized labels in French/France.

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?