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:
- Look for
layout/homepage.html
undersite-theme/
, if it finds it, returns that resource - 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;
}