Documentation Home

Theme Hierarchy

The Theme hierarchy is driven by the parentTheme field off of ThemeConfigurationImpl.

Concepts

The Theme Hierarchy allows one ThemeConfiguration to inherit theme variables, templates, and theme files from another theme.
This functionality provides the ability for multiple sites to share common templates and variables without having to share
the same ThemeDefinition. In the past this was not possible without adding some additional custom template resolvers, and
even then, you would have to override the master ThemeConfiguration to change any theme variables.

Here is an example setup for a theme hierarchy:

-- The parent theme definition
INSERT INTO BLC_THEME_DEFINITION (THEME_DEFINITION_ID, THEME_NAME, THEME_DESCRIPTION, THEME_PATH, IS_DEFAULT) VALUES (-1, 'Parent Theme', 'Parent theme definition', 'parent-theme', false);

-- The parent theme configuration
INSERT INTO BLC_THEME_CONFIGURATION (THEME_CONFIGURATION_ID, THEME_NAME, THEME_DEFINITION_ID, DATE_CREATED, DATE_UPDATED, IS_DEFAULT) VALUES (-1, 'Parent Theme Configuration', -1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, false);

-- The site's theme definition
INSERT INTO BLC_THEME_DEFINITION (THEME_DEFINITION_ID, THEME_NAME, THEME_DESCRIPTION, THEME_PATH, IS_DEFAULT) VALUES (-2, 'My Site Theme', 'Site theme definition', 'site-theme', true);

-- The site's theme configuration
INSERT INTO BLC_THEME_CONFIGURATION (THEME_CONFIGURATION_ID, THEME_NAME, THEME_DEFINITION_ID, DATE_CREATED, DATE_UPDATED, IS_DEFAULT, SITE_DISC, PARENT_THEME_ID) VALUES (-2, 'Site Theme Configuration', -2, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, true, -1);

Notice that the column IS_DEFAULT is set to TRUE for the site's theme. This is because the default functionality for
resolving theme finds the most recently updated ThemeConfiguration where defaultConfig is true. If you are using
MultiTenant-SingleSchema, this will additionally filter to only return configurations for the current site. If there is a
more custom approach needed for decided which theme is resolved, implement the extension handler method
com.broadleafcommerce.theme.service.ThemeServiceExtensionHandler.overrideThemeConfiguration to do so.

Under the above configuration, when the site is trying to resolve a template layout/homepage.html, it will do the following:

  1. Look for layout/homepage.html under site-theme/, if it finds it, returns that resource
  2. Look for layout/homepage.html under the parent theme directory, parent-theme/, and return it if it finds it.

Additional theme variables are inherited from the parent. For instance, if the theme variable backgroundColor is defined
in the site theme configuration and the style.css is located under the parent theme directory, the variable will be replaced
with the site's theme variables first. This allows the site's theme configuration to override the parent theme's variables.

ThemeParentTemplateResolver

In order to set up the template resolver for scanning the parent theme templates, include a bean like the following:

@Bean
public ThemeParentTemplateResolver blThemeParentTemplateResolver() {
    ThemeParentTemplateResolver templateResolver = new ThemeParentTemplateResolver();
    templateResolver.setPrefix("classpath:themes/");
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateFolder(templateFolder);
    templateResolver.setTemplateMode(BroadleafTemplateMode.HTML5);
    templateResolver.setCacheable(cacheTemplate);
    templateResolver.setCacheTTLMs(cacheTTL);
    templateResolver.setOrder(275);
    return templateResolver;
}