Quick start 

This page walks through a minimal working example: rendering the header CType with a Handlebars template.

1. Include site sets

   The extension ships two site sets. Include them in your site's configuration via the site module or config/sites/<site>/sets.yaml.

   cpsit/handlebars (required)

   Wires plugin.tx_handlebars.view paths from the site settings handlebars.view.templateRootPath and handlebars.view.partialRootPath. Required for every site that renders Handlebars templates.

   cpsit/handlebars-content-element (optional)

   Sets lib.contentElement = HANDLEBARSTEMPLATE, replacing the default Fluid base object. Include this set when all content elements should use Handlebars rendering by default.

2. Configure template paths

   Declare where your .hbs files are located. The simplest option is TypoScript:

   plugin.tx_handlebars {
       view {
           templateRootPaths {
               10 = EXT:my_sitepackage/Resources/Private/Templates/Handlebars
           }
           partialRootPaths {
               10 = EXT:my_sitepackage/Resources/Private/Partials/Handlebars
           }
       }
   }

   Copied!

   See also

   Template paths — all configuration methods and their priority order.

3. Create a Handlebars template

   Create the template file at the path declared above. The filename without the .hbs extension is used as the templateName:

   EXT:my_sitepackage/Resources/Private/Templates/Handlebars/Header.hbs

   <div class="ce-header">
       {{#if header}}
           <h1 class="ce-header__title">{{header}}</h1>
       {{/if}}
       {{#if subheader}}
           <p class="ce-header__subtitle">{{subheader}}</p>
       {{/if}}
   </div>

   Copied!

4. Configure the content element

   Point the header CType at the template using a HANDLEBARSTEMPLATE content object:

   tt_content.header = HANDLEBARSTEMPLATE
   tt_content.header {
       templateName = Header
   
       variables {
           header = TEXT
           header.field = header
   
           subheader = TEXT
           subheader.field = subheader
       }
   }

   Copied!

   Each entry in variables is processed as a TYPO3 content object against the current content element record. The resulting values are passed to the template alongside the automatically injected data and current variables.

5. Flush caches

   After editing TypoScript, flush the TYPO3 page cache. After editing Services.yaml, flush and rebuild the service container as well.